[Must Have Joyce의 안드로이드 앱프로그래밍] 6장 화면 구성하기: 레이아웃(뷰 그룹)

알린·2024년 1월 21일
Must Have Joyce의 안드로이드 앱프로그래밍안드로이드
0

Must Have Joyce의 안드로이드 앱프로그래밍

목록 보기
4/12

레이아웃 종류

리니어 레이아웃(LinearLayout)

  • 수직 방향 혹은 수평 방향 차례로 주어진 뷰를 정렬

상대적 레이아웃(RelativeLayout)

  • 뷰들이 다른 뷰들로부터 위치를 지정하거나 자신이 속한 레이아웃을 기준으로 위치를 정함

컨스트레이트 레이아웃(ConstraintLayout)

  • 뷰 사이에 수평, 수직 방향의 제약을 주어 뷰들을 위치

테이블 레이아웃(TableLayout)

  • 뷰를 행과 열로 구성하여 표(테이블)의 형태로 표현

프레임 레이아웃(FrameLayout)

  • 뷰들을 액자처럼 쌓아놓음
  • 가장 나중에 추가한 뷰가 가장 위에 위치
  • 화면에 표시될 하나의 뷰를 바꿔가며 표시하는데 적합

리니어 레이아웃

속성

android:orientation="vertical"

👉 구성요소들 수직 방향 정렬

android:orientation="horizontal"

👉 구성요소들 수평 방향 정렬

방향이 vertical일 때

android:layout_gravity="start"

👉 부모 레이아웃 기준 맨 앞

android:layout_gravity="center"

👉 부모 레이아웃 기준 가운데

android:layout_gravity="end"

👉 부모 레이아웃 기준 맨 뒤

방향이 horizontal일 때

android:layout_gravity="top"

👉 부모 레이아웃 기준 가장 위

android:layout_gravity="center"

👉 부모 레이아웃 기준 가운데

android:layout_gravity="bottom"

👉 부모 레이아웃 기준 가장 아래

layout_weight 사용하기
android:weightSum으로 총 크기 정함
android:layout_weight으로 요소들마다 비중 정함

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"/>
    <Button
        android:layout_width="0dq"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="2"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"/>
</LinearLayout>

결과

상대적 레이아웃

속성

부모 레이아웃 기준

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:text="parent\nstart"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="parent\nend"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="parent\nbottom"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:text="parent bottom\n + parent end"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="parent\ncenter"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="center\nhorizontal"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="center\nvertical"/>
</RelativeLayout>

결과

자식 뷰끼리 기준

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/standard1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:text="기준1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/standard2"
        android:layout_centerInParent="true"
        android:text="기준2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/standard3"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:text="기준3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/standard1"
        android:layout_toRightOf="@+id/standard1"
        android:text="button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/standard2"
        android:layout_toRightOf="@+id/standard2"
        android:text="button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/standard3"
        android:layout_toStartOf="@+id/standard3"
        android:text="button3"/>
</RelativeLayout>

결과

컨스트레이트 레이아웃

속성

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="100dp"
        android:text="button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:hint="버튼을 클릭해주세요!"
        app:layout_constraintBottom_toBottomOf="@+id/button1"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toTopOf="@+id/button1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button1" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button3"
        app:layout_constraintBottom_toBottomOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>

결과

반응형 UI 만들기 : Guideline

가이드라인

  • 실제 화면에는 보이지 않으며, 레이아웃을 구성할 때만 사용되는 도구
  1. 아래 모양인 가이드라인 추가 아이콘을 클릭
  2. Vertical Guideline 클릭
  3. 다음 코드가 자동 생성됨
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

사용예시

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="textview1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="@+id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/testview2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="textview2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

결과

profile
알린
Android 짱이 되고싶은 개발 기록 (+ ios도 조금씩,,👩🏻‍💻)
이전 포스트

[Must Have Joyce의 안드로이드 앱프로그래밍] 5장 화면 구성하기: 뷰(위젯)

다음 포스트

[Must Have Joyce의 안드로이드 앱프로그래밍] 7장 스톱워치

0개의 댓글