출처 : http://www.edwith.org/boostcourse-android/lecture/17043/


상대 레이아웃

상대 레이아웃은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치하는 레이아웃입니다. 

상대 레이아웃 사용 방식
예를 들어, 화면의 아래쪽에 버튼을 붙이고 싶다면 layout_alignParentBottom 속성의 값을 true로 설정하는 것만으로 충분합니다.
리니어 레이아웃의 경우에는 위에서부터 차례대로 쌓아야 가장 아래쪽까지 배치할 수 있지만 상대 레이아웃은 위에 아무것도 없어도 화면의 가장 아래쪽에 뷰를 붙여둘 수 있습니다.

상대 레이아웃을 이용한 뷰의 배치

상대 레이아웃이 뷰를 담고 있다면 이 뷰의 입장에서는 상대 레이아웃이 부모 레이아웃이 됩니다.

그리고 부모 레이아웃의 상대적 위치를 이용할 수 있습니다.

 

상대 레이아웃을 이용한 뷰의 배치 방법
A라는 이름의 뷰는 부모 레이아웃의 위쪽에 붙이고 B라는 뷰는 A 뷰의 아래쪽에 붙일 수 있습니다.
같은 상대 레이아웃 안에 들어있는 다른 뷰와의 상대적 위치를 이용하는 것이죠.

부모 레이아웃과의 상대적 위치를 지정할 때 사용하는 속성으로는 layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight 등이 있습니다.

부모 레이아웃의 가운데에 배치하기 위한 layout_centerInParent 속성도 있죠.

다른 뷰와의 상대적 위치를 지정할 때 사용하는 속성으로는 layout_toLeftOf, layout_toRightOf, layout_alignTop, layout_alignBottom 등이 있습니다.

부모 레이아웃과의 상대적 위치를 지정할 때 사용하는 속성들은 모두 Parent 라는 단어가 들어가 있지만 다른 뷰와의 상대적 위치를 지정할 때 사용하는 속성들에는 Parent 라는 단어가 들어가 있지 않습니다.

 

위, 아래 뷰를 두고 가운데 꽉 차게 배치하기

리니어 레이아웃을 이용해 화면을 배치할 때 쉽게 되지 않는 것 중의 하나가 위, 아래에 뷰를 두고 가운데에 또 다른 뷰를 두면서 꽉 차게 만드는 것입니다.

가운데에 있는 뷰를 꽉 차게 하려면 layout_height 속성의 값을 match_parent로 해야 하는데 이렇게 하면 리니어 레이아웃에서는 아래쪽 뷰가 보이지 않는 문제가 생깁니다.

위, 아래 버튼을 두고 가운데 버튼이 꽉 차게 만든 화면
상대 레이아웃을 사용하면 위쪽에 있는 뷰에는 layout_alignParentTop 속성, 아래쪽에 있는 뷰에는 layout_alignParentBottom 속성을 지정합니다.
그리고 가운데 있는 뷰의 layout_height 속성에 match_parent 값을 지정하면 위, 아래 뷰와 상관없이 화면이 꽉 차게 됩니다.
이 상태에서 layout_above와 layout_below 속성을 추가로 지정하면 위, 아래 뷰가 차지하고 있는 영역을 제외한 가운데 영역을 꽉 차게 만들 수 있습니다.

상대 레이아웃 안에 들어있는 뷰들에는 아래와 같이 속성이 지정될 수 있습니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

<Button
  android:id="@+id/button1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentTop="true" />

<Button
  android:id="@+id/button2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentBottom="true" />

<Button
  android:id="@+id/button3"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/button1"
  android:layout_above="@+id/button2"
  android:text="Button" />

</RelativeLayout>




생각해보기

  1. 상대 레이아웃을 잘 사용할 수 있다면 다른 레이아웃은 필요 없는 걸까요?
    -필요로 안할수도 있겠지만 역시 개발의 중요함은 편리함. 상대레이아웃 여러개쓰는것보다 그걸 위해 만들어진 다른 레이아웃을 쓰는게 더 효과적일수있다.
  2. 리니어 레이아웃과 상대 레이아웃을 잘 조합해서 사용하는 방법을 생각해보세요.
    - 전체적인건 상대레이아웃으로 잡고 그안에 리니어들을 넣어서 깔끔하게 정리할 수 있다.
  3. 화면에 보이는 뷰들의 일부가 겹쳐있도록 만들 수도 있을까요?
    - 가능하지만 지저분해보일수있으므로 정리가 필요하고 우선순위도 필요할것 같다.


출처 : http://www.edwith.org/boostcourse-android/lecture/17042/


리니어 레이아웃(LinearLayout)의 방향 속성과 정렬 속성

리니어 레이아웃에서 가장 중요한 속성은 방향을 결정하는 orientation 속성입니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" 
  android:layout_width="match_parent"
  android:layout_height="match_parent"
>

뷰를 정렬할 때는 layout_gravity와 gravity 속성이 사용됩니다.

Gravity는 지구의 ‘중력’처럼 끌어당기는 힘을 의미한다고 생각하면 이해하기 쉽습니다.

가로 방향으로 보았을 때 layout_gravity 속성의 값이 left이면 뷰를 왼쪽으로 끌어당겨 정렬하라는 의미거든요.

정렬은 가로 방향으로 왼쪽, 가운데, 오른쪽이 있을 수 있고 세로 방향으로 위쪽, 가운데, 아래쪽이 있을 수 있습니다.

이 외에도 여러 가지 속성이 있죠.

주의할 점은 layout_gravity는 뷰를 정렬하는 데 사용되고 gravity는 뷰 안에 들어있는 내용물을 정렬할 때 사용된다는 점입니다.

버튼을 예로 들면 버튼 안에 들어있는 글자가 내용물이 되니 gravity 속성을 주면 그 글자를 정렬하겠다는 의미가 됩니다.

또 한가지 주의할 점은 여유 공간이 있어야 정렬할 수 있다는 점입니다.

예를 들어 버튼의 가로 크기 속성인 layout_width의 값을 wrap_content로 해놓으면 gravity 속성의 값으로 가로 방향 왼쪽이나 오른쪽으로 정렬하라는 값을 주더라도 정렬은 아무 의미가 없습니다.

움직일 공간이 없기 때문이죠.


뷰의 마진, 패딩 그리고 공간분할

리니어 레이아웃 안에 들어가 있는 뷰가 차지하는 공간은 기본적으로 가로/세로 크기를 지정하는 layout_width와 layout_height 속성에 의해 결정됩니다.

그리고 추가적으로 마진을 설정할 수 있습니다.

마진(Margin)은 뷰의 테두리선 바깥쪽 공간을 얼마나 띄울 것인지를 지정하는 속성입니다.

예를 들어, layout_margin 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 마진을 줄 수도 있습니다.

패딩(Padding)은 뷰 안에 들어있는 내용물을 테두리 선과 얼마나 띄울 것인지를 지정하는 속성입니다.

버튼 안에 들어있는 글자가 테두리선과 너무 붙어있다는 느낌이 든다면 이 속성을 사용해 공간을 띄워줄 수 있습니다.

예를 들어, padding 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 패딩을 줄 수도 있습니다.

뷰의 영역 구분

처음 안드로이드 화면을 만들어볼 때 가장 많이 혼동하는 속성이 layout_weight 입니다.

이 속성은 공간분할에 많이 사용됩니다.

예를 들어, 두 개의 버튼을 가로 방향으로 똑같은 크기만큼 반반씩 공간을 차지하도록 만들고 싶을 때 사용합니다.

그런데 이 속성은 남아있는 여유 공간만 분할합니다.

이 때문에 두 개의 버튼을 가로 방향으로 추가했다면 layout_width 속성의 값은 0dp 로 주는 것이 필요합니다.

layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 1이라면 이 두 개의 버튼은 공간을 반반씩 나누어 가집니다.

왼쪽 버튼이 2/3, 오른쪽 버튼이 1/3씩 공간을 차지하도록 하고 싶다면 layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 2와 1이 되도록 만들면 됩니다.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
  android:layout_width="0dp"
  android:layout_height="wrap_content"
android:layout_weight="1"
android:text="확인" /> 
<Button
      android:layout_width="0dp"
      android:layout_height="wrap_content"
android:layout_weight="1"
android:text="취소" /> 
</LinearLayout>


 


생각해보기

  1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요?
    -그렇다. 하지만 복잡한 레이아웃을 쉽게표현할수있는 다른 레이아웃들이 많다.
  2. 화면의 위, 아래 끝에 작은 뷰를 배치하고 싶다면 리니어 레이아웃을 쓰는 것보다 더 좋은 방법이 있을까요?
    -제약레이아웃을 쓴다.


출처:http://www.edwith.org/boostcourse-android/lecture/17041/


대표적인 레이아웃

제약 레이아웃 외에 대표적인 레이아웃으로 리니어 레이아웃(LinearLayout), 상대 레이아웃(RelativeLayout), 프레임 레이아웃(FrameLayout) 등을 들 수 있습니다.

그중에서도 리니어 레이아웃이 가장 간단하면서도 자주 사용됩니다.

리니어 레이아웃은 상자를 쌓듯이 뷰를 하나씩 쌓을 수 있는 레이아웃입니다.

화면에서 뷰가 차지하는 영역을 상자라고 보고 이 상자를 한쪽 방향으로 쌓을 수 있게 해 줍니다.

상자를 위로도 쌓을 수 있고, 바닥에 어느 한방향의 일렬로 놓을 수도 있다고 생각하면 쉽습니다.

화면에서는 뷰를 아래쪽으로 쌓거나 오른쪽으로 쌓을 수 있도록 해주는데 어느 방향으로 쌓을 것인지를 먼저 결정해야 합니다.

방향 속성인 orientation 속성을 이용해 가로 방향은 Horizontal, 세로 방향은 Vertical로 지정합니다.

그다음에는 단순히 쌓기만 하면 됩니다.

아주 쉬운 레이아웃이지만 리니어 레이아웃 안에 다시 리니어 레이아웃을 여러 개 집어넣고 안에 들어간 리니어 레이아웃 각각에 서로 다른 orientation 속성을 설정하여 아주 복잡한 화면도 만들 수 있습니다.

리니어 레이아웃 사용 방식

생각해보기

  1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요?
    -가능하다. 하지만 리니어레이아웃 여러개쓸것을 쉽게 다른 레이아웃으로 표현할수 있다.


+ Recent posts