[27일차 Android] Layout(LinearLayout, RelativeLayout, ConstraintLayout)

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 Layout

• 안드로이드는 좌표가 아닌 배치되는 모양을 결정하게 된다.
• 개발자가 배치되는 모양을 결정하고 뷰들을 배치하면 안드로이드 OS가 단말기에 적합한 좌표를 계산하고 뷰들을 배치하게 된다.

Parent와 Child

• 안드로이드는 화면을 구성하기 위해 layout을 먼저 배치하고 그 위에 다른 View들을 배치하게 된다.
• 이 때 layout을 Parent라고 부르고 배치되는 View들을 Child라고 부른다.
• 모든 View들은 단 하나의 Parent를 가질 수 있으며 모든 layout은 다수의 Child를 가질 수 있다.

Layout 공통 속성

• layout_width : 뷰의 가로길이. dp 단위 값, wrap_content, match_parent
• layout_height : 뷰의 세로길이, dp 단위 값, wrap_content, match_parent
  • wrap_conent : 자기를 완변하게 표현할 수 있는 최소 사이즈
  • match_parent : 레이아웃 크기에 꽉 채운다.

---

📖 LinearLayout

• 방향성을 가지고 view를 배치하는 layout이다.
• 가로 혹은 세로 방향으로 배치할 수 있으며 한 칸에 하나의 view만 배치할 수 있다.
• 안드로이드에서 가장 많이 사용하는 layout으로 여러 LinearLayout을 조합하여 다양한 모양을 만들 수 있다.

주요 속성

• orientation : 뷰가 배치되는 모양
  • horizontal(좌측에서 우측으로, 생략), vertical(위에서 아래로)
• layout_weight : 뷰가 차지할 크기 비율
  • LinearLayout의 orientation 속성이 horizontal이라면 가로 크기 조정
  • veritcal이면 세로 길이 조정

 

 

 

예제 코드

<?xml version="1.0" encoding="utf-8"?>
<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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button16"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button17"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button18"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button19"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <Button
            android:id="@+id/button7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button8"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

    </LinearLayout>

</LinearLayout>

코드 리뷰

• 최상단의 Layout을 LinearLayout(vertical)로 배치한다.
• 두 개의 LinearLayout를 배치하고 버튼을 4개씩 배치한다.
• 두 개의 LinearLayout의 속성을 layout_height = "match_parent", layout_weight="1"로 설정하여 화면을 1:1의 비율로 차지하도록 설정한다.
• 상단의 LinearLayout 안에 배치한 Button의 속성을 android:layout_width="match_parent", android:layout_weight="1"로 설정하여 LinearLayout을 1:1:1:1의 비율로 차지하도록 설정한다.
• 하단의 LinearLayout 안에 배치한 Button의 속성을 android:layout_height="match_parent", android:layout_weight="1"로 설정하여 LinearLayout을 1:1:1:1의 비율로 차지하도록 설정한다.

 

 

 

 

결과

---

📖 RelativeLayout

• Parent나 다른 view와의 관계를 설정하여 배치하는 layout이다.
• Relative Layout 에는 특별한 속성이 없지만 배치되는 view 들의 속성을 이용해 배치를 결정하게 된다.

주요 속성

주요 속성	설명
layout_alignParentTop	자신의 상단을 parent의 상단 부분과 일치시킨다.
layout_alignParentBottom	자신의 하단을 parent의 하단 부분과 일치시킨다.
layout_alignParentLeft	자신이 좌측 부분을 parent의 좌측 부분과 일치시킨다.
layout_alignParentRight	자신의 우측 부분을 parent의 우측 부분과 일치시킨다.
layout_alignWithParentMissing	다른 view를 정렬 기준으로 설정하였을 경우 기준으로, 설정한 view가 없을 때는 parent를 기준으로 정렬한다.

주요 속성	설명
layout_centerHorizontal	세로 방향의 중앙에 정렬한다.
layout_centerVertical	가로 방향의 중앙에 정렬한다.
layout_centerInParent	가로 세로 모두 중앙에 정렬한다.

주요 속성	설명
layout_alignTop	자신의 상단 부분을 지정된 view의 상단 부분에 일치시킨다.
layout_alignBottom	자신의 하단 부분을 지정된 view 의 하단 부분에 일치시킨다.
layout_alignLeft	자신의 좌측 부분을 지정된 view 의 좌측에 일치시킨다.
layout_alignRight	자신의 우측 부분을 지정된 view 의 우측에 일치시킨다.
layout_alignBaseline	자신의 Baseline 부분과 지정된 view의 Baseline을 일치시킨다.

주요 속성	설명
layout_above	지정된 view 상단에 배치한다.
layout_below	지정된 view 하단에 배치한다.
layout_toRightOf	지정된 view 우측에 배치한다.
layout_toLeftOf	지정된 view 좌측에 배치한다.

 

 

 

예제 코드

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="아이디"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:ems="10"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editTextTextEmailAddress"
        android:layout_alignParentLeft="true"
        android:text="비밀번호"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:ems="10"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editTextTextPassword"
        android:layout_toLeftOf="@id/button4"
        android:text="로그인" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editTextTextPassword"
        android:layout_alignRight="@id/editTextTextPassword"
        android:layout_alignParentRight="true"
        android:text="취소" />
</RelativeLayout>

코드 리뷰

• textView
  • android:layout_alignParentLeft="true" : 자신의 왼쪽과 부모(RelativeLayout)의 왼쪽을 일치시킨다.
  • android:layout_alignParentTop="true" : 자신의 상단과 부모(RelativeLayout)의 상단을 일치시킨다.
• editTextTextEmailAddress
  • android:layout_below="@id/textView" : textView의 하단에 배치한다.
• button3
  • android:layout_below="@id/editTextTextPassword" : editTextTextPassword의 하단에 배치한다.
  • android:layout_toLeftOf="@id/button4" : button4의 좌측에 배치한다.
• button4
  • android:layout_alignRight="@id/editTextTextPassword" : editTextTextPassword의 우측과 자신의 우측을 일치시킨다.
  • android:layout_alignParentRight="true" : 자신의 우측과 부모의 우측을 일치시킨다.

 

 

 

결과

---

📖 ConstraintLayout

• RelativeLayout을 개선한 layout으로 RelativeLayout보다 유연하게 화면을 구성할 수 있는 특징이 있다.

제약 조건

• ConstraintLayout은 RelativeLayout처럼 부모와의 관계나 다른 View와의 관계를 설정하게 된다.
• 제약 조건은 다음과 같이 두 가지를 사용할 수 있다.
  • 실선 제약 조건 : 지정된 기준으로부터 얼마큼 떨어진 위치에 있는지 좌표를 설정한다.
  • 스프링 제약 조건 : 지정된 기준으로부터 얼마큼 떨어진 위치에 있는지 비율을 설정한다.

 

 

 

예제 코드

<?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=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editTextText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="text"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="비밀번호"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextText" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.179"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="로그인"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="취소"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />
</androidx.constraintlayout.widget.ConstraintLayout>

코드 리뷰

• app:layout_constraint ~~ _to ~ Of="parent" : 부모의 ~ 방향과 자신의 ~~ 방향에 대한 비율을 설정한다.

 

 

 

결과