Kotlin 07 - 뷰 배치 레이아웃

neulilanikka·2023년 2월 3일

선형 배치(LinearLayout)

배치 규칙

뷰를 가로나 세로 방향으로 나열하는 레이아웃
orientation 속성에 horizontal, vertical 값으로 방향을 지정
LinearLayout을 중첩
레이아웃 클래스도 뷰이므로 다른 레이아웃 클래스에 포함할 수 있다

여백을 채우는 layout_weight 속성

뷰 1개로 전체 여백 채우기 : 여백을 뷰로 채우려면 layout_weight 속성을 사용
뷰 여러 개로 여백을 나눠 채우기

  • layout_weight 속성에 지정한 숫자는 가중치
  • layout_wegith 값을 각각 1과 3으로 선언했다면 가로 여백을 각각 1/4만큼, 3/4만큼 나누어 차지
    중첩된 레이아웃에서 여백 채우기
    여백 채우기로 뷰의 크기 설정하기
<?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">

    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button2"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button3"/>

</LinearLayout>

정렬하는 gravity, layout_gravity 속성

gravity : 정렬 대상은 콘텐츠
layout_gravity : 뷰 자체를 정렬하는 속성

상대 위치로 배치(RelativeLayout)

배치 규칙

상대 뷰의 위치를 기준으로 정렬하는 레이아웃

  • android:layout_above : 기준 뷰의 위쪽에 배치
  • android:layout_below : 기준 뷰의 아래쪽에 배치
  • android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치
  • android:layout_toRightOf : 기준 뷰의 오른쪽에 배치

정렬하는 align 속성

상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정하는 속성

  • android:layout_alignTop : 기준 뷰와 위쪽을 맞춤
  • android:layout_alignBottom : 기준 뷰와 아래쪽을 맞춤
  • android:layout_alignLeft : 기준 뷰와 왼쪽을 맞춤
  • android:layout_alignRight : 기준 뷰와 오른쪽을 맞춤
  • android:layout_alignBaseline : 기준 뷰와 텍스트 기준선을 맞춤
    상위 레이아웃을 기준으로 맞춤 정렬하는 속성
  • android:layout_alignParentTop : 부모의 위쪽에 맞춤
  • android:layout_alignParentBottom : 부모의 아래쪽에 맞춤
  • android:layout_alignParentLeft : 부모의 왼쪽에 맞춤
  • android:layout_alignParentRight : 부모의 오른쪽에 맞춤
  • android:layout_centerHorizontal : 부모의 가로 방향 중앙에 맞춤
  • android:layout_centerVertical : 부모의 세로 방향 중앙에 맞춤
  • android:layout_centerInParent : 부모의 가로, 세로, 중앙에 맞춤

겹쳐서 배치(FrameLayout)

카드를 쌓듯이 뷰를 추가한 순서대로 위에 겹쳐서 계속 출력하는 레이아웃
대부분 뷰의 표시 여부를 설정하는 visibility 속성을 함께 사용

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@mipmap/ic_launcher"/>
</FrameLayout>

visibility 속성을 바궈 버튼은 숨기고 이미지는 보이도록 설정함

package com.example.kotlin_07

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.button.setOnClickListener{
            binding.button.visibility = View.INVISIBLE
            binding.imageView.visibility = View.VISIBLE
        }
        binding.ImageView.setOnClickListener{
            binding.button.visibility = View.VISIBLE
            binding.imageView.visibility = View.INVISIBLE
        }
    }
}

표 형태로 배치(GridLayout)

테이블 화면을 만드는 레이아웃
orientation 속성 : 가로, 세로 방향으로 뷰를 나열
줄바꿈을 자동으로 해줌

  • orientation : 방향 설정
  • rowCount : 세로로 나열할 뷰 개수
  • columnCount : 가로로 나열할 뷰 개수

속성

특정 뷰의 위치 조정하기

  • layout_row : 뷰가 위치하는 세로 방향 인덱스
  • layout_column : 뷰가 위치하는 가로 방향 인덱스
    특정 뷰의 크기 확장하기 : layout_gravity 속성을 이용
    열이나 행 병합하기
  • layout_columnSpan : 가로로 열 병합
  • layout_rewSpan : 세로로 열 병합

계층 구조로 배치(ConstraintLayout)

androidx에서 제공하는 라이브러리

    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

레이아웃 편집기에서 레이아웃 구성

상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공
레이아웃 편집기를 제공

profile
Now: Mobile Developer / ToDo : Front-End Full Stack Developer

0개의 댓글