[Kotlin] Layout

Boknami·2023년 3월 17일
post-thumbnail

💻 코틀린의 기본 레이아웃 잡기 연습

코틀린의 기본 레이아웃을 연습했다.
휴대폰의 전화하는 화면 UI를 만드는데 Linear, Grid, Relative 3가지를 이용해보았다.

[1] LinearLayout

기본적인 레이아웃 중 하나로 말 그대로 선형 레이아웃이다. 전체적 틀을 잡을 때 사용하면 좋을 것 같았다.
위치를 따로 지정하지 않아도 자동으로 중첩 없이 배치된다.

📃android:orientation="vertical"
보통 UI설계를 할 때 이 화면을 만들기 위해서 어떻게 만들어야할지 나누어보면 세로vertical로 두고 만드는 경우가 많은 것 같다.

  • 이 외 : horizontal
  • 다른 속성 : weight (1,1,1,1 주면 25%씩 배분되어 배치된다)

📃 android:gravity="center_horizontal"
그레비티 말 그대로 레이아웃 전체를 끌어당기는 방향을 설정한다. 지금 화면은 왠만하면 시인성이 좋기 위해서 중앙으로 밀집된 형태로 UI를 만들었다.

[2] GridLayout

칸을 나누어 배치되는 레이아웃이다. 행과 열의 집합으로 이루어져있다.

📃 android:orientation="horizontal">
Linear와 동일하게 orientation이 존재하고 이 또한 vertical,horizontal이 존재한다.

📃 android:columnCount="3"
칸을 나누는데 역할을 한다. 열을 개수를 지정한다.

이 외 : rowCount

app:layout_rowspan 과 app:layout_colspan을 이용해서 차지하는 칸을 조절할 수 있다.

[3] RelativeLayout

화면에 이미 배치되어 있는 뷰를 기준으로 다른 뷰들의 위치를 지정하는 레이아웃이다.

📃 android:layout_toRightOf="@+id/icon_video"

다음과 같은 형식으로 이미 배치된 것을 기준으로 텍스트가 나열되고 있다.

0개의 댓글