Basics

Constraints

constraints란?

Constraint는 Constraint Layout의 기초 구성 요소이다. Constraint는 레이아웃 안의 두 위젯 간의 관계를 정의하고 레이아웃 안에서 그 위젯들이 어떻게 위치할 지를 조절한다. 기본적인 작동 원리는 ConstraintLayout은 RelativeLayout과 비슷한 점이 있다.

에디터에서 constraint 작성하기

안드로이드 스튜디오에서 visual editor 를 사용해서 constraint를 쉽게 배울 수 있다.
화살표는 margin을 의미
코너의 사각형은 위젯의 크기를 조정, 모서리의 원은 constraint를 만드는데 사용되는 anchor point이다. 가운데에 칠해진 것은 constraint가 만들어졌다는 것을 의미함
tblr말고도 베이스라인이라는 추가 anchor point가 존재한다. 'ab'버튼을 클릭해서 베이스라인 선택가능.
'x' 버튼을 클릭하면 모든 constraint 초기화 칠해진 anchor point 를 한번 더 누르면 constraint 제거
xml로도 작성가능

Chain

Chain이란?

Chain은 특수한 종류의 constraint이다. Chain안에 있는 뷰들 끼리 공간을 공유하게 해주고, 뷰들 에게 공간을 어떻게 사용하게 할지를 결정한다. LinearLayout과 흡사하지만 약간 더 발전된 기능을 갖는다.

체인 만들기

체인은 여러개의 뷰로 구성되어 있다. 체인을 구성하려면 여러 체인을 한번에 선택해서 수직 또는 수평 체인으로 만들어야 한다. 체인을 구성하는 요소들도 constraint를 가질 수 있다. 체인을 만들면 체인 멤버 간의 관게를 쉽게 정의 할 수 있다.
스프링 : chain mode
3가지의 체인모드가 있다 : spread, spread_inside, packed

Spread Chain

디폴트 모드이다. 가능한 공간에서 동일한 간격으로 체인 안의 뷰를 배치한다.

Spread Inside chain

우선 가장자리에 있는 뷰를 바깥 가장자리에 고정시키고, 남은 뷰들을 동일한 간격으로 배치한다.

Packed Chain

같이 붙어다니게 함.

Spread Chain Weights

spread와 spread_inside의 유용한 기능 중에 체인 멤버 각각에 대해서 weight 를 적용할 수 있다는 것이다. (LinearLayout의 weight와 거의 유사하다)
width를 0dp 로 바꾸고 layout_constraintHorizontal_weight 를 1로 설정한다.
packed에서는 안됨.

xml에서 체인 작성

anchor point를 이어진 뷰들 끼리 교차시킨다. 체인의 첫번째 뷰에서 chainStyle을 작성한다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.stylingandroid.scratch.MainActivity">

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toStartOf="@+id/textView2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toStartOf="@+id/textView3"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="141dp"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

</android.support.constraint.ConstraintLayout>

Guilelines

런타임에는 보이지 않는 가상의 선

Creating a guideline

Visual editor blueprint 창에서 오른쪽 클릭을 한 다음 Helpers 메뉴 안에 있는 Add Vertical Guideline 을 선택한다.

Types of Guideline

3개의 타입이 존재한다.

부모 ConstraintLayout 의 start 모서리에서의 고정 오프셋을 가지는 타입. 디폴트
부모 ConstraintLayout 의 end 모서리에서의 고정 오프셋을 가지는 타입
부모 ConstraintLayout 의 너비에서의 위치(horizontal 의 경우 높이)를 퍼센트로 나타내는 타입

가이드라인의 타입은 가이드라인 위의 동그라미를 클릭해서 바꿀 수 있음

Using guideline

가이드라인은 다른 뷰의 Constraint 목표가 될 수 있다. 이 경우 가이드라인이 이동하면 뷰들도 같이 이동한다.

가이드라인 내부구현

Guideline 클래스는 View의 서브클래스이다. final onDraw() 메소드의 내부가 비어있기 때문에 실제로 화면에는 보이지 않는다. 고정된 visibility 값으로 View.GONE을 갖는다.

xml

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="16dp" />

android:orientation 값으로 vertical, horizontal 을 가질 수 있음 가이드라인의 타입에 따라 layout_constraintGuide_begin (dp), layout_constraintGuide_end (dp), layout_constraintGuide_percent (0과 1사이의 값)중에 한 속성을 가진다.

Dimensions

고정된 종횡비를 가지는 뷰를 만들어야 할 때 사용. layout_constraintDimensionRatio 속성 orientation, ratio 2개의 요소로 구성되어 있다.

Barrier

가이드라인과 유사하지만 배리어는 뷰들에 의해서 위치가 결정된다.

예를 들어 TextView가 3개 있다고 생각해보자. TextView3의 왼쪽에 TextView1, 2가 있고, TextView1이 2보다 더 넓다. TextView3은 TextView1의 end에 constraint를 가지고 있고 완전히 밀착된 상황이다. 이런 경우에는 문제가 없었지만, 서버에서 데이터를 가져오는 과정에서 TextView2가 1보다 더 넓어지게 되면 TextView2와 3가 겹쳐지게 된다. 이런 경우 배리어를 이용하면 1과 2 중에 더 넓은 쪽으로 맞추는 것이 가능해진다.

배리어 만들기

가이드라인처럼 blueprint에서 오른쪽 클릭 - Helper - Add vertical barrier를 선택한다.
barrierDirection을 선택하고 Component Tree에서 barrier에 포함할 View들을 barrier로 끌어다 놓으면 된다.

시리즈

❮

[Android]ConstraintLayout 기초

android

constraint

constraintlayout

layout