'2019/04/03'에 해당되는 글 2건

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 - 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
블로그 이미지

모데스티

,