[ Android Studio ] #2. 레이아웃에 대해 알아보자

ma.caron_g·2022년 1월 26일
0
post-thumbnail

< 자료 출처 >
https://wikidocs.net/95010

[ 레이아웃 (Layout) ]

안드로이드 앱에서 화면에 보이는 요소(Button, TextView 등)를 뷰(View)라고 하는데, 이때 뷰들을 포함하고 배치하는 역할을 하는 것을 레이아웃이라고 합니다.


[ 5가지 대표 레이아웃 ]

  • ConstraintLayout (제약 레이아웃) : 제약 조건을 사용하여 화면을 구성. 안드로이드 스튜디오에서 자동으로 설정하는 디폴트 레이아웃
  • LinearLayout (리니어 레이아웃) : 한 쪽 방향으로 차례대로 뷰를 추가하여 화면을 구성하는 레이아웃
  • RelativeLayout (상대 레이아웃) : 부모 컨테이너나 다른 뷰와의 상대적 위치를 화면으로 구성하는 레이아웃
  • TableLayout (테이블 레이아웃) : 격자 모양의 배열을 사용하여 화면을 구성하는 방법의 레이아웃
  • FrameLayout (프레임 레이아웃) : 가장 상위에 있는 하나의 뷰 또는 뷰 그룹만 보여주는 방법의 레이아웃으로, 여러개의 뷰를 중첩한 후 각 뷰를 전화하여 보여주는 방식으로 자주 사용합니다.

>> ConstraintLayout (제약 레이아웃)

제약 레이아웃은 뷰의 크기와 위치를 결정할 때 제약 조건(Contraint)을 사용합니다.
제약 조건이란? 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 다른 요소들과 연결선을 통하여 만들 수 있습니다.

연결선이 없으면 아래와 같은 오류가 발생합니다.

제약 레이아웃에서는 뷰의 위치를 결정할 수 있을 만큼의 연결선이 필요합니다.
예를 들어, 버튼의 왼쪽만 부모 레이아웃에 연결하게 되다면, 위아래의 위치를 결정할 수 없기 때문에 경고 메시지가 뜨게 됩니다.
뷰의 위치를 결정해주기 위해서 다음과 같이 설정해주면 됩니다.

두 개의 버튼을 추가하여 button(1)의 모든 가로축과 세로축을 부모 레이아웃에 연결해주어 화면 정 가운데 배치하였고, button2의 위쪽과 왼쪽을 부모 레이아웃에 연결하고 마진값을 주어 왼쪽 상단에 위치할 수 있도록 설정하였습니다.





>> LinearLayout (리니어 레이아웃)

리니어 레이아웃은 수평 또는 수직으로 뷰를 배치할 수 있습니다.
아래와 같이 android:orientation 속성을 통해

  • 수평은 "horizontal"
  • 수직은 "vertical"

값으로 설정합니다.

<!-- 수평 LinearLayout -->
<LinearLayout
    ...
    android:orientation="horizontal"
>

>>>> 수평적 리니어 레이아웃

<!-- 수직 LinearLayout -->
<LinearLayout
    ...
    android:orientation="vertical"
>

>>>> 수직적 리니어 레이아웃

>>>> 뷰 정렬하기

리니어 레이아웃에서 뷰를 정렬하기 위해서는 gravity 또는 layout_gravity속성을 사용할 수 있습니다.

  • gravity : 뷰 안에 표시하는 내용물을 정렬
  • layout_gravity : 부모 컨테이너의 여유공간 내에서 뷰 정렬

리니어 레이아웃에 버튼과 텍스트 뷰를 추가한 후,
버튼에는 layout_gravity 속성을, 텍스트 뷰에는 gravity속성을 지정하였습니다.





>> RalativeLayout (상대 레이아웃)

상대 레이아웃은 부모 컨테이너나 다른 뷰와의 상대적인 위치를 이용해 뷰의 위치를 결정할 수 있습니다.
다른 뷰의 id속성 값을 이용하여 위치를 결정합니다.

속성설명
layout_alignParentToptrue인 경우 뷰의 위쪽과 부모의 위쪽을 맞춤
layout_alignParentBottomtrue인 경우 뷰의 아래쪽과 부모의 아래쪽을 맞춤
layout_alignParentLefttrue인 경우 뷰의 왼쪽과 부모의 왼쪽을 맞춤
layout_alignParentRighttrue인 경우 뷰의 오른쪽과 부모의 오른쪽을 맞춤

속성설명
layout_above지정한 뷰의 위쪽에 배치
layout_below지정한 뷰의 아래쪽에 배치
layout_toLeftOf지정한 뷰의 왼쪽에 배치
layout_toRightOf지정한 뷰의 오른쪽에 배치




>> TableLayout (테이블 레이아웃)

테이블 레이아웃은 격자 모양의 배열로 화면을 구성하는, 표 모양의 레이아웃입니다.
테이블 레이아웃을 추가하게 되면, TableRow 태그가 자동으로 추가되어 있는데, TableRow안에 여러개의 뷰를 추가할 수 있습니다.

TableLayout에 TableRow의 개수가 행의 개수가 되고, 각 TableRow에 들어있는 뷰의 개수가 열의 개수가 됩니다.

BUTTONBUTTONBUTTON
BUTTONBUTTONBUTTON
BUTTONBUTTONBUTTON

위와 같은 형식으로 일정 간격으로 뷰가 배치되어 있습니다.





>> FrameLayout (프레임 레이아웃)

프레임 레이아웃은 가장 상위의 뷰 또는 그룹 하나만 보여주는 것으로 여러가지를 중첩한 뒤에 각 뷰를 전환하면서 보여주는 방식입니다.

다음은 프레임 레이아웃 위에 1, 2, 3 세 개를 순차적으로 올려놓은 모습이고 자동으로 중첩하여 올라갑니다.

가장 상위에 있는 1가 가장 앞으로 나와있는 모습이고
그 다음의 21가 차지하고 있는 부분은 가려진 채로 화면에 표시되고 있습니다.
가장 아래에 있는 3은 두 뷰가 가린 부분을 제외한 부분만을 표시하고 있습니다.

profile
다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.

0개의 댓글