Transcript layout

I
F
A
A
B
H
E
A
android:layout_centerInParent
A
A
D C
android:layout_centerHorizontal
A
android:layout_centerVertical
A
A
G
android:layout_alignParentLeft
A
A
B
android:layout_toLeftOf
A B
android:layout_alignTop
B
android:layout_toRightOf
A B
android:layout_alignBottom
A
B
android:layout_above
android:layout_alignParentRight
A
B
android:layout_below
A
A
B
B
android:layout_alignLef
android:layout_alignRight
android:layout_alignParentTop
android:layout_alignParentBottom
w
w
android:layout_centerInParent
android:layout_centerHorizontal
w
Parent
W
Widget
w
android:layout_centerVertical
w
android:layout_alignParentLeft
w
w
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
A
A
B
android:layout_toLeftOf
Parent
A
B
A
Base Widget
Widget
B
android:layout_below
B
android:layout_toRightOf
A B
android:layout_alignTop
A
A
B
B
android:layout_alignLef
android:layout_alignRight
A
B
android:layout_above
A B
android:layout_alignBottom
A
B
<RelativeLayout>
<B android:id=“@+id/b”/>
<A layout_above=“@id/b”/>
</ReleativeLayout>
Layout - RelativeLayout
• RelativeLayout은 위젯과 부모와의 관계 또는 위젯간의 관계를 지정
함으로써 뷰를 배치하는 레이아웃이다.
• RelativeLayout 의 계층도
Java.lang.Object
Android.view.View
Android.view.ViewGroup
Android.widget.RelativeLayout
XML Attributes
Attributes Name
Description
android:layout_above
~의 위에 배치한다.
android:layout_alignBaseline
~와 베이스 라인을 맞춘다.
android:layout_alignBottom
~와 아래쪽 변을 맞춘다.
android:layout_alignLef
~와 왼쪽 변을 맞춘다.
android:layout_alignParentBottom
true이면 부모와 아래쪽 변을 맞춘다.
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignRight
android:layout_alignTop
true이면 부모와 왼쪽 변을 맞춘다.
true이면 부모와 오른쪽 변을 맞춘다.
true이면 부모와 위쪽 변을 맞춘다
~와 오른쪽 변을 맞춘다
~와 위쪽 변을 맞춘다.
android:layout_alignWithParentIfMissing
layout_toLeftOf 등의 속성에 대해 앵커가 발견되지 않으면
부모를 앵커로 사용한다.
android:layout_below
~의 아래에 배치한다.
android:layout_centerHorizontal
true이면 부모와 수평 중앙에 배치한다.
android:layout_centerInParent
true이면 부모의 수평, 수직 중앙에 배치한다.
android:layout_centerVertical
true이면 부모와 수직 중앙에 배치한다.
android:layout_toLeftOf
~의 왼쪽에 배치한다.
android:layout_toRightOf
~의 오른쪽에 배치한다.
XML Attributes
RelativeLayout 안의 Content 배치 예
w
w
Parent
W
Widget
w
android:layout_centerInParent
w
android:layout_centerHorizontal
w
android:layout_centerVertical
w
w
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
 위의 Attributes의 값은 true, false 둘 중 하나의 값을 사용해야 한다.
XML Attributes
RelativeLayout 안의 Widget 간의 배치 예
A
A
B
Parent
B
A
Base Widget
android:layout_toLeftOf
A B
B
android:layout_toRightOf
A B
A
B
android:layout_above
A
B
android:layout_below
A
A
B
B
Widget
android:layout_alignTop
android:layout_alignBottom
android:layout_alignLef
android:layout_alignRight
 위의 Attributes 의 속성 값은 Resource ID의 값을 사용해야 한다.
XML Attributes
RelativeLayout 기타 Attributes 예
A B
android:layout_alignBaseline 은 글자의 밑줄에 맞춰 정렬
한다.
Parent
android:layout_alignBaseline
B
A
Base Widget
Widget
<RelativeLayout>
<B android:id=“@+id/b”/>
A
A
B
android:layout_alignWithParentIfMissing
<A
layout_toLeftOf=“@id/b”
layout_alignWidthParentIfMissing=“true”/>
</ReleativeLayout>
RelativeLayout
리소스 컴파일러는 빠른 배치를 위해 위젯 간의 관
계를 한 번에 읽는다. 따라서 특정 뷰가 다른 뷰의
위치에 종속적일 때 기준이 되는 뷰를 먼저 정의 한
다.
<RelativeLayout>
<B android:id=“@+id/b”/>
A
<A layout_above=“@id/b”/>
</ReleativeLayout>
B
A
RelativeLayout 을 사용하여 위젯을 정렬 할 경우 위
젯의 기준은 항상 Parent 의 (0, 0) 부터 시작을 한다.
B
AB
<A android:layout_toLeftOf=“@id/b”/><A android:layout_toLeftOf=“@id/b”
android:layout_alignTop=“@id/b” />
RelativeLayout 예제
I
B
H
F
E
A
D C
G
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout mlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent”>
<TextView
android:id="@+id/texta"
android:layout_width="100px"
android:layout_height="100px"
android:text="A"
android:layout_centerInParent="true"
android:background="#ff00ff00"
android:textColor="#ff000000” />
<TextView
android:id="@+id/textb"
android:layout_width="50px"
android:layout_height="50px"
android:layout_above="@id/texta"
android:layout_alignLeft="@id/texta"
android:text="B"
android:background="#ffff0000"
android:textColor="#ff000000” />
<TextView
android:id="@+id/textc"
android:layout_width="50px"
android:layout_height="50px"
android:layout_below="@id/texta"
android:layout_alignRight="@id/texta"
android:text="C"
android:background="#ff0000ff"
android:textColor="#ff000000” />
<TextView
android:id="@+id/textd"
android:layout_width="50px"
android:layout_height="50px"
android:layout_toLeftOf="@id/textc"
android:layout_alignTop="@id/textc"
android:text="D"
android:background="#ff00ffff"
android:textColor="#ff000000”/>
<TextView
android:id="@+id/texte"
android:layout_width="50px"
android:layout_height="50px"
android:layout_toRightOf="@id/textb"
android:layout_alignBottom="@id/textb"
android:text="E"
android:background="#ffffff00"
android:textColor="#ff000000” />
<TextView
android:id="@+id/textf"
android:layout_width="50px"
android:layout_height="50px"
android:text="F"
android:layout_alignParentRight="true"
android:background="#ff00ff00"
android:textColor="#ff000000” />
<TextView
android:id="@+id/textg"
android:layout_width="50px"
android:layout_height="50px"
android:text="G"
android:layout_alignParentBottom="true"
android:background="#ff00ff00"
android:textColor="#ff000000” />
<TextView
android:id="@+id/texth"
android:layout_width="50px"
android:layout_height="50px"
android:text="H"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#ff00ff00"
android:textColor="#ff000000” />
<TextView
android:id="@+id/texti"
android:layout_width="50px"
android:layout_height="50px"
android:text="I"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#ff00ff00"
android:textColor="#ff000000” />
</RelativeLayout>
Layout - TableLayout
• TableLayout 은 표 형식으로 차일드를 배치하는 레이아웃이다.
• TableRow 객체로 구성되며 TableRow 객체 하나가 곧 행이다.
TableRow안에는 임의 개수의 열이 배치되는데 행 안의 열 하나를
셀이라고 부르며 셀 당 차일드 뷰 하나씩 들어간다.
• TableRow 객체의 높이는 항상 wrap_content로 강제된다.
셀에 배치되는 자식 뷰의 layout_width 는 fill_parent로 가정된다.
• TableLayout 의 계층도