작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/rbfks1221/221794023074
2)작성날짜: 20/02/02
2) 리니어 레이아웃 (LinearLayout) 들어가기 전에
리니어 레이아웃을 사용하면 상자를 쌓는 것처럼 화면 레이아웃을 만들 수 있습니다. 리니어 레이아웃이 어떤 것인지 알아보고 어떻게 사용할 수 있을지 생각해봅시다. 학습 목표 1) 리니어 레이아웃이 어떤 것인지 이해하고 간단한 몇 개의 뷰를 추가해봅시다. 2) 리니어 레이아웃 안에 넣은 뷰에 추가할 수 있는 대표적인 속성들이 어떻게 적용되는지 설명해봅시다. 핵심 단어 · 리니어 레이아웃 (LinearLayout) · 방향 속성 (orientation) · 마진과 패딩 속성 (layout_margin & padding) · 공간분할 속성 (layout_weight) 학습하기
먼저, 제약 레이아웃(ConstraintLayout)으로 되어있는 최상위 레이아웃을 리니어 레이아웃(LinearLayout)으로 바꿔보도록 할게요! Design 탭에서 Text 탭으로 변경한 후, 가장 바깥에 있는 ConstraintLaout 태그를 <androidx.constraintlayout.widget.ConstraintLayout ... ...> </androidx.constraintlayout.widget.ConstraintLayout>
LinearLayout 태그로 바꿔 줍니다. <LinearLayout ... ...> </LinearLayout>
※ 대소문자 구분이나 공백에 유의해서 바꿔주세요! ※
태그를 제약 레이아웃에서 리니어 레이아웃으로 바꾸었다면, 태그 안에는 아래의 속성들이 추가되어 있을거에요. xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
여기서 xmlns라는 지시자가 보이는데요. 바로 XML name space의 약자입니다! xmlns는 XML 요소들의 이름 충돌을 피하기 위해 사용합니다. android, app, tools 라는 이름으로 큰따옴표 안의 URL에 있는 속성들을 사용하겠다는 의미이죠!
보통 xmlns 지시자는 최상위 태그 안에 넣어두고, 아래와 같이 android: / app: / tools: 등의 접두어를 붙여 속성들을 사용합니다. android:layout_width="match_parent"
- 우리에게 필요한 것은 안드로이드에서 제공하는 기본 속성들이니, xmlns:android="http://schemas.android.com/apk/res/android"
이를 제외한 나머지 xmlns 속성들은 먼저 삭제를 해줄게요.
이제 리니어 레이아웃(LinearLayout)의 필수 속성들을 넣어 주겠습니다. 첫 번째! 어떤 뷰이든 뷰의 가로 크기와 세로 크기를 지정하는 layout_width(가로)와 layout_height(세로) 속성은 필수입니다. android:layout_width="match_parent" android:layout_height="match_parent"
두 번째! 리니어 레이아웃(LinearLayout)은 뷰들을 어떤 방향으로 쌓을 건지를 결정해주어야 합니다. 방향(orientation) 속성이 필수적이라는 의미이죠! 방향(orientation) 속성을 넣지 않으면, 기본적인 default 값으로 horizontal 을 사용합니다. 그러나 이 방향 속성을 정확하게 명시하지 않으면 나중에 문제가 발생할 수 있어요. 따라서 뷰들을 오른쪽 방향(가로)으로 쌓고 싶다면, android:orientation="horizontal"
아래쪽 방향(세로)으로 쌓고 싶다면, android:orientation="vertical"
속성을 LinearLayout 태그 안에 넣어주세요! - 위의 속성들을 모두 추가해 주었다면, <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> </LinearLayout>
xml 파일은 이런 형태로 완성됩니다.
뷰를 정렬할 때는 layout_gravity 속성과 gravity 속성이 사용됩니다. gravity는 지구의 '중력'처럼 끌어당기는 힘을 의미한다고 생각하면 이해하기 쉽습니다. 뷰들은 레이아웃 속 자신의 여유 공간 안에서 원하는 대로 배치가 가능한데요. 이때 사용하는 것이 layout_gravity 속성입니다. - 그렇다면 gravity 속성은 무엇일까요? gravity 속성은 뷰 안에 들어있는 콘텐츠(내용물)를 정렬할 때 사용합니다. 정리해보면, (1) 레이아웃 안에서 뷰를 정렬할 때는 layout_gravity를 사용한다. (2) 뷰 내부의 콘텐츠(내용물)를 정렬할 때는 gravity를 사용한다. (3) layout_gravity, gravity 속성 모두 여유 공간을 필요로 한다. 이 세 가지는 기억해 두었다가, 필요한 정렬 속성들을 적절히 사용하시면 될 것 같아요!
지난 포스팅에서 뷰의 영역에 대해 잠깐 언급을 했었는데요. - - 이번에는 어떻게 뷰에 마진(Margin)과 패딩(Padding)을 주는지에 대해 알아보도록 하겠습니다. 먼저, 뷰에 마진(Margin)을 주도록 할게요! 이렇게 layout_margin이라는 속성을 찾아 값을 할당하면 됩니다. layout_margin 속성은 상, 하, 좌, 우 모두 같은 마진 값을 줄 때 사용되고, 각각 다른 값을 주고 싶다면 layout_marginTop, layout_marginLeft와 같이 원하는 위치에 해당하는 속성을 찾아 사용하면 된답니다! - 그렇다면 뷰에 패딩(Padding) 값은 어떻게 줄 수 있을까요? padding 속성을 찾아 값을 할당하면 됩니다. 마진(Margin)과 마찬가지로 상, 하, 좌, 우 모두 같은 값의 패딩(Padding)을 주고 싶다면 padding 속성을 이용하고, 원하는 위치에만 패딩(Padding)을 주고 싶다면 paddingRight, paddingBottom과 같은 하위 속성을 사용하면 되겠죠?
layout_weight는 남아있는 공간을 분할하는 역할을 하는 속성입니다. 예를 들어, 두 개의 버튼이 있다면 두 버튼이 같은 크기의 공간을 차지하도록 만들고 싶을 때 사용하는 속성이죠. layout_weight를 사용할 때 주의할 점이 있습니다. 바로 남은 공간을 분할하기 때문에 뷰가 추가된 방향에 따라 가로 혹은 세로 크기를 0dp로 만들어 주어야 한다는 것인데요! <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:text="Button" /> </LinearLayout>
위와 같이 두 버튼의 너비를 가로 1:2 비율로 할당하고 싶다면, 두 버튼의 layout_width(가로) 속성을 0dp로 만들어주는 것이 필요합니다. 반대로 두 버튼의 높이를 세로 1:2 비율로 할당하고 싶다면, 두 버튼의 layout_height(세로) 속성을 0dp로 만들어주어야겠죠? 생각해보기 1. 리니어 레이아웃 안에 리니어 레이아웃을 포함시키면 어떤 화면이든 다 만들 수 있는 걸까요? 지난 강의(대표적인 레이아웃 살펴보기)의 생각해보기 문제와 겹치네요! gravity 속성이나 weight 속성 등을 잘 활용한다면 비효율적이더라도 원하는 화면의 대부분은 만들 수 있을 것입니다. 그러나 기기들은 다양한 해상도를 가지고 있다는 것을 고려하여 화면을 구성해야 할 것입니다. 그리고 리니어 레이아웃으로 뷰를 중첩시키는 것은 불가능합니다. 2. 화면의 위, 아래 끝에 작은 뷰를 배치하고 싶다면 리니어 레이아웃을 쓰는 것보다 더 좋은 방법이 있을까요? 리니어 레이아웃(LinearLayout)은 뷰가 방향 속성에 따라 차곡차곡 쌓이는 것이 특징이라고 볼 수 있죠. 가운데에 올 뷰에 상관없이 화면의 위, 아래에 뷰를 배치하고 싶다면, 리니어 레이아웃(LinearLayout)보다는 제약 레이아웃(ConstraintLayout)이나 상대 레이아웃(RelativeLayout)을 사용하는 것이 더 적절할 것 같습니다. 다음 포스팅에서는 상대 레이아웃(RelativeLayout)에 대해 알아보도록 하겠습니다!
|