#10 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : ConstraintLayout

#1 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 환경 구축

#2 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 디렉토리와 파일 구조

#3 안드로이드 스튜디오로 안드로이드 앱 만들기 - 액티비티(Activity) 뷰(View) 구조

#4 안드로이드 스튜디오로 안드로이드 앱 만들기 - UI 작성 방법 : 자바코드 VS 레이아웃 XML

#5 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 기초 속성

#6 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 계층구조

#7 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : LinearLayout편

#8 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : RelativeLayout편

#9 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : 탭 화면 구현 - TabHost

ConstraintLayout은 2016년 Google IO 행사에서 발표된 레이아웃이다. 안드로이드 스튜디오 2.2 버전부터 사용할 수 있으며, 2.3 버전부터는 레이아웃 XML 파일을 만들면 기본으로 ConstraintLayout이 작성되어 있다. 물론 개발자가 꼭 ConstraintLayout을 이용해야 하는 것은 아니며, 기본으로 작성된 ConstraintLayout을 Linearlayout나 RelativeLayout 등으로 변경하여 작성할 수 있다. ConstraintLayout은 RelativeLayout과 상당히 유사하다.

RelativeLayout과 마찬가지로 상대 위치에 따라 뷰의 배치를 제공한다.

■ 가로 축 : 특정 뷰를 기준으로 왼쪽(Left), 오른쪽(Right) 시작(Start), 끝(End) 상대적인 위치 지정

■ 세로 축 : 특정 뷰를 기준으로 위쪽(Top), 아래쪽(Button), 문자열 기준선(BaseLine) 상대적인 위치 지정

ConstraintLayout에서 제공하는 상대 위치 속성은 RelativeLayout보다 많다.

상대적 위치 지정

■ layout_constraintLeft_toLeftOf

■ layout_constraintLeft_toRightOf

■ layout_constraintRight_toLeftOf

■ layout_constraintRigth_toRightOf

■ layout_constraintTop_toTopOf

■ layout_constraintTop_toBottomOf

■ layout_constraintBottom_toTopOf

■ layout_constraintBottom_toBottomOf

■ layout_constraintBaseline_toBaselineOf

■ layout_constraintStart_toEndOf

■ layout_constraintStart_toStartOf

■ layout_constraintEnd_toStartOf

■ layout_constraintEnd_toEndOf

속성값으로 상대 뷰의 id 값 혹은 "parent"라는 단어로 상위 뷰를 지정할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        app:layout_constraintBottom_toBottomOf="parent"/>
 
</android.support.constraint.ConstraintLayout>
 

B버튼이 A버튼 오른쪽에 위치하며, 부모 영역의 하단에 위치하게 설정 해보았다.

여백

뷰와 뷰 사이의 간격을 표현하기 위해서 margin 설정을 다음의 속성으로 지정할 수 있다.

■ android:layout_marginStart

■ android:layout_marginEnd

■ android:layout_marginLeft

■ android:layout_marginTop

■ android:layout_marginRight

■ android:layout_marginBottom

또한 상대 뷰가 View.GONE 상태일 때의 margin 값을 따로 설정할 수 있다.

■ layout_goneMarginStart

■ layout_goneMarginEnd

■ layout_goneMarginLeft

■ layout_goneMarginTop

■ layout_goneMarginRight

■ layout_goneMarginBottom

View.GONE 상태는 뷰가 화면에서 보이지 않으며 크기도 없는 상황을 이야기한다. 상대 뷰가 화면에 보이고 있을 때와 GONE 상태일 때의 margin 값을 다르게 설정하여 상대 뷰가 보이지 않는 상황에 대응 할 수있다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:visibility="gone"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        android:layout_marginLeft="20dp"
        app:layout_goneMarginLeft="0dp"/>
 
</android.support.constraint.ConstraintLayout>

가운데 맞춤과 치우침(bias)

■ layout_constraintHorizontal_bias : 가로 치우침 조절

■ layout_constraintVertical_bias : 세로 치우침 조절

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3">
 
</android.support.constraint.ConstraintLayout>

값을 0.3으로 지정하면 30%라는 의미로 왼쪽에서 30% 위치에 나타난다.

비율(Ratio)

뷰의 크기를 지정할 때 가로세로 비율에 의한 크기를 지정할 수 있다. 이 속성을 이용하려면 전제 조건이 필요한데, 우선 크기 값이 0dp로 지정되어 있어야한다.

layout_width, layout_height 중 최소 둘 중 하나를 0dp로 지정하여 크기를 layout_constraintDimensionRatio를 이용하여 배율로 결정할 수있다. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="A"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"/>
 
</android.support.constraint.ConstraintLayout>

layout_weight, layout_height 값이 모두 0인 경우도 가능하다. 단 이런 경우에는 속성값에 "W"혹은 "H" 값을 지정하여 어느 쪽의 크기를 배율에 맞게 조정할 것인지 지정해야 한다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="A"
        app:layout_constraintDimensionRatio="h,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
 
</android.support.constraint.ConstraintLayout>

위의 예는 layout_width, layout_height 값이 모두 0으로 설정되었으며, layout_constraintDimensionRatio 값에 가로를 기준으로 세로 값을 배율에 맞게 조정하기 위해 "H" 단어는 지정하였다.