[안드로이드] 리니어 레이아웃(Linear Layout)

※ 저는 안드로이드 프로그래밍 정복(김상형 著, 한빛미디어) 책을 이용해 공부하고 있으며

예제와 코드는 이 책을 통해 공부중임을 밝힙니다.

개인적인 공부를 하면서 정리한 형식이기 때문에 심각한 오류가 있을 수 있습니다. 피드백 주시면 정말 감사하겠습니다.

설명에 앞서 기본적인 용어 정리를 할 것이다.

뷰(View)

화면에 보이는 모든 것들. 버튼, 텍스트, 이미지 모두 해당된다. 

위 사진에서 빨간 네모칸 친 것들이 모두 뷰라고 할 수 있다.

이러한 뷰들이 모여 액티비티(Activity)를 구성하고, 액티비티들이 모여 하나의 응용 프로그램(Application)이 된다.

이러한 뷰는 크게 두 가지로 나뉜다. 위젯(Widget)과 뷰그룹(View Group)

위젯(Widget, 작은 장치) 

직접적으로 보이며, 사용자 인터페이스를 구성한다. 

버튼, 텍스트 뷰, 에디트, 라디오 버튼 등이 위젯에 해당되며 컨트롤이라고도 한다. 

사용자에게 정보를 보여주고 명령을 입력받는 역할을 한다.

→ TextView (Button, CheckBox, RadioButton), ImageView(ImageButton) 등이 있다.

뷰그룹(View Group)

직접적으로 보이지 않으며 다른 뷰를 담는 컨테이너 역할을 한다. 

관련된 여러 개의 뷰를 유기적으로 모아 놓은 뷰의 집합이며 이 부류의 클래스를 레이아웃이라고 한다. 

→ FrameLayout, RelativeLayout, LinearLayout 등이 있다.

그렇다면 레이아웃(Layout)은 무엇인가? 뷰그룹(ViewGorup)에서 파생되는 클래스로서

뷰(View)들을 담는 껍데기(컨테이너)라고 생각하면 쉽다.

리니어 레이아웃(Linear Layout)

차일드 뷰를 한쪽 방향으로만 배치할 수 있는 레이아웃이다. 

별도의 지정이 없는 한, 뷰 사이의 공백은 없다.

빈틈없이 순서대로 차일드를 배치하는 것이 리이너의 가장 핵심적인 특징이다.

반드시 android:orientation을 수직이던 수평이던 설정해줘야 함 !

리니어의 가장 중요한 속성은 뷰의 배치 방향을 결정하는 orientation이다.

뷰를 수평으로 배치하고 싶다면 horizontal / 수직으로 배치하고 싶다면 vertical로 설정해주면 된다.

orientation을 vertical(수직)으로 설정한 모습

width와 height를 wrap_content로 설정해주어야 텍스트가 모두 출력된다.

뷰 안에는 내용물(content)가 존재하게 된다.

텍스트 뷰(Text View) 안에는 문자열, 이미지 뷰(Image View)안에는 그래픽 이미지, 레이아웃에는 차일드 뷰(Child View)라는 내용물이 담긴다.

이 내용물을 "뷰의 어느 부분에 배치할 것인가"는 gravity 속성으로 지정한다. 아래 예제를 살펴보도록 하자.

gravity 속성을 주지 않았을 때

gravity 속성에 "값"을 주도록 하자. | 라는 연산자는 shift를 누르고 키보드에 원화(\) 버튼을 눌러주면 된다.

<다양한 gravity 속성 값들>

gravity 속성을 top|right로 주었을 때

gravity 속성 값을 center로 주었을 때

gravity 속성 값을 bottom|center_horizontal로 주었을 때

차일드 영역의 분할

layout_weight 속성은 부모 레이아웃의 남은 영역을 얼마나 차지할 것인가를 결정하는 비율값이다.

바로 예제를 살펴보면, 쉽게 이해할 수 있을 것이다.

리니어 레이아웃의 Orientation(방향) : 수평(horizontal)

각각의 중요도를 1:3:1을 준 상황

※ layout_height를 match_parent (부모의 폭 만큼 차지)로 설정해야 한다.

리니어 레이아웃의 orientation(방향) : 수직(vertical)

중요도는 위 예제처럼 1:3:1로 준 상황

layout_height : 0px로 설정해야 하고

layout_width : match_parent(부모의 폭만큼 차지)

마진과 패딩(Margin and Padding)

패딩(padding) : 뷰와 내용물간의 간격

마진(margin) : 뷰와 부모와의 간격

간단한 예제를 통해 살펴보도록 한다.

여기서 주목할 점은 LInearLayout이 중첩되어 있다는 것이다.

파란색 네모칸에서 Button을 수식하는 레이아웃이 적용되어 있다.

명사를 수식하는 형용사라고 생각하면 되나? 알아갈수록 재밌다.

현재 Button에는 마진과 패딩이 적용되어 있지 않다는 점.

layout_margin을 30dip로 설정한 결과

부모와 뷰의 간격이 벌어져서 보기에 좀 편안하고, 터치도 용이하다.

이번에는 패딩에 값을 줘보자.

android_layout_padding이 아니라 android:padding인 점.