03-2. 레이아웃

※ RelativeLayout

위젯들 사이의 관계를 이용한 레이아웃 배치

사진출처 : 서울위즈 앱 창업자를 위한 안드로이드 실무 동영상

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     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.example.androidex2.MainActivity" >     <TextView         android:id="@+id/tv_center"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginLeft="20px"         android:layout_marginTop="20px"         android:textSize="50px"         android:textStyle="bold|italic"         android:background="#00ff00"         android:text="Center" />      <TextView         android:id="@+id/tv_right"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignBaseline="@+id/tv_center"         android:layout_toRightOf="@+id/tv_center"         android:textSize="20px"         android:textStyle="bold"         android:background="#FF0000"         android:text="Right" />           <TextView         android:id="@+id/tv_parent_right"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentRight="true"         android:layout_below="@id/tv_center"         android:textSize="40px"         android:textStyle="bold"         android:background="#00ff00"         android:text="ParentRight" />           <TextView         android:id="@+id/tv_LEFT"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_toLeftOf="@+id/tv_parent_right"         android:layout_alignBaseline="@+id/tv_parent_right"         android:textSize="16px"         android:textStyle="bold"         android:background="#00ffff"         android:text="Left" /> </RelativeLayout>

android:layout_below="@id/tv_center"  - id 값의 요소보다 아래배치 하겠다. android:layout_alignParentRight="true"  - 부모의 오른쪽 부분으로 붙이겠다. android:layout_alignBaseline="@+id/tv_center"  - id 값의 요소와 베이스라인을 맞추겠다.

※ FrameLayout

뷰를 쌓아 올리는 방식

사진출처 : 서울위즈 앱 창업자를 위한 안드로이드 실무 동영상

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     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.example.androidex2.MainActivity" >     <Button         android:id="@+id/button1"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#ff0000"         android:text="Button" />     <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:background="#00ff00"         android:text="Button" />     <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"          android:background="#0000ff"         android:text="Button" />           <Button         android:id="@+id/button4"         android:layout_width="200px"         android:layout_height="200px"         android:layout_marginLeft="20px"         android:layout_marginTop="20px"         android:background="#ff00ff"         android:text="Button" />         </FrameLayout>

※ TableLayout

표형식의 레이아웃

사진출처 : 서울위즈 앱 창업자를 위한 안드로이드 실무 동영상

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="wrap_content"     tools:context="com.example.androidex2.MainActivity" >     <TableRow>         <TextView             android:id="@+id/textView1"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="20px"             android:text="요소1" />         <TextView             android:id="@+id/textView2"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background ="#ff00ff"             android:padding="20px"             android:text="요소2" />         <TextView             android:id="@+id/textView3"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="20px"             android:text="요소3" />         <TextView             android:id="@+id/textView4"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background ="#ff00ff"             android:padding="20px"             android:text="요소4" />     </TableRow>           <TableRow>         <TextView             android:id="@+id/textView5"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background ="#ff00ff"             android:padding="20px"             android:text="요소5" />                 <TextView             android:id="@+id/textView6"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="20px"             android:text="요소6" />         <TextView             android:id="@+id/textView7"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="20px"             android:background ="#ff00ff"             android:text="요소7" />         <TextView             android:id="@+id/textView8"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="20px"             android:text="요소8" />     </TableRow>     </TableLayout>

※ Calculator Layout

계산기 모양의 레이아웃을 직접 만들어보자

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_margin="20px"     android:orientation="vertical"     tools:context="com.example.androidex.MainActivity" >             <LinearLayout         android:orientation="vertical"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="2">         <TextView             android:layout_width="match_parent"             android:layout_height="match_parent"             android:padding="20px"             android:textSize="60px"             android:background="#0000ff"             android:textStyle="bold"             android:textColor="#ffffff"             android:text ="123,456,789"             android:gravity="right|center_vertical"             ></TextView>            </LinearLayout>                    <LinearLayout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="1">                  <Button             android:id="@+id/CE"             android:layout_width="0px"             android:layout_height="match_parent"             android:layout_weight="1"             android:text="CE" />                       <Button             android:id="@+id/C"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="C" />                <Button             android:id="@+id/Del"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="Del" />                <Button             android:id="@+id/Pow"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="Pow" />     </LinearLayout>             <LinearLayout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="1">                  <Button             android:id="@+id/sev"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="7" />                       <Button             android:id="@+id/eig"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="8" />                <Button             android:id="@+id/nin"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="9" />                <Button             android:id="@+id/add"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="+" />     </LinearLayout>            <LinearLayout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="1">                  <Button             android:id="@+id/fou"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="4" />                       <Button             android:id="@+id/fiv"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="5" />                <Button             android:id="@+id/six"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="6" />                <Button             android:id="@+id/min"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="-" />     </LinearLayout>        <LinearLayout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="1">                  <Button             android:id="@+id/one"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="1" />                       <Button             android:id="@+id/two"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="2" />                <Button             android:id="@+id/thr"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="3" />                <Button             android:id="@+id/mul"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="*" />     </LinearLayout>           <LinearLayout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="0px"         android:layout_weight="1">                  <Button             android:id="@+id/zero"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="0" />                       <Button             android:id="@+id/dot"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="." />                <Button             android:id="@+id/eq"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="=" />                <Button             android:id="@+id/div"             android:layout_width="0px"             android:layout_weight="1"             android:layout_height="match_parent"             android:text="/" />     </LinearLayout>       </LinearLayout>

android:layout_weight="2"  - 해당 숫자만큼의 비율을 갖게 해준다.    그래서 제일 바깥쪽의 레이아웃을 설정할때 height 가 0 px이어도    weight가 2이기 때문에해당 비율만큼 높이를 가진다.    horizontal에선 해당 비율만큼의 넓이를 가질것이다. android:gravity="right|center_vertical"  - 정렬을 해준다.