[Android, Kotlin] TableLayout

0. TableLayout

TableLayout ?

화면상에 마치 엑셀의 표 형식을 보는듯 나타내주는 레이아웃이다.
[표] 인만큼 각각의 Rows 와 Columns 을 가지고 표현할 수 있고, Background, Stroke, Color, Span등의 속성을 통해 원하는 모양으로 그릴 수 있으니 간단한 예제를 통해 알아보도록 하자.

 
 

1. 기능 구현

1. ( 4 X 4 ) 각각 하나의 셀이 1개의 TextView로 이루어진 TableLayout을 만들어보자.
2. Drawable Resource File을 통해 속성값을 설정해보자 (Background, Stoke)
3. Drawable Resource File을 통해 셀 별로 속성값을 설정해보자 (Color, Span-병합)

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. activity_main.xml : TableLayout 만들기

• width = 0 dp (match constraint)
• height = wrap_content
• margin = 상/하(100dp), 좌/우(8dp)

<TableLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
</TableLayout>

 
 

4. activity_main.xml : ( 4 X 4 ) 표 만들기

• TableRow : 표에서 하나의 가로 줄(Row)를 만든다
• TextView X 4 : 하나의 TableRow 안에 넣어진 TextView 는 각 Column 이 된다.
• Ex) (1 X 4) TableLayout : 다음 코드를 4번 반복하면 ( 4 X 4 ) 를 만들 수 있다.

<TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"                             
                android:text="겨울시인"
                android:textSize="18sp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"                                
                android:text="겨울시인"
                android:textSize="18sp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"                               
                android:text="겨울시인"
                android:textSize="18sp" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"                                
                android:text="겨울시인"
                android:textSize="18sp" />
</TableRow>

 
 

5. activity_main.xml : 가운데 정렬

• TableLayout 에 stretchColumns 속성 부여

android:stretchColumns="*"

• 각 TextView 에 gravity 속성 부여

android:gravity="center"

[가운데 정렬 : 적용 후]

 
 

6. Drawable Resource File (1)

• 표에 적용할 Drawable Resource File 만들기
  

  

• 참고 : Shape 속성

  1. solid : Shape을 채울 단색 설정
  2. corners : Shape에 대해 둥근 모서리를 생성(Shape이 사각형인 경우에만 적용)
  3. gradient : Shape에 대한 그라데이션 색상을 지정
  4. padding : 포함하는 View에 적용할 패팅값 설정
  5. size : Shape의 크기
  6. storke :Shape에 대한 스크로크 선 설정
     

     

링크 - > Drawable Resource 에 대한 보다 자세한 내용을 확인해보려면.. 클릭

 
 

7. Drawable Resource File (2)

TableLayout 에 적용할 속성들을 Drawable Resource File을 통해 미리 만들어 놓자.

• table_outside.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#89D7E1"/>
    <stroke android:width="3dp"
        android:color="#000000"/>
</shape>

• table_inside.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#89D7E1"/>
    <stroke android:width="1dp"
        android:color="#000000"/>
</shape>

• table_inside_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F41536"/>
    <stroke android:width="1dp"
        android:color="#000000"/>
</shape>

 
 

8. Drawable 적용

• 1. table_outside.xml 적용 후 : TableLayout의 background 속성으로 적용

android:background="@drawable/table_outside"

• 2. table_inside.xml 적용 후 : 모든 셀(Textview)의 background 속성으로 적용

android:background="@drawable/table_inside"

• 3. table_inside_red.xml (원하는 셀 하나를 선택하여 background 속성으로 적용
     Ex) 첫번째 셀에 적용)

android:background="@drawable/table_inside_red"

 
 

9. 추가 기능(셀 병합)

• 병합을 원하는 셀중 가장 왼족 셀에 span 속성을 적용 하여 확장 후, 밀려난 셀은 삭제
  Ex) 1번째 Row의 3,4번째 셀을 병합하고자 하면, 3번째 셀에 span 속성 적용("2") 후, 4번째 셀 삭제

android:layout_span="2"

 
 

10. Reference

유투버 홍드로이드님의 안드로이드 앱 만들기 #39 Table Layout (엑셀 표 느낌)