FrameLayout

 

1) 개요

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

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

 

2) FrameLayout의 계층 만들기

먼저 추가한 View위에 나중에 추가한 View가 쌓이는 형태가 된다 (소스코드는 아래 참조)

<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>

'Android > Layout' 카테고리의 다른 글

Layout - 03.FrameLayout  (0) 2019.04.09
Layout - 02.RelativeLayout  (0) 2019.04.03
Layout - 01. LinearLayout  (0) 2019.04.03
블로그 이미지

모데스티

댓글을 달아 주세요

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>

'Android > Layout' 카테고리의 다른 글

Layout - 03.FrameLayout  (0) 2019.04.09
Layout - 02.RelativeLayout  (0) 2019.04.03
Layout - 01. LinearLayout  (0) 2019.04.03
블로그 이미지

모데스티

댓글을 달아 주세요

1. LinearLayout 

 

  1) 개요

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

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

 

  2) layout_orientation

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

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

 

orientation 속성을 생략하거나 horizontal로 설정한 경우 (소스코드는 아래 참조)

<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>

 

orientation 속성을 vertical로 설정한 경우 (소스코드는 아래 참조)

<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에 설정한 값이 우선 적용된다.

 

orientation 속성을 horizontal로 설정하고 TextView에 가중치를 준 결과 (소스코드는 아래 참조)

<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>

 

orientation 속성을 vertical로 설정하고 TextView에 가중치를 준 결과 (소스코드는 아래 참조)

<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>

'Android > Layout' 카테고리의 다른 글

Layout - 03.FrameLayout  (0) 2019.04.09
Layout - 02.RelativeLayout  (0) 2019.04.03
Layout - 01. LinearLayout  (0) 2019.04.03
블로그 이미지

모데스티

댓글을 달아 주세요