[Android] TableLayout, GridLayout

테이블 레이아웃

 

테이블레이아웃의 속성

• layout_span
  • 열을 합쳐서 표시하라는 의미
  • layout_span="2"는 현재 셀부터 2개의 셀을 합쳐서 표시함
• layout_column
  • 지정된 열에 현재 위젯을 표시
  • layout_column="2"는 해당 위젯을 열번호 2번에 넣고 다음으로 오는 위젯의 열번호가 3,4,...으로 뒤에 이어 붙게 함
• stretchColumns
  •  <TableLayout> 자체에 설정하는 속성
  • 지정된 열의 너비를 늘리라는 의미
  • stretch Columns=“*”는 각 셀을 모두 같은 크기로 확장하여 전체 화면이 꽉
    차는 효과를 냄
  • 열 번호는 0번부터 시작
  • 난 이거 왜 안되는지 모르겠음..(?) 빨간줄 그여서 그냥 전체 col크기만큼 layout_span="colnum"해줌

 

아래의 이미지를 테이블 레이아웃으로 구현하기

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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">


    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="숫자 1 입력" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="숫자 2 입력"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/num0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="0" />

        <Button
            android:id="@+id/num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />

        <Button
            android:id="@+id/num2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2" />

        <Button
            android:id="@+id/num3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3" />

        <Button
            android:id="@+id/num4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/num5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="5" />

        <Button
            android:id="@+id/num6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="6" />

        <Button
            android:id="@+id/num7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="7" />

        <Button
            android:id="@+id/num8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="8" />

        <Button
            android:id="@+id/num9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="9" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/add"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:text="+" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:text="-" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/mul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:text="*" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/div"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:text="/" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="5"
            android:layout_weight="1"
            android:text="= "
            android:textColor="#FA0000"
            android:textSize="24sp" />
    </TableRow>
</TableLayout>

 

---

그리드 레이아웃

테이블레이아웃에서는 다소 어려웠던 행 확장도 간단하게 할 수 있어서 유연한 화면 구성에 적합함

인덱스는 0부터 시작 (ex : 2행 3열 -> layout_row="1", layout_column="2")

 

 

그리드레이아웃의 속성

• rowCount: 행의 수
• columnCount: 열의 수
• orientation: 그리드를 수평 방향으로 우선할 것인지, 수직 방향으로 우선할 것인지를 결정
• layout_row: 자신이 위치할 행 번호(0번부터 시작)
• layout_column: 자신이 위치할 열 번호(0번부터 시작)
• layout_rowSpan: 행을 지정된 수만큼 확장함
• layout_columnSpan: 열을 지정된 수만큼 확장함
• layout_gravity: 주로 fill, fill_vertical, fill_horizontal 등으로 지정
  • layout_rowSpan이나 layout_ columnSpan으로 행 또는 열이 확장되었을 때 위젯을 확장된 셀에 꽉 채우는 효과를 냄

 

위의 코드를 그리드 레이아웃으로 변경하기

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="5"
    android:rowCount="9">


    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:ems="10"
        android:inputType="textPersonName"
        android:layout_columnWeight="1"
        android:text="Name" />

    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />

    <Button
        android:id="@+id/button"
        android:layout_width="30dp"
        android:layout_columnWeight="1"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="0"

        android:text="1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="30dp"
        android:layout_columnWeight="1"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="1"
        android:text="2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="30dp"
        android:layout_columnWeight="1"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="2"
        android:text="3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="30dp"
        android:layout_columnWeight="1"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="3"
        android:text="4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="30dp"
        android:layout_columnWeight="1"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="4"
        android:text="5" />

    <Button
        android:id="@+id/button6"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:text="Button" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_columnWeight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button8"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_row="5"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:text="Button" />

    <Button
        android:id="@+id/button9"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:text="Button" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:text="TextView" />
</GridLayout>

 

---

 

테이블레이아웃, 그리드 레이아웃을 이용해서 아래 이미지 화면 만들기

 

 

테이블 레이아웃으로 구성

(아래 코드는 위젯 배치만 다룬 내용이라 id값 오류가 있으며 text값이 다름)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <TextView
            android:id="@+id/editTextTextPersonName2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="3"
            android:layout_weight="1"
            android:ems="10"
            android:gravity="center_vertical"
            android:inputType="textPersonName"
            android:text="Name" />

        <Button
            android:id="@+id/btn0"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />
    </TableRow>

    <TableRow android:layout_weight="1">

        <Button
            android:id="@+id/btn0"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

    </TableRow>

    <TableRow android:layout_weight="1">

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

    </TableRow>

    <TableRow android:layout_weight="1">

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

    </TableRow>

    <TableRow android:layout_weight="1">

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:text="0"
            android:textSize="30dp"
            android:layout_span="2"/>

        <Button
            android:id="@+id/btn0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="30dp" />

    </TableRow>


</TableLayout>

 

그리드 레이아웃으로 구성

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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"
    android:columnCount="4"
    android:rowCount="5"
    tools:context=".MainActivity2">


    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:gravity="left|center_vertical"
        android:text="TextView"
        android:textColor="#FF0000"
        android:textSize="24sp" />

    <Button
        android:id="@+id/btnClear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="C" />
    <Button
        android:id="@+id/btn7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="7" />
    <Button
        android:id="@+id/btn8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="8" />
    <Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="1"
        android:layout_column="2"
        android:text="9" />
    <Button
        android:id="@+id/btnPlus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="+" />
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="4" />
    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="5" />
    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="6" />
    <Button
        android:id="@+id/btnMinus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="-" />
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="1" />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="2" />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="3" />
    <Button
        android:id="@+id/btnMul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="X" />
    <Button
        android:id="@+id/btn0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="0" />
    <Button
        android:id="@+id/btnEqual"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="=" />
    <Button
        android:id="@+id/btnDiv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="/" />

</GridLayout>

 

---

테이블 레이아웃은 대부분 span="열 개수"속성이나 weight="1"으로 해결되는 경우가 많음

(안되는 것 같아도 모든 위젯에 weight="1"주게되면 되는 경우가 많더라)

 

그리드 레이아웃에서 위젯들이 내 맘같이 배치되지 않을 때 확인해야 할 것들

 

아래 이미지같은 모양이 나오는 경우

1. 그리드 레이아웃 (베이스 레이아웃)의 width와 height속성이 match_parent인지 확인

android:layout_width="match_parent" 
android:layout_height="match_parent"

 

 

아래 이미지같은 모양이 나오는 경우

2. EditText위젯에 android:layout_rowWeight="1"속성을 지정했는지 확인(이 문제는 rowWeight와 columnWeight 둘 다 1로 지정해야 함)

android:layout_rowWeight="1"
android:layout_columnWeight="1"

 

 

아 진짜 이놈의 레이아웃은 왜이렇게 맘같이 안도ㅐ........ 쉽지않네,,,,,,