[Java][Android] Visibility 속성으로 View 숨기기

Visibility란?

뷰의 가시성 상태로, 속성에따라 뷰를 숨기거나 보여줄 수 있습니다.

 

Visible = 화면에 보이는 상태 

Invisible = 화면에 보이진 않지만, 레이아웃에 자리를 차지하고 있는 상태

Gone = 완전히 숨겨진 상태

https://developer.android.com/reference/android/view/View#attr_android:visibility

 

예제

Visibility 세가지 속성의 차이를 알아보기 위해, 버튼 세개와 텍스트뷰 3개를 레이아웃에 만들어보겠습니다.

각 버튼을 클릭하면 두번째 버튼이 보이게 하거나, 숨길 수 있는 예제를 만들겠습니다.

<activity_main.xml>

스틱코드를 활용하여 버튼과 텍스트뷰를 추가합니다. 

버튼은 bu 까지만 입력하면 Button XML 기본 코드가 생성되고,

텍스트뷰는 te 까지만 입력하면 TextView XML 기본 코드가 생성됩니다.

스틱코드를 활용하여 추가된 Button, TextView의 XML 기본 코드입니다.

이제, 보여주고자 하는 모습에 맞춰 코드를 조금씩 수정합니다.

세 가지(Visible, Invisible, Gone)의 Visibility 속성 이름은 각 버튼의 android:text 속성에 작성해줍니다.

텍스트 뷰에는 원하는 텍스트를 넣고, 배경을 추가했습니다.

하단은 activity_main.xml 전체 코드입니다.

<?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/buttonVisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Visible"
        app:layout_constraintEnd_toStartOf="@+id/buttonInvisible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonInvisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Invisible"
        app:layout_constraintEnd_toStartOf="@+id/buttonGone"
        app:layout_constraintStart_toEndOf="@+id/buttonVisible"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonGone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/buttonInvisible"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView1st"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="첫번째"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonInvisible" />

    <TextView
        android:id="@+id/textView2nd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="두번째"
        android:textSize="30sp"
        android:background="@color/colorAccent"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1st" />

    <TextView
        android:id="@+id/textView3rd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="세번째"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2nd" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

<MainActivity>

 

뷰의 Visibility 속성을 확인해보기 위해, 2번째 텍스트뷰를 숨기고, 나타나게 하도록 만들겠습니다.

두번째 텍스트

스틱코드를 활용하고 있다면 fin 까지만 작성해도 findViewById 코드를 쉽게 작성할 수 있습니다. 

XML 에서 만든 3개의 버튼에도 클릭리스너를 설정해줍니다.

but 까지 작성하면 나오는 button - 버튼 클릭 이벤트 를 활용하면 쉽게 작성할 수 있습니다.

 

스틱코드를 활용한 코드를 자신의 상황에 맞게 수정해봅니다. 

 

각 버튼의 이름에 맞게, 두번째 텍스트 뷰의 Visibility 속성이 바뀌도록 코드를 추가합니다.

visibil 까지만 작성하면 visibility를 설정할 수 있는 코드 목록이 나옵니다.

 

완성된 Main Activity 코드입니다.

public class MainActivity extends AppCompatActivity {

    TextView textView2nd;

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

        textView2nd = findViewById(R.id.textView2nd);

        Button buttonVisible = (Button) findViewById(R.id.buttonVisible);

        buttonVisible.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              textView2nd.setVisibility(View.VISIBLE);
          }
        });

        Button buttonInvisible = (Button) findViewById(R.id.buttonInvisible);

        buttonInvisible.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              textView2nd.setVisibility(View.INVISIBLE);
          }
        });

        Button buttonGone = (Button) findViewById(R.id.buttonGone);

        buttonGone.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              textView2nd.setVisibility(View.GONE);
          }
        });
    }
}

앱을 실행해보겠습니다. 

INVISIBLE 버튼을 누르면 두번째 텍스트뷰가 화면에서 사라지지만,

기존 텍스트뷰 자리를 차지하고 있는 걸 알 수 있습니다.

GONE 버튼을 누르면 두번째 텍스트뷰가 화면에서 사라지고, 세번째 텍스트뷰가 첫번째 텍스트뷰 바로 뒤에 오는 것을 알 수 있습니다.