[안드로이드] 패스트캠퍼스 챌린지 26일차!!(TableLayout)

들어가며

어제 스레드에 대해서 잠깐 다뤄 봤습니다 스레드.. 별로 어렵지 않죠? 여러가지의 일을 분담해서 처리한다고 생각하면 될 것같습니다 그러나.. 제 생각으로는 스레드 처리가 코드 상으로는 매우 어려울 것으로 예상됩니다. 3가지 일을 하나의 스레드만 처리한다고 했을때 코드 량은 별로 힘들게 없습니다 왜냐하면 우리가 생각하는 코드 작성 자체가 싱글 스레드로 돌아가니까요 ㅎㅎㅎ.. 그래도 스레드 처리 방법만 제대로 안다면 코딩은 어렵지 않다고 생각이 듭니다!

오늘은 드디어 대망의 프로젝트 4!! 계산기 만들기를 할 것입니다. 그래서 오늘 간단한 UI작업을 할껀데 당연 Constraintlayout은 사용을 할 것이고 새로운 것을 다뤄 볼것입니다 바로~~~~~ TableLayout입니다!! TableLayout을 어디에 적용을 할 것이냐면... 예상 하셨을 테니면 계산기 숫자를 View 하는데 사용 될 것입니다

Mac OS 계산기

여기서 테이블이라 함은 css에서 배웠을지 모르겠지만 격자 형식의 View를 일컫는 말입니다! 그래서 행과 열로 구성되어 있는 것이죠 html에서도 table 은 격자 형식의 View를 나타내기도 합니다. 그래서 간단한 코드로 ConstraintLayout과 View 마지막으로 TableLayout 그 자식 태그인 TableRow에 대해서도 다뤄보도록 하겠습니다!

 

CODE

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/topView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomTable"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

    <TableLayout
        android:id="@+id/bottomTable"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:shrinkColumns="*"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_weight="1.5"
        app:layout_constraintTop_toBottomOf="@id/topView">
        <TableRow>ㅁ
            <Button />
            <Button />
            <Button />
            <Button />
            <Button />
        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>

    </TableLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

작성중인 코드입니다! 오늘 강의가 작성중에 끝나서 내일 더 다뤄보도록 하겠지만 핵심 코드들은 다 나왔습니다

 

일단 계산한 값을 보여주기 위한 View태그를 만들었습니다

    <View
        android:id="@+id/topView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomTable"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

체인 효과를 받기 위해 width / height 는 0dp로 설정해뒀습니다

여기서 app:layout_constraintVertical_weight = "1" 로 설정되어 있는데 weight 라 함은 가중치를 설명합니다 그래서 parent 인 ConstraintLayout 전체에서 가중치를 몇 가질 것이냐? 라는 뜻과 같습니다 만일 View 이외의 다른 태그들이 없다면 View 가 모든 Layout를 차지 할 것입니다 그러나 밑에 코드를 보면 TableLayout도 가중치를 가지는데요?! 한번 살펴 볼까요?!

 

<TableLayout
        android:id="@+id/bottomTable"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:shrinkColumns="*"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_weight="1.5"
        app:layout_constraintTop_toBottomOf="@id/topView">
        
        <TableRow>
            <Button />
            <Button />
            <Button />
            <Button />
            <Button />
        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>
        <TableRow>

        </TableRow>
</TableLayout>

 

TableLayout입니다! 타 Layout과 비슷한 속성을 가지고 있습니다. layout_constraintVerical_weight 이 1.5이므로 View의 weight가 1이라며 layout 전체에서 차치하는 비율이 1 : 1.5 가 됩니다 그래서 곧 TableLayout이 VIew보다 1.5배 더 크다는 의미가 되겠습니다. 그런데 처음 보는 속성이 있습니다

 

android:shrinkColumns="*" 속성입니다 이 속성은 TableRow 의 값이 layout을 넘어 간다면 넓이를 자동으로 맞춰주는 역할을 합니다 

설정 안한 코드

설정한 코드

 

Button 5개를 추가를 한 Layout입니다 자세히봐야 보이긴 하지만 layout을 넘지 않은 모습을 볼 수 있습니다. 

 

이렇게 큰 레이아웃틀을 구성해보았습니다 내일은 계산기의 숫자 / 연산식 등을 View잉 해볼 것같습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발#패스트캠퍼스후기#30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격차 패키지 Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.