LANGUAGE/Kotlin

[Kotlin] LinearLayout / RelativeLayout / ConstraintLayout

보겸삼촌 2020. 6. 25. 13:12

# 개발환경

tool : android studio 4.0
os : windows 10 pro 64-bit

 

 

 

1. LinearLayout

- 주요 속성

▶ orientation : 방향, [ vertical | horizontal (default) ]

▶ weight : 영역의 가중치 (CSS에서 말하는 flexbox와 유사)

▶ weightSum : 전체 가중치의 합

▶ gravity: 정렬, [ center | center_vertival | center_horizontal... ]

 

 

# 예시 1)

# app > res > layout > activity_main.xml

...
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="6">
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#CA2828" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="2"
            android:background="#983A3A" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="3"
            android:background="#EA9898" />
    </LinearLayout>

 

 

 LinearLayout 태그 안의 View의 weigth는 각각 1, 2, 3이며, LinearLayout의 전체 가중치의 합 weightSum이 6이라고 하면 다음과 같이 1, 2, 3 가중치을 갖는 레이아웃이 출력됨

 

 

예시 1 출력결과

 

 

# 예시 2)

# app > res > layout > activity_main.xml

...
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:weightSum="1">
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#CA2828" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#983A3A" />
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#EA9898" />
     </LinearLayout>

 

 

 LinearLayout의 전체 가중치의 합이 1이고, 내부의 View의 내부 width가 50dp로 절대값이 있으며 한 View만 가중치가 1인 경우엔 전체 너비에서 50dp의 절대값을 제외한 나머지 비중을 갖는 View가 됨

 

 

예시 2 출력결과

 

 

 

 

# 전체 코드

# app > res > layout > activity_main.xml

<?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"
    android:weightSum="1"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="6">
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#CA2828" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="2"
            android:background="#983A3A" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="3"
            android:background="#EA9898" />
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:weightSum="1">
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#CA2828" />
        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="#983A3A" />
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#EA9898" />
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:weightSum="1">
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#CA2828" />
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#983A3A" />
        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#EA9898" />
    </LinearLayout>

</LinearLayout>

 

 

2. RelativeLayout

- 주요 속성

 

절대위치

▶ centerInParent : layout의 정가운데 위치

▶ centerVertical : 수직의 정 가운데 위치 (수평도 동일)

▶ alignParentLeft : 부모의 왼쪽에 정렬 (사방향 동일)

 

상대위치

▶ toRightOf : 다른 컴포넌트의 오른쪽에 위치 (사방향 동일)

▶ centerVertical: 수직의 정 가운데 위치 (수평도 동일)

▶ alignLeft : 다른 컴포넌트의 왼쪽에 정렬

 

 

- 특징

  View를 서로 겹칠 수 있음, 단 View의 순서가 중요함

 

 

# 예시

# app > res > layout > activity_main.xml

<?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"
    tools:context=".RelativeLayout">

    <!-- RelativeLayout 장점
        View를 겹칠 수 있음
        View의 순서 중요
    -->
    <View
        android:id="@+id/v3"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#520912"
        android:layout_centerInParent=""
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/v1"
        />
    <View
        android:id="@+id/v1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#f29281"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        />
    <View
        android:id="@+id/v2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#f42892"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/v1"
        />
</RelativeLayout>

 

 

 

3. ConstraintLayout

- 장단점

# 장점

1. 계층이 하나이기 때문에 비교적 복잡한 구조의 뷰를 한 층으로 그릴 수 있어서 렌더링 속도가 빠름
2. auto layout, 앵커 = 화면비율유지
 화면전환(가로-세로)될 때, ondestory -> onCreate되는데 (뷰가 새로 그려짐) 서로 앵커가 연결되어 있어서 비율들이 유지됨


# 단점

복잡함

 

- 방식

 첫 View의 앵커 기준은 최소 3개 이상 연결되어야 함

 

 

- 주요 속성

▶ constraintStart_toStartOf = parent

  : 뷰의 왼쪽 앵커를 부모의 왼쪽으로 잡음 ( start | end | bottom | top ... ), ( parent | id ... )

▶ constraintRight_toLeftOf = view.id

  : 뷰의 오른쪽 앵커를 기준 뷰의 왼쪽으로 잡음

 

 

 

# app > src > layout > active_main.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=".ConstraintLayout"
    >
    <View
        android:id="@+id/v1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <View
        android:id="@+id/v2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintRight_toLeftOf="@+id/v1"
        app:layout_constraintBottom_toTopOf="@+id/v1"
        />

    <View
        android:id="@+id/v3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#7B659A"
        app:layout_constraintRight_toLeftOf="@+id/v2"
        app:layout_constraintBottom_toTopOf="@+id/v2"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

  

 

 

 

 

 

[참고] https://www.youtube.com/watch?v=jJ07983FSeM