[0] Layout (Linear, Frame, Relative)

1. Layout

(1) Linear Layout

 화면 내에서 오브젝트들을 가로(horizontal) 또는 세로(vertical) 방향으로 차례로 배치 하는 방식.

android:orientation="vertical" or "horizontal" 를 반드시 선언해 주어야 한다.

wrap_content : 뷰에 들어 있는 내용물의 크기에 따라 뷰의 크기가 결정.

match_parent : 뷰에 남아 있는 여우 공간을 모두 채움(fill_layout).

Sample Source

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_linear" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.ssh.user.firstapp.LinearActivity" android:orientation="vertical"> <!-- LinearLayout을 만들 경우 방향성을 정해주기 위해 android:orientation="방향" 를 정의 해줘야 한다. --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Text View 01" android:textSize="30dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Text View 02" android:textSize="30dp"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="나는 버튼"/> <SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" /> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="radio1"/> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="radio2"/> </RadioGroup> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RatingBar android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

(2) Frame Layout

 중첩된 뷰를 구현 할 때 사용.

마지마지막에 정의한 내용이 가장 앞에 배치된다.

margin :  뷰 외부에 여백을 준다.

padding :  뷰 내부에 여백을 준다.

Sample Source

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="15dp" android:padding="15dp" tools:context="com.ssh.user.firstapp.FrameActivity"> <!-- dp : device independent pixel 안드로이드는 다양한 해상도를 고려하여 px이나 pt단위등을 사용하는 대신 dp를 사용한다.--> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#ff0000" /> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#00ff00" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="text" android:textSize="30dp" android:paddingTop="10dp" /> <TextView android:layout_width="200dp" android:layout_height="200dp" android:background="#000000" android:text="text" android:textSize="50dp" android:textColor="#ffffff" android:gravity="center" android:layout_gravity="right|bottom" /> <TextView android:layout_width="200dp" android:layout_height="200dp" android:background="#0000ff" android:layout_gravity="center" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#ffff00" android:layout_gravity="center" /> </FrameLayout>

속성	설명
gravity	뷰 안쪽을 정렬하는 옵션
layout_gravity	부모 뷰에서 자신이 정렬되는 옵션

(3) Relative Layout

 최상위 부모 레이아웃의 상대 위치 또는 id를 기준으로 뷰에 대한 상대적 위치로 배치 하는 방식.

따로 위치를 지정 하지 않으면 왼쪽 상단에 쌓이게 된다.

@+id/url : id를 새로 만들 경우

@id/url : id를 사용할 경우

Sample Source

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_relative" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.ssh.user.firstapp.RelativeActivity"> <TextView android:id="@+id/url" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="URL : " android:textSize="30dp"/> <EditText android:id="@+id/edit" android:inputType="text|textPassword" android:hint="input text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:layout_toRightOf="@id/url" android:layout_alignBottom="@id/url" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="btn" android:layout_below="@id/edit" android:layout_alignRight="@id/edit"/> <TextView android:layout_width="150dp" android:layout_height="150dp" android:background="#000" android:layout_centerInParent="true"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="test button" android:layout_alignParentBottom="true"/> </RelativeLayout>

속성	설명
layout_alignParentTop	부모 컨테이너의 위쪽과 뷰의 위쪽을 맞춤
layout_alignParentBottom	부모 컨터이너의 아래쪽과 뷰의 아래쪽을 맞춤
layout_alignParentLeft	부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤
layout_alignParentRight	부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤
layout_centerHorizontal	부모 컨테이너의 수평 방향 중앙에 배치
layout_centerVertival	부모 컨테이너의 수직 방향 중앙에 배치
layout_centerInParent	부모 컨테이너의 수평과 수직 방향 중앙에 배치

속성	설명
layout_above	지정한 뷰(id)의 위쪽에 배치
layout_below	지정한 뷰(id)의 아래쪽에 배치
layout_toLeftOf	지정한 뷰(id)의 왼쪽에 배치
layout_RightOf	지정한 뷰(id)의 오른쪽에 배치
layout_alignTop	지정한 뷰(id)의 위쪽선에 맞추어 배치
layout_alignBottom	지정한 뷰(id)의 아래쪽선에 맞추어 배치
layout_alignLeft	지정한 뷰(id)의 왼쪽선에 맞추어 배치
layout_alignRight	지정한 뷰(id)의 오른쪽선에 맞추어 배치