[Kotlin] 안드로이드 스튜디오 Guideline (반응형 UI) 사용 방법

Guideline을 사용하여 반응형 UI를 만들 수 있다.

 

 

1. 레이아웃의 툴바로 생성

• Vertical Guideline : 수직방향 가이드라인 생성
• Horizontal Guideline : 수평 방향 가이드라인 생성

 

1-1) 코드는 자동 생성된다.

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />

• 자동 생성 가이드라인 ID는 @+id/guideline[숫자] 형식 숫자는 생성할 때마다 증가한다.
• 수직 방향 가이드라인을 추가 시 android:orientation값은 vertical이다.
• app:layout_constraintGuide_begin 부모 레이아웃의 시점에서 20dp 떨어진 곳에 위치, 이 속성을 포함해서 가이드라인은 3가지 종류의 제약을 줄 수 있다.
• app:layout_constraintGuide_begin = “xdp” → 부모 레이아웃의 시작점을 기준으로 xdp만큼 떨어진 가이드라인
• app:layout_constraintGuide_end = “xdp” → 부모 레이아웃의 끝점을 기준으로 xdp만큼 떨어진 가이드라인
• app:layout_constraintGuide_percent = “0.x” → 수평 방향 가이드라인이면 위쪽, 수직 방향 가이드라인이면 왼쪽을 기준으로 몇 퍼센트 지점에 위치 하는지를 정한다 **ex) 0.3 → 전체 길이 30%**

 

 

---

2. 반응형 만들기

반응형으로 만들기 위해서는 고정된 dp값이 아니라 백분율로 위치를 정해주어야 한다.

// 수정 전
app:layout_constraintGuide_begin="20dp"

// 수정 후
app:layout_constraintGuide_percent="0.4"

• 수직 방향 가이드라인이 전체 너비 중 40%에 해당하는 곳에 위차하게 된다.
  
  

 

 

---

3. 수평 가이드 라인 생성

// 코드 자동 생성
<androidx.constraintlayout.widget.Guideline
        android:id="@+id/horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

• app:layout_constraintGuide_percent → 부모 레이아웃 높이의 30%에 해당하는 곳에 가이드라인 추가
  
  

 

 

---

4. 가이드라인 안에 element 넣기

<TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="RIGHT"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/vertical"
        app:layout_constraintTop_toTopOf="@+id/horizontal"
        android:background="#006a71"/>

• 0dp를 넣어야 가이드라인까지 꽉 참
• android:gravity는 가이드라인의 중앙으로 오게 한다.
  
  

 

 

---

5. 사용 예

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


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <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.18" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.82" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1" />

    <TextView
        android:id="@+id/tv_location_title"
        android:textColor="#000000"
        android:letterSpacing="-0.05"    
        android:textSize="32sp"
        android:textStyle="bold"
        android:text="역삼1동"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/guideline1"
        app:layout_constraintTop_toTopOf="@+id/guideline4" />

    <TextView
        android:id="@+id/tv_location_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="대한민국 서울특별시"
        android:letterSpacing="-0.05"
        android:textColor="#000000"
        app:layout_constraintStart_toStartOf="@+id/guideline1"
        app:layout_constraintTop_toBottomOf="@+id/tv_location_title" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="10dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="9dp"
        app:layout_constraintBottom_toTopOf="@+id/tv_location_subtitle"
        app:layout_constraintStart_toEndOf="@+id/tv_location_title"
        app:layout_constraintTop_toTopOf="@+id/tv_location_title"
        app:srcCompat="@drawable/iocn_thunder" />

    <ImageView
        android:id="@+id/img_bg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintVertical_bias="0.4"
        app:srcCompat="@drawable/bg_soso" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:letterSpacing="0.05"
        android:textColor="#4c4c4c"
        android:textStyle="bold"
        android:textSize="32sp"
        android:text="61"
        app:layout_constraintBottom_toBottomOf="@+id/img_bg"
        app:layout_constraintEnd_toEndOf="@+id/img_bg"
        app:layout_constraintStart_toStartOf="@+id/img_bg"
        app:layout_constraintTop_toTopOf="@+id/img_bg" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:letterSpacing="-0.05"
        android:text="보통"
        app:layout_constraintEnd_toEndOf="@+id/img_bg"
        app:layout_constraintStart_toStartOf="@+id/img_bg"
        app:layout_constraintTop_toBottomOf="@+id/tv_count" />

    <TextView
        android:id="@+id/check_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="측정 시간"
        android:layout_marginTop="40dp"
        android:letterSpacing="-0.05"
        android:textColor="#999999"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img_bg" />

    <TextView
        android:id="@+id/tv_check_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2021-08-29 13:00"
        android:letterSpacing="-0.05"
        android:textColor="#999999"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/check_time" />

    <ImageView
        android:id="@+id/btn_refresh"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:padding="5dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_check_time"
        app:srcCompat="@drawable/icon_refresh" />

</androidx.constraintlayout.widget.ConstraintLayout>

• android:letterSpacing 자간 간격을 설정하는 것인데 음수로 설정하면 기본 간격보다 가까워진다.
• height, width 0dp 0dp를 줌으로써 수평, 수직 제약에 크기를 동적으로 맞춘다.
• app:layout_constraintDimensionRatio="h,1:1" "h,1:1"로 주어 이미지 비율을 1:1로 맞춘다. 1:1 앞에 h의 의미는 너비(width)를 제약에 먼저 맞춘 후 높이(height)를 비율에 맞게 맞춘다는 뜻 만약, “w,1:1”로 주면 높이를 제약에 먼저 맞춘 후 너비를 맞출 것이므로 화면 밖으로 벗어나게 된다.
• app:layout_constraintVertical_bias="0.4" 0.4으로 줌으로써 수직 방향의 40% 지점에 이미지를 놓는다.