중첩 리니어레이아웃(LinearLayout) 설정하기
안드로이드 레이아웃 중에서 가장 많이 사용하는 레이아웃이 바로
"리니어 레이아웃"입니다.
리니어 레이아웃은 왼쪽 위부터 아래쪽으로 또는 오른쪽으로 배치하는 레이아웃입니다.
레이아웃을 만들다보면 화면 분할을 하는 경우가 있는데
이때 중첩리니어 레이아웃을 설정해주면 됩니다.
<LinearLayout>
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
</LinearLayout>
간단하게 위와 같은 방법으로 중첩해서 레이아웃을 만들 수 있습니다.
------------------------------------------------------------------------------------------------------------------
** 리니어 레이아웃을 이용할 때 필요한 속성
- layout_weight : 레이아웃이 전체화면에서 차지하는 비율을 설정
- orientation : 레이아웃 안에 위젯을 수직 또는 수평방향으로 설정
------------------------------------------------------------------------------------------------------------------
**activity_main.xml의 코딩
어플에 표시되는 레이아웃만 설정하기 때문에 MainActivity.java는 수정할 필요가 없습니다.
LinearLayout이 많이 중복이 되어 헷갈릴 수 있습니다.
layout_weight의 경우 설정값을 "1"로 하였습니다.
이 의미는 "1:1 비율로 설정하겠다" 입니다.
아래 실행결과를 보시면 빨강 레이아웃과 파랑 레이아웃의 비율은 1:1로 설정되어 있습니다.
그리고 다시 빨강과 노랑의 비율을 1:1로 설정하고 다시 노랑과 검정의 비율을 1:1로 설정하였습니다.
1:1 - 같은 비율로 화면을 나누어 사용한다
------------------------------------------------------------------------------------------------------------------
** 만약 레이아웃의 비율을 수정하고 싶다면 수직의 경우는 layout_height="0dp"로 설정한 후(수평의 경우 layout_weight="0dp")
layout_weight의 비율을 원하는 만큼 변경하면 됩니다.
- 노랑 1, 검정 2의 비율로 설정하였을 때
------------------------------------------------------------------------------------------------------------------
*** layout_weight를 설정하지 않고 레이아웃의 폭과 높이를 "match_parent"로 설정하면 모든 레이아웃이 전체화면으로 설정되어
레이아웃 분할이 되지 않고 겹쳐서 가장 위에 레이아웃 밖에 보이지 않는다
(layout_weight를 설정하지 않았다면 layout_width, layout_height 둘 중 하나는 wrap_content로 설정해주어야 한다.)
도움되셨다면 공감 버튼 꾹 눌러주세요
오늘도 좋은 하루 되세요~
블로그 개설 후 첫 게시물!
LinearLayout 에 대해 적어보려고 합니다.
LinearLayout : 선형 레이아웃
참고 사이트 : developer.android.com/guide/topics/ui/layout/linear?hl=ko
선형 레이아웃 | Android 개발자 | Android Developers
LinearLayout은 세로 또는 가로의 단일 방향으로 모든 하위 요소를 정렬하는 뷰 그룹입니다. LinearLayout이 서로 스택된 상태에서 레이아웃 방향을 지정할 수 있기 때문에, 세로 목록에는 행 하나당 하
developer.android.com
1. 방향 정하기
안드로이드 개발자 가이드 설명을 참고하면 다음과 같이 설명해놓았습니다.
LinearLayout은 세로 또는 가로의 단일 방향으로 모든 하위 요소를 정렬하는 뷰 그룹입니다.
android:orientation 특성을 사용하여 레이아웃 방향을 지정할 수 있습니다.
즉, 뷰(위젯)를 가로 또는 세로 방향으로 순서대로 나열하여 놓을 수 있는 레이아웃을 말합니다.
orientation은 '방향' 이라는 뜻을 가지고 있습니다. 따라서 android:orientation 속성을 이용해서
뷰를 가로로 정렬할 것인지, 세로로 정렬할 것인지 지정할 수 있습니다.
orientation의 default 값은 horizontal 입니다.
- android:orientation = "horizontal" LinearLayout 안에서 뷰를 가로 방향으로 정렬
- android:orientation = "vertical" LinearLayout 안에서 뷰를 세로 방향으로 정렬
xml 코드로 작성해보겠습니다.
상위 레이아웃의 orientation 속성을 변경해주면 됩니다.
결과는 아래 이미지를 참고하세요.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="//schemas.android.com/apk/res/android" xmlns:app="//schemas.android.com/apk/res-auto" xmlns:tools="//schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="horizontal"> <!-- horizontal 또는 vertical 로 지정해줍니다 --> <Button android:id="@+id/Btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1"/> <Button android:id="@+id/Btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2"/> <Button android:id="@+id/Btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3"/> </LinearLayout>2. 가중치(비율) 정하기
1번에서 방향에 대해 알아보았으니 이제 크기에 대해 알아봅시당.
LinearLayout은 각각의 하위요소가 화면에서 어느 정도 공간을 차지할 지 설정할 수 있습니다.
android:layout_weight 속성을 이용하여 하위요소의 가중치를 설정할 수 있습니다.
가중치를 통해 해당 뷰가 화면에서 어느 정도의 공간을 차지해야 하는지 중요도를 설정합니다.
쉽게 말하면 이 버튼이 화면에서 얼마나 크게 나와야하는지 정하는 것을 말합니다.
● 동일한 크기의 버튼 만들기
각각의 하위요소가 화면에서 동일한 크기의 공간을 차지하도록 설정해보겠습니다.
이때 주의할 점은, 상위 LinearLayout 의 orientation 속성에 따라 너비 또는 높이 값 중 하나는 0dp 로 설정해야 합니다.
각각의 버튼이 android:layout_weight="1" 속성으로 인해 같은 가중치를 가지게 되어 동일한 크기를 가지게 됩니다.
(만약 1이 아닌 다른 숫자를 주게 된다면 그에 해당하는 가중치만큼 크기가 할당 됩니다.)
- 너비(가로)를 기준으로 같은 크기로 나눌 때 android:layout_width="0dp"
- 높이(세로)를 기준으로 같은 크기로 나눌 때 android:layout_height="0dp"
- android:layout_weight="1"
● 임의로 크기 정하기
android:weightSum 속성을 이용하면 좀 더 다양하게 뷰의 크기를 지정할 수 있습니다.
부모 LinearLayout에서 android:weightSum 속성을, 하위 뷰에서 android:layout_weight 속성을 부여하여 사용합니다.
예를 들어, LinearLayout에서 weightSum 값을 100으로 줬다면, 해당 레이아웃을 100칸으로 쪼개는 것을 의미합니다.
그리고 하위의 버튼의 weight값을 24로 지정하면, 해당 버튼은 100칸 중 24칸 만큼의 크기를 차지하게 됩니다.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="//schemas.android.com/apk/res/android" xmlns:app="//schemas.android.com/apk/res-auto" xmlns:tools="//schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical" android:weightSum="100"> <Button android:id="@+id/Btn1" android:text="Button1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="15"/> <Button android:id="@+id/Btn2" android:text="Button2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="27"/> <Button android:id="@+id/Btn3" android:text="Button3" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="8"/> <Button android:id="@+id/Btn4" android:text="Button4" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50"/> </LinearLayout>weight만을 이용해 크기를 지정할 때와, weightSum을 이용할 때의 차이점을 아시겠나요? 정리하자면,
- android:layout_weight 속성만을 사용할 경우, 해당 레이아웃 내에서 각 뷰끼리 비율을 따져 크기를 지정하는 방식
- android:weightSum 값만큼 해당 레이아웃을 분할하여 하위 뷰의 크기를 지정해주는 방식
둘 중 어느 것이든 편한 것으로 사용하시면 됩니다.
3. 연습하기
LinearLayout 안에 LinearLayout을 반복 배치하여 아래와 같은 형태로 화면을 구현해보겠습니다.
제가 처음 LinearLayout을 사용할 때 연습했던 화면입니다 ^^;
레이아웃을 구분하기 위해서 android:background 속성을 이용해 배경색을 지정해주었습니다.