1.LinearLayout - 1편
LinearLayout
가장 기초적인 Layout의 종류로 사용하기도 편리한 Layout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
위의 코드에서 <LiearLayout> ~~ </LinearLayout> 사이에 원하는 Widget이든, Layout이든 넣을 수 있다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
LinearLayout 사이에 TextView 하나와 Button 하나를 넣었다.
결과는 위와 같이 나온다. 가장 기본적인 Layout의
width(가로),height(세로)가 있다.
가로,세로의 속성 2가지를 먼저 보자면
1.match_parent => 화면의 전체 차지
(fill_parent와 같으나 deprecated 됬으므로 match를 쓰자)
2.wrap_content => 내용물 만큼 자리를 차지
위 LinearLayout에서 android:layout_width="match_parent,
android:layout_hight="match_parent
가로 세로 둘다 match로 적용 시켰으므로
위와같이 화면 전체를 쓰겠다는 의미이다.
코드에서 TextView에 아무 Text도 입력시키지
않아 화면에서는 없는것처럼 보인다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Hi"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
이번에는 LinearLayout의 android:layout_height를
wrap_content으로 바꿧더니 차지하는 영역이
확 줄어들었다. TextView와 Button이
차지하는만큼 맞춰서 공간확보를 한다.
그리고 TextView에 "Hi"를 넣었더니
TextView도 보이기 시작했다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Hi"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Hi"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
이번에는 android:orientation이라는걸 넣었다.
말 그대로 방향이란 뜻이다. 2가지 속성을 보자
1.vertical : 말그대로 수직, 세로의 뜻이다. 아래로 쫙 뿌려준다
2.horizontal : 말그대로 수평, 가로의 뜻이다. 옆으로 쫙 뿌려준다
위의 코드에서 vertical로 설정했기 때문에
TextView 다음 Button이 바로옆에 생성되는 것이 아니라
아래에서 생성된다. horizontal로 하면 옆에 생성된다.
다음 TextView와 Button에 공통적으로 gravity가 들어가있다.
하나는 layout_gravity, 하나는 gravity
똑같이 gravity가 들어가있는것들 center(중앙)으로 설정했는데
TextView만 중앙에서 생성되있다.
이것도 그냥 말그대로 이해하면 쉬운데 클릭을 해보면
Hi가 써있는 TextView의 layout_width는 wrap_content이다
그러므로 클릭했을때 Hi라는 글씨만큼 쪼그마하게 차지하는걸 알 수 있다.
그냥 gravity는 저 조그마한 공간안에서 정렬을 시키는것이므로
gravity="center" 해봐야 의미가 없다
여기서 전체 LinearLayout의 layout_width는 match이다
layout_gravity는 layout(TextView)을 정렬시키는 것이다.
orientation을 vertical로 주었기때문에
맨 위에 한줄은 TextView만의 공간이다.
그 전체공간에서 TextView를 center로 정렬시키는 것이다.
말로 쓰자니 어렵다.. 몇가지 바꿔가면서 정렬을 시켜보자면..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Hi"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="Hi"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Hi"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="Hi"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Hi"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="Hi"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Layout 기준으로 정렬을 시킬것인가 안에 내용물 기준으로 정렬을 시킬것인가 생각해서 잘 배치시키면 된다.
'안드로이드(android) > 레이아웃(Layout)' 카테고리의 다른 글
동적레이아웃(DynamicLayout) - Margin, Padding (0) | 2016.10.10 |
---|---|
동적레이아웃(DynamicLayout) - Orientation (0) | 2016.10.10 |
동적레이아웃(DynamicLayout) - width, height (2) | 2016.10.09 |
레이아웃(Layout)을 동적으로 생성 해보자(1) (0) | 2016.05.18 |
RelativeLayout 기본 (1) | 2016.04.13 |