[Kotlin] GridLayout

[Kotlin] GridLayout

 

< 숫자 다이얼 만들기 >

루트 LinearLayout 방향과 다른 방식으로 다이얼을 배치하려면 또 다른 LinearLayout을 설정하면 된다.

 

1) [개별적 배치] vertical LinearLayout 1개에  horizontal LinearLayout을 3개씩 묶어 배치시킬 수 있다.

2) [표배치] GridLayout 테이블 형식으로 배치해 더 이쁘게 표현 가능하다.

 

 

< GridLayout 속성 >

특정 뷰의 위치 조정하기

- layout_row : 뷰가 위치하는 세로 방향 인덱스 지정

- layout_column : 뷰가 위치하는 가로 방향 인덱스 지정

- columnCount : 세로 방향 인덱스의 개수

<GridLayout 
    android:columnCount = 3>
    <Button android:text="A"
       android:layout_row="1"
       android:layout_column="1"/>
 </GridLayout>

 

A 버튼이 [1,1] 위치하고, 나머지 버튼은 차례대로 grid에 맞춰 배치된다.

 

 

< 위젯을 길게 배치하기 >

특정 뷰의 크기 확장하기

- layout_gravity 이용해 자기 자신에 대한 속성 정의하기

- fill_horizontal : 컨텍스트에 맞게 공간을 비우지 말고 다 채우기

android layout_gravity="fill_horizontal"

 

 

하나의 grid 칸에 위젯이 두개

원래라면 F는 [1,2] 위치에 있어야 하지만, [1,1] 위치로 지정함으로써 하나의 grid 칸에 두 개의 위젯을 배치시킨다.

<GridLayout
   <Button adroid:text="A"/>
   <Button adroid:text="HELLOWORLD HELLOWORLD"/>
   <Button adroid:text="C"/>
   <Button adroid:text="D"/>
   <Button adroid:text="E"/>
   <Button adroid:text="F"
      android:layout_row="1"
      android:layout_column="1"
      android:layout_gravity="right"/>
</GridLayout>

 

 

< 열이나 행 병합하기 >

layout_columnSpan : 가로로 열 병합

layout_rowSpan : 세로로 행 병합

 

병합한 A의 배치 후 나머지 뷰들은 순서대로 배치한다.

<GridLayout
   android:columnCount="3"
   <Button android:text="A"
      android:layout_columnSpan="2"
      android:layout_rowSpan="2"
      android:layout_gravity="fill" />
</GridLayout>

 

android:layout_gravity="fill" 모두

android:layout_gravity="fill_horizontal" 수평만 채움

android:layout_gravity="fill_vertical" 수직만 채움

 

 

< Grid로 다이얼 배치하기 >

horizontal로 설정하고 칼럼을 배치하면 된다.

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="30dp"
    android:columnCount="3">
</GridLayout>