Android:: TableLayout 과 GridLayout의 차이와 계산기 View 만들기

1) Table Layout과 GridLayout 차이

그리드는 fill이랑 span 이용해서 셀 병합 수행 // row, column, 인덱스 접근 팔레트에서 끌어 쓰기 가능.

테이블은 weight랑 span 이용하여 셀 병합 수행 // <Tablerow>의 반복,데이터 양이 적은 경우에 유용.

 

테이블 레이아웃은 모든행이 인스턴스화 (tablerow) 되어야 하고, 재활용 되지 않기 때문에 표시할 데이터 적은 경우 유용.

 

그리드 레이아웃은 항목을 그리드에 배열하는 리스트뷰와 같다. 

그리드 레이아웃의 목적은, 어댑터의 데이터를 표시하고 사용자가 표시된 각 항목을 탐색하고 선택할 수 있도록 하는 것이다.

 

동일한 UI의 경우 GridLayout은 일반적으로 TableLayout보다 빠르고 메모리가 적게 소요된다

 

 

2) TableLayout으로 만든 계산기 Code & View

→ weight 값으로 셀 병합 수행. span 값도 같이 활용.

 

<?xml version="1.0" encoding="utf-8"?>

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <TextView
            android:id="@+id/textView"
            android:layout_weight="1"
            android:text="Num1 : "
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:ignore="HardcodedText,SpUsage" />
        <EditText
            android:id="@+id/edNum1"
            android:layout_weight="4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:ems="10"
            android:layout_span="4"
            tools:ignore="Autofill,LabelFor" />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <TextView
            android:id="@+id/textView2"
            android:layout_weight="1"
            android:text="Num2 : "
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:ignore="HardcodedText,SpUsage" />
        <EditText
            android:id="@+id/edNum2"
            android:layout_weight="4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:ems="10"
            android:layout_span="4"
            tools:ignore="Autofill,LabelFor" />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <ImageButton
            android:id="@+id/imageButton"
            android:layout_weight="1"
            android:src="@drawable/ic_add_circle_black_24dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ContentDescription" />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_weight="1"
            android:text="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_weight="1"
            android:text="4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_weight="1"
            android:text="8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="1"
            android:text="9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
        <Button
            android:layout_weight="2"
            android:layout_span="2"
            android:text="="
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:ignore="ButtonStyle,HardcodedText" />
    </TableRow>

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

        <Button
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"
            android:layout_weight="1"
            android:layout_span="2"
            android:text="@string/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"
            android:layout_weight="1"
            android:layout_span="2"
            android:text="@string/subtract"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"
            android:layout_weight="1"
            android:layout_span="2"
            android:text="@string/multiply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </TableRow>

    <TableRow
        android:layout_width ="match_parent"
        android:layout_height ="match_parent">
        <Button
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"
            android:layout_weight="1"
            android:layout_span="2"
            android:text="@string/divide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </TableRow>

    <TableRow>
        <EditText
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"
            android:layout_weight="1"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:ems="10"
            tools:ignore="Autofill,LabelFor" />
    </TableRow>


</TableLayout>

3)GridLayout으로 만든 계산기 Code & View→  fill 과 span 값으로 병합 같이 활용.

<?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:orientation="horizontal"
    android:columnCount="4"
    android:rowCount="11">

    <TextView

        android:id="@+id/textView25"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_marginLeft="10dp"

        android:text="num1 : "
        tools:ignore="HardcodedText,RtlHardcoded" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_columnSpan="3"
        android:layout_gravity="fill_horizontal"
        tools:ignore="Autofill,LabelFor,TextFields" />

    <TextView
        android:id="@+id/textView26"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:text="num2 : "
        tools:ignore="HardcodedText,RtlHardcoded" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:layout_columnSpan="3"
        android:layout_gravity="fill_horizontal"
        tools:ignore="Autofill,LabelFor,TextFields"/>

    <ImageButton
        android:id="@+id/imageButton16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_gravity="fill_horizontal"
        android:layout_columnSpan="2"
        app:srcCompat="@drawable/ic_add_circle_black_24dp"
        tools:ignore="ContentDescription,VectorDrawableCompat" />

    <Button
        android:id="@+id/button5"
        android:layout_width="98dp"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="0"
        android:layout_gravity="fill_horizontal"
        android:text="0"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/button6"
        android:layout_width="105dp"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_gravity="fill_horizontal"
        android:text="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/button7"
        android:layout_width="101dp"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="2"
        android:layout_gravity="fill_horizontal"
        android:text="2"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/button8"
        android:layout_width="117dp"
        android:layout_height="wrap_content"
        android:layout_row="3"
        android:layout_column="3"
        android:layout_gravity="fill_horizontal"
        android:text="3"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="0"
        android:text="4"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="1"
        android:text="5"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="2"
        android:text="6"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="4"
        android:layout_column="3"
        android:text="7"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="5"
        android:layout_column="0"
        android:text="8"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="5"
        android:layout_column="1"
        android:text="9"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"
        />

    <Button
        android:id="@+id/button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="5"
        android:layout_column="2"
        android:layout_columnSpan="2"
        android:text="@string/equals"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText"/>

    <Button
        android:id="@+id/button16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="6"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:text="@string/add"
        android:layout_gravity="fill_horizontal"/>

    <Button
        android:id="@+id/button17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="7"
        android:layout_column="1"
        android:text="@string/subtract"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"/>

    <Button
        android:id="@+id/button18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="8"
        android:layout_column="1"
        android:text="@string/multiply"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"/>

    <Button
        android:id="@+id/button19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="9"
        android:layout_column="1"
        android:text="@string/divide"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"/>

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_row="10"
        android:layout_column="1"
        android:text="RESULT"
        android:background="@color/colorBlue"
        android:layout_columnSpan="2"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:layout_gravity="fill_horizontal"
        tools:ignore="HardcodedText" />


</GridLayout>