Android - Layout

Linear / Relative / Frame / Table / Grid / Constraint

 

<Linear Layout>

뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스 orientation 속성으로 horizontal 또는 vertical값으로 방향을 지정 가능

weight 값을 지정하여 비율을 설정 할 수 있음

---

<Relative Layout>

상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스 화면에 이미 출력된 특정 뷰를 기준으로 방향을 지정하여 배치

위치를 지정하지 않는다면 겹쳐지는 것을 볼 수 있음

이미지에 id를 지정하고 버튼 옆에 toRightof를 넣는다면

<?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">

    <ImageView
        android:id="@+id/iv_main_img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/tottenham_hotspur"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/iv_main_img"
        android:text="토트넘"/>
</RelativeLayout>

🍀맞춤 정렬하는 align 속성이 있음

android:layout_alignTop : 기존 뷰와 위쪽을 맞춤

android:layout_alignBottom : 기존 뷰와 아래쪽을 맞춤

android:layout_alignLeft : 기존 뷰와 왼쪽을 맞춤

android:layout_alignRight : 기존 뷰와 오른쪽을 맞춤

android:layout_alignBaseline : 기존 뷰와 텍스트 기준선을 맞춤

 

🍀상위 레이아웃을 기준으로 맞춤 정렬

android:layout_alignParrentTop : 부모의 위쪽에 맞춤

android:layout_alignParrentBottom : 부모의 아래쪽에 맞춤

android:layout_alignParrentLeft : 부모의 왼쪽에 맞춤

android:layout_alignParrentRight : 부모의 오른쪽에 맞춤

android:layout_alignHorizontal : 부모의 가로 방향 중앙에 맞춤

android:layout_alignVertical : 부모의 세로 방향 중앙에 맞춤

android:layout_alignInParrent : 부모의 가로,세로 중앙에 맞춤

---

<Frame Layout>

뷰를 겹쳐서 출력하는 레이아웃 클래스

카드를 쌓듯이 뷰를 추가한 순서대로 위에 겹쳐서 출력하는 레이아웃

 

FrameLayout은 똑같은 위치에 여러 뷰를 겹쳐서 놓고, 하나의 뷰만 출력할 때 사용함

대부분 뷰의 표시 여뷰를 설정하는 visibility 속성을 함께 사용

---

<Table Layout>

TableLayout은 행과 열로 이루어진 표 형태의 구조를 가진 Layout

stretchColumns

여유 공간이 생기지 않도록 뷰를 배치하려면 stretchColumns 속성을 사용 해야함

---

<Table Layout>

행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스

LinearLayout 처럼 orientation 속성으로 가로나 세로 방향으로 뷰를 나열하는데 LinearLayout과 다르게 줄바꿈을 자동으로 해줌

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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>

tableLayout보다 편한 느낌

---

<Constraint Layout>

계층 구조로 배치하는 ContrraintLayout은 안드로이드 플랫폼이 아니라 androidx에서 제공하는 라이브러리이다.

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

먼저 사용하기 위해서는 빌드 설정이 필요하다

마우스 클릭만으로 레이아웃을 구성할 수 있도록 레이아웃 편집기를 제공함

 

ContrraintLayout은 width, height외에 제약 조건을 지정해야 함

 

부모 영역에서 어디에 어느 정도의 여백으로 출력해야 하는지, 다른 뷰를 기준으로 상대 위치를 설정해 줘야 함

상대 위치를 기준으로 위치 설정을 해야 하는 경우 id값으로 연결을 하여 설정 해야함

<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">

    <ImageView
        android:id="@+id/iv_main_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/kakao_talk"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="7월 12일"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/iv_main_img" />

</androidx.constraintlayout.widget.ConstraintLayout>