Visibility 속성

1. Visibility 속성이란?

앱을 만들다보면 사용자가 어떠한 상호작용을 했을

View의 변화가 일어나야 하는 상황들이 빈번하게 있다.

( ex 버튼을 눌렀을때 어떠한 특정 view를 숨김 처리 할때 )

 

이런 특정 상황들에 변화를 줄때 설정하는것이 visibility 속성이다.

 

이러한 visibility 의 속성은 3가지가 있다.

 

2. Visibility 속성의 종류

visible : 해당 view가 보이는 상태

invisible : 해당 view가 보이지는 않지만 view의 영역은 남아있는 상태

gone : 해당 view가 보이지도 않고 view의 영역도 남아있지 않은 상태

 

3. 예제

기본적으로 View의 visibility 속성은 layout의 xml 파일에서 view의 초기 visibility를 지정해 줄 수도 있고,

특정상황에 따라서 Activity 코드에서도 View의 속성을 바꿔줄 수 도 있다.

 

이번 예제는 버튼을 눌렀을때 현재 있는 TextView를 invisible , gone 처리를 해보는 예제를 보자.

 

먼저 invisible에 관한 예제다.

 

 

레이아웃 xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello Sam!"
        android:textSize="50sp"
        android:gravity="center"
        android:layout_weight="1"
        />

    <LinearLayout
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonHide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="View 숨기기"/>

        <Button
            android:id="@+id/buttonVisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="View 나타내기"/>

    </LinearLayout>


</LinearLayout>

 

 

액티비티

package com.example.visibilitytest

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    lateinit var textView: TextView
    lateinit var buttonHide: Button
    lateinit var buttonVisible: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // View 초기화
        textView = findViewById(R.id.textView)
        buttonHide = findViewById(R.id.buttonHide)
        buttonVisible = findViewById(R.id.buttonVisible)

        // 숨기기 버튼 눌렀을 때
        buttonHide.setOnClickListener {

            // textView를 INVISIBLE 처리 해준다.
            textView.visibility = View.INVISIBLE

        }

        // 나타내기 버튼 눌렀을 때
        buttonVisible.setOnClickListener {

            // textView를 VISIBLE 처리 해준다.
            textView.visibility = View.VISIBLE

        }

    }

}

 

 

레이아웃에 관한 내용으로는 weight를 이용해 invisible과 gone의 차이를 알기 위해서 weight를 1로 주었다.

이렇게 코드를 작성하고 실행을 해보게 되면

 

실행 결과

숨기기 버튼 눌렀을 때

 

 

나타내기 버튼 눌렀을 때

 

 

실행결과를 보고 알 수 있듯이 기존에 TextView가 차지하고 있던 영역은 그대로

유지되면서 textView가 숨김처리 된것을 볼 수 있다.

 

그렇다면 gone 속성으로 처리를 하면 어떻게 될까?

기존 액티비티 코드에서 buttonHide 쪽의 visiblity 속성을 gone으로 바꿔보자.

package com.example.visibilitytest

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    lateinit var textView: TextView
    lateinit var buttonHide: Button
    lateinit var buttonVisible: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textView = findViewById(R.id.textView)
        buttonHide = findViewById(R.id.buttonHide)
        buttonVisible = findViewById(R.id.buttonVisible)


        buttonHide.setOnClickListener {

            // View를 gone 처리 해준다.
            textView.visibility = View.GONE

        }

        buttonVisible.setOnClickListener {

            textView.visibility = View.VISIBLE

        }

    }

}

 

 

 

실행 결과

숨기기 버튼 눌렀을 때

나타내기 버튼 눌렀을 때

 

두가지 실행 결과를 통해 invisible과 gone의 차이를 볼 수 있다.

 

gone처리를 했을 때에는 기존 textView의 영역 전부가 숨김처리가 되고

버튼이 있는 레이아웃의 weight만 적용된걸 볼 수 있다.

 

 

이러한 view의 Visibility 속성을 이해하고 있다면 다양한 기능을 만들 수 있다고 생각하고

필자의 경우에도 visibility 속성을 이용해 다양한 상황들을 꽤나 유연하게 만든 경우가 많다.

어떻게 사용하냐에 따라서 굉장히 많은것들을 할 수 있다고 생각한다.