작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/rbfks1221/221795254137
2)작성날짜: 20/02/03
1) 상대 레이아웃 (RelativeLayout) 들어가기 전에 리니어 레이아웃이 동작하는 방식을 이해했다면 레이아웃을 만드는 것이 그리 어렵지 않을 것입니다. 그런데 화면의 위와 아래쪽에 작은 뷰를 두고 그 뷰 사이에 꽉 차게 다른 뷰를 넣어보려 하면 리니어 레이아웃으로 쉽게 안 되는 것도 있구나 하는 생각이 들 겁니다. 상대 레이아웃을 사용하면 화면의 위, 아래에 뷰를 붙일 수도 있고 다른 뷰의 옆에도 붙일 수 있습니다. 상대 레이아웃이 어떤 것인지 알아봅시다. 학습 목표 1) 상대 레이아웃이 어떤 것인지 이해하고 간단한 몇 개의 뷰를 추가해봅시다. 2) 상대 레이아웃 안에 넣은 뷰에 추가할 수 있는 대표적인 속성들이 어떻게 적용되는지 설명해봅시다. 핵심 단어 · 상대 레이아웃 · 부모 레이아웃과의 상대적 위치 · 다른 뷰와의 상대적 위치 학습하기
상대 레이아웃(RelativeLayout)은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적인 위치를 이용하여 화면을 배치하는 레이아웃입니다. 지난 강의의 생각해보기 문제 중에 "화면의 위, 아래 끝에 작은 뷰를 배치하고 싶다면 리니어 레이아웃을 쓰는 것보다 더 좋은 방법이 있을까요?" 라는 질문이 있었습니다. "상대 레이아웃(RelativeLayout)을 사용한다." 가 이 문제의 좋은 해답이 될 수 있죠! 상대 레이아웃(RelativeLayout)을 사용할 경우 화면 위, 아래쪽에 뷰를 배치하고 싶다면, layout_alignParentBottom, layout_alignParentTop 속성 값을 true로 설정하는 것만으로도 충분히 가능합니다. 그러나 리니어 레이아웃(LinearLayout)을 사용한다면, 뷰들을 위에서부터 차곡차곡 쌓아야만 가장 아래쪽까지 배치할 수 있죠. 이렇게 효과적인 화면 구성을 위해서는 상황에 알맞은 레이아웃을 잘 골라 사용할 수 있는 안목이 필요하답니다!
상대 레이아웃 안에서 뷰들을 배치할 때는 같은 레이아웃 안에 들어있는 다른 뷰와의 상대적인 위치를 이용하게 됩니다. 역시 이와 관련된 다양한 속성들이 있는데요.
이 외에도 더 많은 속성들이 있으니 필요할 때 찾아서 사용하시면 된답니당 ㅎ.ㅎ 예를 들어 위 그림처럼 화면을 구성하고 싶다면, <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginStart="20dp" android:layout_marginTop="70dp" android:layout_marginEnd="20dp" android:text="A" android:textSize="30sp" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button" android:layout_alignEnd="@+id/button" android:layout_marginTop="100dp" android:text="B" android:textSize="30sp" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/button2" android:layout_marginEnd="50dp" android:layout_toStartOf="@+id/button2" android:text="C" android:textSize="30sp" /> </RelativeLayout>
이런 식으로 상대 레이아웃(RelativeLayout)의 다양한 속성들을 사용하면 되지 않을까 싶어요!
그렇다면 위, 아래에는 버튼 등의 뷰를 두고, 가운데의 뷰는 꽉 차게 만들고 싶다면 어떻게 해야 할까요? 먼저 상대 레이아웃(RelativeLayout)을 사용하여, 위쪽에 있는 뷰에는 layout_alignParentTop 속성과 android:layout_alignParentTop="true"
아래쪽에 있는 뷰에는 layout_alignParentBottom 속성 android:layout_alignParentBottom="true"
을 지정합니다. 그리고 가운데 뷰의 layout_height 속성 값을 match_parent로 지정하고, android:layout_height="match_parent"
layout_above와 layout_below 속성을 추가로 지정하면, android:layout_below="@+id/button_top" android:layout_above="@+id/button_bottom"
위, 아래의 뷰와 상관없이 가운데에 남아있는 공간이 뷰로 가득 채워진답니다! <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_top" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="TOP" android:textSize="25sp"/> <Button android:id="@+id/button_center" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/button_bottom" android:layout_below="@id/button_top" android:background="#2196F3" android:text="CENTER" android:textSize="25sp" /> <Button android:id="@+id/button_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="BOTTOM" android:textSize="25sp"/> </RelativeLayout>
생각해보기 1. 상대 레이아웃을 잘 사용할 수 있다면 다른 레이아웃은 필요 없는 걸까요? 상대적인 위치로 뷰들을 배치하고 싶은 것이 아닌, 단순히 같은 성격의 뷰들을 나열하고 싶은 경우라면 리니어 레이아웃(LinearLayout)이 훨씬 편리할 것이고, 화면의 전환이 필요한 경우라면 프레임 레이아웃(FrameLayout)을 써야 할 겁니다. 이렇게 상황이나 쓰임새에 맞는 레이아웃을 사용해야 효율적으로 화면을 구성할 수 있어요! 2. 리니어 레이아웃과 상대 레이아웃을 잘 조합해서 사용하는 방법을 생각해보세요. 전체적인 화면 구성을 봤을 때 위에서 아래로 각각의 뷰들이 쌓여있고 그 안에는 여러 개의 뷰를 상대적으로 배치해야하는 경우라면, 큰 틀을 리니어 레이아웃(LinearLayout) vertical로 잡은 뒤 그 안에 상대 레이아웃(RelativeLayout)을 넣는 방법이 굉장히 좋을 것 같네요! 3. 화면에 보이는 뷰들의 일부가 겹쳐있도록 만들 수도 있을까요?
뷰의 마진 값들을 조정하면, 겹쳐 보이게 만들 수 있습니다. 다음 포스팅에서는 프레임 레이아웃(FrameLayout)과 뷰의 전환에 대해 알아보도록 할게요!
|