FrameLayout

1) 개요

  - 각각의 뷰를 모두 왼쪽 상단 기준으로 쌓아 올리는 방식으로 배치하는 레이아웃

  - 먼저 추가된 View위로 나중에 추가된 View가 겹겹이 쌓이게 된다.

2) FrameLayout의 계층 만들기

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- FrameLayout의 계층 만들기 먼저 만든 순서대로 아래에 위치-->
    <!-- 1번 Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">
    </LinearLayout>

    <!-- 2번 Layout -->
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/colorPrimaryDark">
    </LinearLayout>

    <!-- 3번 Layout -->
    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@color/colorPrimary">
    </LinearLayout>

</FrameLayout>

LinearLayout 

  1) 개요

    - 부모 컨테이너와의 상대적 위치 또는 다른 뷰와의 상대적 위치로 배치하는 레이아웃

  2) 부모 컨테이너와의 상대적 위치를 이용

    - layout_alignParent(Top, Bottom, Left, Right) : 부모 컨테이너의 위, 아래, 왼쪽, 오른쪽에 맞춰 배치

    - layout_center(Horizontal, Vertical, Parent) : 부모 컨테이너의 수평 중앙, 수직 중앙, 정중앙에 배치

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 1번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:text="1"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 2번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:text="2"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 3번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:text="3"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 4번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerVertical="true"
        android:text="4"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 5번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="5"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 6번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="6"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 7번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:text="7"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 8번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="8"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 9번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="9"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

</RelativeLayout>

  3) 다른 뷰와의 상대적 위치를 이용

     - layout_to(Right, Left)of : 기준이 되는 뷰의 오른쪽, 왼쪽에 배치

       (단, 상하의 위치를 지정하지 않으면 기본값인 Top으로 배치)

     - layout_(above, below) : 기준이 되는 뷰의 위, 아래에 배치

       (단, 좌우의 위치를 지정하지 않으면 기본값인 Left로 배치)

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 1번 TextView -->
    <TextView
        android:id="@+id/textview01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="1"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 2번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/textview01"
        android:layout_toLeftOf="@id/textview01"
        android:text="2"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 3번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@+id/textview01"
        android:layout_above="@id/textview01"
        android:text="3"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 4번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/textview01"
        android:layout_toLeftOf="@id/textview01"
        android:text="4"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 5번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/textview01"
        android:layout_toRightOf="@id/textview01"
        android:text="5"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

</RelativeLayout>

1. LinearLayout 

  1) 개요

    - 세로(vertical) 또는 가로(horizontal)의 단일 방향으로 모든 하위 항목을 정렬하는 뷰 

    - Layout의 orientation의 속성으로 방향을 지정할 수 있다.

  2) layout_orientation

    - Layout을 세로로 배치할 것인지, 가로로 배치할 것인지 설정할 수 있다.

    - layout_orientation값을 주지 않을 경우 가로로 배치하는 것이 기본

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimaryDark"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorAccent"/>

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimaryDark"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorAccent"/>

</LinearLayout>

  2) layout_weight

   - LinearLayout의 하위 뷰의 크기를 지정한 만큼의 가중치를 매겨 영역을 할당할 수 있다.

   - LinearLayout의 orientation에 따라 가중치가 적용되는 크기의 방향이 다름

   - orientation을 vertical로 설정하고 자식뷰의 height를 0이 아닌 다른 값으로 설정하거나, horizontal로 설정하고

     자식뷰의 width를 0이 아닌 다른 값으로 설정한 경우 가중치가 아닌 width나 height에 설정한 값이 우선 적용된다.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="100dp"
        android:background="@color/colorAccent"/>

    <TextView
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark"/>

</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_weight="3"
        android:layout_height="0dp"
        android:background="@color/colorAccent"/>

    <TextView
        android:layout_width="100dp"
        android:layout_weight="2"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark"/>

</LinearLayout>