[안드로이드] Virtual Helpers objects (Guideline, Barrier, Group, Placeholder)

 

안드로이드 -  Virtual helpers objects (Guideline, Barrier, Group, Placeholder)

 

이전 글에서 ConstraintLayout을 사용할 때, 화면 구성을 위해 사용할 수 있는 제약 유형을 알아보고 그에 대한 속성과 사용방법에 대해서 알아보았습니다. 

이번 글에서는 ConstrainLayout을 사용하여 화면 구성을 할 때, ConstraintLayout 안에 포함된 뷰들의 화면 배치를 도와주는 Virtual helpers objects 4가지 Guideline, Barrier, Group, Placeholder에 대해서 알아보도록 하겠습니다. 

 

 

   목차

1. Guideline 속성 및 사용방법
2. Barrier 속성 및 사용방법
3. Group 속성 및 사용방법
4. Placeholder 속성 및 사용방법

 

 

1. Guideline 속성 및 사용방법

 

Guideline은 뷰의 화면 배치를 도와주는 기준선으로 화면에 보이지는 않지만 다른 뷰의 화면 배치시 참조 역할을 할 수 있습니다. GuideLine은 수평방향과 수직방향 두가지가 있으며, 두께는 0dp입니다. 

1. orientation : 수평(horizontal)방향과 수직(vertical)방향 중 생성할 Guideline의 방향을 설정합니다. 
2. layout_constraintGuide_begin : 레이아웃의 왼쪽 또는 위쪽으로부터 Guideline이 배치될 거리를 지정합니다. 
3. layout_constraintGuide_end : 레이아웃의 오른쪽 또는 아래쪽으로부터 Guideline이 배치될 거리를 지정합니다. 
4. layout_constraintGuide_percent : 레이아웃의 넓이 또는 높이에 비례하여 Guideline이 배치될 위치를 지정합니다. (0~1)

 

[예제] 아래 그림은 수직 방향의 Guideline 두개와 수평 방향의 Guideline 한개를 만든 뒤, 이를 이용하여 TextView의 위치와 크기를 지정하는데 사용한 예제입니다. 

 

ConstraintLayout - Guideline 사용예제

 

 

 

2. Barrier 속성 및 사용방법

 

Barrier는 뷰가 넘어가지 못하도록 장벽 역할을 할 수 있는 동적 기준선을 생성합니다. Barrier의 constraint_referenced_ids 속성에 여러 뷰를 지정하게 되면 지정된 뷰들을 기준으로 선택한 방향(barrierDirection)의 최외곽 라인에 맞춰 가상의 guideline이 생성됩니다. 이 guideline은 등록된 뷰의 크기에 따라 동적으로 조절되며 앞서 설명한 Guideline과 마찬가지로 다른 뷰에서 화면 배치시 참조 역할을 할 수 있습니다.

1. barrierDirection : Barrier 설정 방향을 지정합니다. 
2. constraint_referenced_ids : Barrier 설정의 기준이 되는 뷰를 등록합니다. 
3. barrierMargin : Barrier 생성시 해당 크기의 margin(여백)을 주어 생성합니다.  

 

[예제] 아래 그림은 Barrier 객체에 TextView인 tv1, tv2를 지정하여 가상의 guideline을 생성 후, 이를 이용하여 버튼 뷰의 위치를 지정하는데 사용한 예제입니다.

Barrier에 지정된 뷰 tv1, tv2 중에 오른쪽 방향으로 tv2 객체가 가장 최외곽에 위치하고 있으므로 이를 기준으로 가상의 guideline이 형성된 것을 볼 수 있습니다. 

ConstraintLayout - Barrier 사용예제

 

Barrier의 경우 지정된 뷰의 크기에 따라 guideline이 생성되어 활용할 수 있다는 것을 확인하였습니다. 그런데 만약 Barrier 설정을 위해 지정된 뷰가 사라졌을 경우(View.GONE)에는 어떻게 동작하는지 확인할 필요가 있습니다. 또한 지정된 뷰가 사라졌을 때 Barrier를 유지할지 여부를 선택할 수 있는 옵션에 대해서도 함께 알아보도록 하겠습니다. 

 

1. barrierAllowsGoneWidgets : Barrier 설정시 지정된 뷰가 사라진 경우(View.GONE) Barrier를 유지할지를 결정합니다.

[예제] 아래 그림은 Barrier에 지정된 뷰가 사라졌을 경우(View.GONE)에 barrierAllowsGoneWidgets 속성에 따른 동작의 변화를 확인하는 예제입니다.

아래 그림의 2번째 예제를 살펴보면 Barrier에 지정된 "tv2" 뷰의 visibility가 gone이 되었을 경우, 해당 뷰의 width와 height는 0dp로 화면에 나타나진 않지만 해당 뷰의 위치를 포함하여 Barrier가 생성됩니다. (현재 "tv2" 뷰는 중앙정렬된 상태임)

이때, visibility가 gone인 뷰에 대해서는 Barrier 설정시 배제하고 싶다면 3번째 예제와 같이 barrierAllowsGoneWidgets 속성에 false를 적용하시면 됩니다. 

 

ConstraintLayout - barrierAllowsGoneWidgets 속성

 

반응형

 

3. Group 속성 및 사용방법

 

Group은 xml상에서 여러 뷰들을 하나로 묶어 visibility 속성을 한번에 적용시킬 수 있습니다. 

 

1. constraint_referenced_ids : Group에 포함 시킬 뷰를 등록합니다.

 

[예제] 아래 예제는 TextView인 tv1, tv2, tv3 객체 중 tv1와 tv3 객체를 그룹화하여 visibility 속성을 변화시킨 예제로 Group의 visibility 속성을 invisible로 적용시켰을 경우 해당 Group에 등록된 tv1, tv2 객체가 invisible 상태가 되어 화면에서 사라진 것을 확인하실 수 있습니다. 

 

ConstraintLayout - Group 사용예제

 

 

 

4. Placeholder 속성 및 사용방법

 

Placeholder는 이미 화면에 배치된 상태의 뷰를 다른곳으로 이동시켜 재배치할 때 사용할 수 있습니다. 이때 재배치 되는 과정에서 기존 위치에 있는 뷰는 visibility 속성이 gone으로 적용된 것처럼 다루어집니다.

 

1. setContentId(int id) : 코드에서 id값으로 뷰 객체의 id를 전달하면 해당 뷰가 placeholder에 배치됩니다. 

[예제] 아래 예제에서 버튼1, 버튼2, 버튼3은 서로 체인으로 묶여 있고, onClick 메소드를 통해 Placeholder 위치에 재배치 되도록 구성한 예제입니다. 

버튼을 누르게 되면 해당 버튼은 Placeholder 위치로 재배치 되며, 기존 버튼의 자리는 visibility 속성이 gone인 것처럼 동작하게 됩니다. 또한 다른 버튼을 클릭하여 Placeholder 자리에 다른 버튼이 위치하게 되면 Placeholder 자리에 있던 버튼은 다시 원래의 위치로 되돌아 가는 것을 확인할 수 있습니다. 

 

ConstraintLayout - Placeholder 사용예제

 

ConstraintLayout - Placeholder 사용예제 실행시 동작

 

1) MainActivity.java 

public class MainActivity extends AppCompatActivity {
    int state = 0;
    Placeholder placeholder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        placeholder = findViewById(R.id.placeHolder);
    }

    public void onClick(View view) {
        placeholder.setContentId(view.getId());
    }
}

 

2) activity_main.xml

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

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeHolder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D32F2F"
        android:gravity="center"
        android:padding="8dp"
        android:text="버튼1"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:layout_marginTop="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn2"
        android:onClick="onClick"  />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#303F9F"
        android:gravity="center"
        android:padding="8dp"
        android:text="버튼2"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:layout_marginTop="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintRight_toLeftOf="@+id/btn3"
        android:onClick="onClick"  />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#388E3C"
        android:gravity="center"
        android:padding="8dp"
        android:text="버튼3"
        android:textSize="24dp"
        android:textColor="@color/white"
        android:layout_marginTop="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        app:layout_constraintRight_toRightOf="parent"
        android:onClick="onClick"  />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFD180"
        android:gravity="center"
        android:padding="8dp"
        android:text="버튼4"
        android:textSize="24dp"
        android:layout_marginTop="250dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:onClick="onClick"  />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

cf) ConstraintLayout의 제약유형별 속성 및 사용방법은 아래 링크를 참고하세요

 

2022.08.24 - [IT 개발/Android] - [안드로이드] ConstraintLayout 제약유형별 속성 및 사용방법

[안드로이드] ConstraintLayout 제약유형별 속성 및 사용방법