Proo

꾸준함 유지




아래 내용은 Android Developer 공식 문서와 recipes4dev님의 블로그, EMU(Eastern Mediterranean University) 제공 문서] 내용을 참고하여 작성한 자습 기록입니다.



📚ConstraintLayout 정리(6) - Visibility behavior

이번에는 대상 뷰의 Visibility 속성에 따른 뷰의 위치 변화에 대해서 알아보고자 한다.

View의 Visibility 속성은 3가지 값을 갖고 있다.

  • View.VISIBLE
  • View.INVISIBLE
  • View.GONE

각각의 상태에 따라 뷰가 레이아웃에 표시되는 방법이 모두 다르다. 코드와 함께 보도록 하자.


📔 대상 뷰가 View.VISIBLE 상태인 경우


대상 뷰의 android:visibility 속성 값이 ‘VISIBLE’일 때에는 일반적으로 뷰가 보이는 방식과 같다. 코드와 함께 확인해 보자.

코드 상에는 버튼 button1과 button2가 있다. button1의 android:visibility 속성 값이 visible인 경우, View.VISIBLE이 기본 값이므로 해당 속성을 사용하지 않고 코드를 작성했을 때와 차이가 없다. UI 또한 button1과 button2가 온전히 잘 보이는 것을 볼 수 있다.

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

    <Button
        android:id="@+id/button1"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:visibility="visible"
        android:text="button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:text="button2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintTop_toTopOf="@id/button1" />

</androidx.constraintlayout.widget.ConstraintLayout>


📔 대상 뷰가 View.INVISIBLE 상태인 경우

다음으로 INVISIBLE 상태의 경우, 위의 코드에서 android:visibility 속성 값만 INVISIBLE로 변경해 주었다. 결과를 보면, button1이 사라졌지만 button2의 위치는 위와 동일한 위치에 배치되어 있는 것을 볼 수 있다. 즉, 해당 상태의 경우 button1이 사라지기만 할 뿐 button1이 차지하고 있던 공간, button1과 button2의 제약, 여백 지정에는 변함이 없다.

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

    <Button
        android:id="@+id/button1"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:visibility="invisible"
        android:text="button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:text="button2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintTop_toTopOf="@id/button1" />

</androidx.constraintlayout.widget.ConstraintLayout>


📔 대상 뷰가 View.GONE 상태인 경우


마지막으로 View.GONE 상태의 경우 View.VISIBLE, View.INVISIBLE의 결과와 또 다른 결과가 보이는데, button1의 경우 ui 상에서 잠시 사라진 상태가 되고, 앞서 View.INVISIBLE 상태와 달리 button2와의 제약, 여백 등도 모두 잠시 사라진 상태가 된다. 이에 따라 button2가 button1의 위치를 대체하고 해당 위치에서 자신의 여백 값이 적용된 것을 볼 수 있다.

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

    <Button
        android:id="@+id/button1"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:visibility="gone"
        android:text="button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginStart="30dp"
        android:text="button2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintTop_toTopOf="@id/button1" />

</androidx.constraintlayout.widget.ConstraintLayout>

만약 button1의 android:visibility 속성의 값을 gone으로 처리하고 button2이 button1의 위치를 대체하게 되면서 button1이 가지고 있던 레이아웃으로의 여백 값이 적용되길 원한다면, 저번 시간에 살펴보았던 [뷰의 android:visibility 속성 값이 gone 상태일 때, Margin 사용] 이 부분을 참고하면 될 것이다.

참고