[Android] Constraint Layout (Virtual Helpers objects)

ConstraintLayout의 경우, RelativeLayout 등에 비해 레이아웃의 구조를 상대적으로 간단하게 표현하였지만 좀 더 다양한 레이아웃을 만들기 위해 Virtual Helper object(가상 오브젝트)를 이해할 필요가 있다.

이번 포스팅에서 알아볼 가상오브젝트의 종류에는 다음 4가지가 있다.

• Guideline
• Barrier
• Group
• Placeholder

Guideline (가이드라인)

ConstraintLayout 내에서 다른 뷰의 위치를 잡는데 도움을 주는 유틸리티 클래스이다.(기본적으로 visibility는 View.GONE 상태) 수평 또는 수직으로 배치가 가능하며 두께는 기본적으로 0이다.

Guideline은 3가지 방법으로 배치가 가능하다.

1. layout_constraintGuide_begin : 좌측 또는 상단에서부터 고정된 거리를 지정
2. layout_constraintGuide_end : 우측 또는 하단에서부터 고정된 거리를 지정
3. layout_constraintGuide_percent : 레이아웃의 너비 혹은 높이의 퍼센테이지로 지정(float 형식의 값을 지정)

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

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

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Barrier

말그대로 장벽을 만들어 그 이상 뷰들이 넘어오지 못 하게 만들 수 있다.

Guideline은 수치를 입력하여 정적으로 고정된 벽을 만들었다면, Barrier는 어떤 뷰들을 기준으로 동적인 벽을 만들 수 있다.

Barrier는 다음 3가지 속성으로 사용할 수 있다.

1. barrierDirection : Barrier의 방향을 결정한다. top, bottom, start, end, left, right가 해당된다.
2. constraint_referenced_ids : 장벽의 기준점으로 참조할 뷰의 id를 여러 개 참조할 수 있다.
3. barrierAllowsGoneWidgets : 기본은 true이고 false를 설정하면 GONE으로 설정된 위젯은 무시하고 적용한다.

<androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="start"
      app:constraint_referenced_ids="button1,button2" />

Group

Group은 여러 뷰들을 참조하여, 참조된 뷰들의 visibility를 간단하게 제어할 수 있게 도와준다.

만약 여러 Group이 동시에 같은 뷰를 참조하여 뷰의 상태를 변경하려고 할 경우, 가장 마지막으로 선언된 Group의 state를 따른다.

<androidx.constraintlayout.widget.Group
       android:id="@+id/group"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:visibility="visible"
       app:constraint_referenced_ids="button4,button9" />

Placeholder

Placeholder는 이미 존재하는 객체의 위치를 지정하는 가상 오브젝트다.

다른 뷰의 id와 함께 setContent() 메서드를 이용하여 Placeholder에 적용하였다면, Placeholder는 해당 뷰(content view)를 보여준다. (기존의 content view는 GONE 상태가 된다.)

ConstraintSet

이 클래스는 ConstraintLayout와 함께 사용 될 constraint의 집합을 programmatically하게 정의할 수 있다.

constraint를 생성하고 저장하고 존재하는 ConstraintLayout에 적용할 수도 있다. ConstraintSet은 아래와 같은 방법으로 생성할 수 있다.

• Manually
  c = new ConstraintSet(); c.connect(....);
• from a R.layout.* object
  c.clone(context, R.layout.layout1);
• from a ConstraintLayout
  c.clone(clayout);

import android.content.Context;
import android.os.Bundle;
import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.transition.TransitionManager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
    ConstraintLayout mConstraintLayout; // cache the ConstraintLayout
    boolean mOld = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Context context = this;
        mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout
        setContentView(R.layout.state1);
        mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main);
        mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
    }

    public void foo(View view) {
        TransitionManager.beginDelayedTransition(mConstraintLayout);
        if (mOld = !mOld) {
            mConstraintSet1.applyTo(mConstraintLayout); // set new constraints
        }  else {
            mConstraintSet2.applyTo(mConstraintLayout); // set new constraints
        }
    }
}

참고자료

developer.android.com/reference/android/support/constraint/Guideline.html

Guideline  |  Android 개발자  |  Android Developers

developer.android.com/reference/android/support/constraint/Barrier

Barrier  |  Android 개발자  |  Android Developers

developer.android.com/reference/android/support/constraint/Group

Group  |  Android 개발자  |  Android Developers

developer.android.com/reference/android/support/constraint/ConstraintSet

ConstraintSet  |  Android 개발자  |  Android Developers

developer.android.com/reference/android/support/constraint/Placeholder

Placeholder  |  Android 개발자  |  Android Developers

https://www.charlezz.com/?p=691

Constraint Layout – Part2. 뷰의 배치를 돕는 가상 오브젝트 | 찰스의 안드로이드