안드로이드 앱 프로그래밍 - 6(뷰를 배치하는 레이아웃)

- LinearLayout

LineartLayout은 선형적으로 배치합니다. 제일 중요한 속성은 orientation 속성이며 horizontal 이나 vertical 값으로 방향을 지정합니다.

 

<layout_weight>

화면에 뷰를 배치하다보면 가로나 세로 방향에 여백이 생길 수 있는데 이 역백을 layout_weight로 채울 수 있습니다. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="button2"/>
        </LinearLayout>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="button3"
            android:layout_weight="1"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="button4"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

<gravity, layout_gravity>

gravity의 정렬대상은 콘텐츠이고 layout_gravity의 정렬대상은 뷰 자체입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="#FF0000"
            android:textSize="15dp"
            android:textStyle="bold"
            android:textColor="#FFFFFF"
            android:text="hello"
            android:gravity="right||bottom"
            android:layout_gravity="center"
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

- RelativeLayout

RelativeLayout은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스입니다. 이미 출력된 특정 뷰를 기준으로 방향을 지정하여 배치합니다. 속성에 입력하는 기준 값은 뷰의 id 입니다. 아래는 배치 규칙입니다.

• android: layout_above : 기준 뷰의 위쪽에 배치합니다.
• android: layout_below : 기준 뷰의 아래쪽에 배치합니다.
• android: layout_toLeftOf : 기준 뷰의 왼쪽에 배치합니다.
• android: layout__toRightOf : 기준 뷰의 오른쪽에 배치합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:id="@+id/text"
            android:text="hello world"
            android:background="#FF00FF"
            android:textSize="30dp"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            android:layout_toRightOf="@id/text"/>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

<align 속성>

앞에서 본 화면에서 버튼이 textview 상단에 맞춰져있습니다. 때로는 아래쪽에 맞춰야할 수 도 있습니다. 이때 사용하는 것이 align 속성입니다. 속성의 종류는 다음과 같습니다.

• android: layout_alignTop : 기준뷰와 위쪽에 맞춥니다.
• android: layout_alignBottom : 기준뷰와 아래쪽에 맞춥니다.
• android: layout_alignLeft : 기준뷰와 왼쪽을 맞춥니다.
• android: layout_alignLight : 기준뷰와 오른쪽을 맞춥니다.
• android: layout_alignBaseline : 기준뷰와 텍스트 기준선을 맞춥니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:id="@+id/text"
            android:text="hello world"
            android:background="#FF00FF"
            android:textSize="30dp"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            android:layout_toRightOf="@id/text"
            android:layout_alignBottom="@id/text"/>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

또, 상위 레이웃을 기준으로 맞춤정렬하는 솏성도 있습니다. 아래는 종류입니다.

• android: layout_alignParentTop : 부모의 위쪽에 맞춥니다.
• android: layout_alignParentBottom : 부모의 아래쪽에 맞춥니다.
• android: layout_alignParentLeft : 부모의 왼쪽에 맞춥니다.
• android: layout_alignParentRight : 부모의 오른쪽에 맞춥니다.
• android: layout_centerHorizontal : 부모의 가로 방향 중앙에 맞춥니다.
• android: layout_centerVertical : 부모의 세로방향 중앙에 맞춥니다.
• android: layout_centerInParent : 부모의 가로 세로 중앙에 맞춥니다.

<카카오톡 알림 배치 만들기 실습>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/icon_kakao"
            android:id="@+id/icon_kakao" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="카카오톡"
            android:layout_toRightOf="@id/icon_kakao"
            android:layout_marginLeft="16dp"
            android:id="@+id/title"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[기기 로그인 알람]"
            android:layout_toRightOf="@id/icon_kakao"
            android:layout_alignBottom="@id/icon_kakao"
            android:layout_marginLeft="16dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1월11일"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

- FramLayout

FramLayout은 뷰를 겹쳐서 출력하는 레이아웃 클래스입니다. 여러 뷰를 겹쳐서 놓고 어떤 순간에는 하나의 뷰만 출력할때 사용합니다. 따라서 대부분 뷰의 표시여부는 visibility 속성을 함께 사용합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            android:visibility="invisible"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello world"
            android:background="#FF00FF"/>
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

- GridLayout

GridLayout은 행과 열로 구성된 테이블 화면을 만드는 레이아웃클래스입니다. 아래는 자주사용하는 속성들입니다.

• orientation : 방향을 설정합니다.
• rowCount : 새로로 나열할 뷰의 개수입니다.
• columnCount : 가로로 나열할 뷰의 개수입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="3">
        <Button android:text="A"/>
        <Button android:text="B"/>
        <Button android:text="C"/>
        <Button android:text="D"/>
        <Button android:text="E"/>
        <Button android:text="F"/>
    </GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

<GridLayout>

GridLayout으로 행과열을 지정해 특정 뷰의 위치를 조정할 수 있습니다. 이후에 추가한 뷰는 지정한 위치 다음부터 나옵니다.

• android: layout_row : 행을 지정합니다.
• android: layout_column : 열을 지정합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="3">
        <Button android:text="A"/>
        <Button android:text="B"/>
        <Button android:text="C"
            android:layout_row="1"
            android:layout_column="1"/>
        <Button android:text="D"/>
        <Button android:text="E"/>
        <Button android:text="F"/>
    </GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

<뷰 크기 확장하기>

특정 뷰의 크기가 크고 다음 위치의 뷰의 크기는 그대로인경우 여백이 남습니다. 이를 layout_gravity로 채울 수 있습니다.

위 E버튼의 뷰를 크게 만들어보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="3">
        <Button android:text="A"/>
        <Button android:text="hello world android "/>
        <Button android:text="C"/>
        <Button android:text="D"/>
        <Button android:text="E"
            android:layout_gravity="fill_horizontal"/>
        <Button android:text="F"/>
    </GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

<열이나 행 병합하기>

열이나 행은 아래 속성을 이용해 병합할 수 있습니다.

• android: layout_columnSpan : 가로열 방향 병합
• android: layout_rowSpan : 세로열 방향 병합

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="3">
        <Button android:text="A"
            android:layout_columnSpan="2"
            android:layout_rowSpan="2"
            android:layout_gravity="fill"/>
        <Button android:text="B"/>
        <Button android:text="C"/>
        <Button android:text="D"/>
        <Button android:text="E"/>
        <Button android:text="F"/>
    </GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

- ConstraintLayout

ConstraintLayout은 relativelayout과 비슷하지만 더 많은 속성을 제공합니다. xml 파일로 직접 작성하기는 힘들어서 레이아웃 편집기를 이용해서 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".kakotalk">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/icon_kakao" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="카카오톡"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="[기기 로그인 알림]"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="9월7일"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>