안드로이드 프레임레이아웃 뷰 변경하기 3. [visibility, setVisibility()] (How to change a View in Android FrameLayout 3)

1. addView(), removeView() 함수로 FrameLayout 뷰 변경하기.

[안드로이드 프레임레이아웃 뷰 변경하기 1. [addView(), removeView()]]과 [안드로이드 프레임레이아웃 뷰 변경하기 2. [LayoutInflater]]에서 addView(), removeView() 함수를 사용하여 FrameLayout에 표시될 뷰를 변경하는 방법에 대해 살펴보았습니다.

이제 FrameLayout에 표시될 뷰(View)를 변경하는 세 번째 예제를 작성해 보겠습니다. 여기서 작성하는 예제에서는 addView()와 removeView() 함수를 사용하지 않습니다. 대신, 자식(Children) 뷰들을 미리 FrameLayout에 추가해두고, 각 뷰(View)의 visibility 속성을 사용하여 전면에 표시될 뷰(View)를 결정합니다.

2. 뷰(View)의 visibility 속성

화면에 표시되는 UI 구성 요소는 모두 View 클래스로부터 상속됩니다. 즉, 사각형(rectangle) 영역을 기준으로, 화면에 무언가를 그리는데 사용되는 기본 기능 및 사용자 이벤트 처리 기능이 정의된 클래스가 View 클래스인 것이죠.

View 클래스에는 많은 수의 속성이 존재합니다. 그 중 뷰(View)를 화면에 표시할 것인지, 감출 것인지 여부를 결정하는 속성이 있는데, 바로 visibility 속성입니다.

  * android:visibility - 뷰(View)의 보이기(visibility) 여부 지정.
        > gone, invisible, visible 중 한 가지 사용. 기본 값은 visible.
          -. gone      (0) : 뷰(View)가 없는 것처럼 취급. 화면의 공간 조차 차지하지 않음.
          -. invisible (1) : 화면에 표시되지 않음. 화면에 차지하는 공간은 그대로 유지.
          -. visible   (2) : 화면에 표시. 기본 값.

레이아웃 리소스 XML 파일에 선언된 뷰(View) 위젯에 visibility 속성을 사용하면, 해당 뷰(View)가 최초에 화면에 표시될 것인지 여부를 지정할 수 있습니다. 그리고 Java 코드에서는 setVisibility() 함수를 사용해서 뷰(View)의 보이기(visibility) 설정을 변경할 수 있습니다.

setVisibility() 함수에 전달되는 파리미터에는 visibility 속성 값과 매칭되는 상수가 전달되는데, 각각 GONE, INVISIBLE, VISIBLE 입니다.

파라미터	visibility	설명
View.GONE	gone	View가 보이지 않음. 레이아웃 영역 차지 안함.
View.INVISIBLE	invisible	View가 보이지 않음. 하지만 레이아웃을 위한 영역 차지함.
View.VISIBLE	visible	View가 화면에 보임.

3. FrameLayout 뷰(View) 변경하기

이제 FrameLayout 자식(Children) 뷰의 visibility 속성을 사용하여 전면에 표시되는 뷰(View)를 변경하는 방법에 대해 설명하겠습니다.

예제의 화면은 이전 예제들 [안드로이드 프레임레이아웃 뷰 변경하기 1. [addView(), removeView()]], [안드로이드 프레임레이아웃 뷰 변경하기 2. [LayoutInflater]] 와 동일한 레이아웃으로 구성됩니다.

3.1 MainActivity의 레이아웃 구성.

예제 작성에서 처음 할 일은 MainActivity에 표시될 레이아웃 리소스 XML을 작성하는 것입니다. 특히, FrameLayout에 표시될 뷰(View)가 FrameLayout의 자식(Children)으로 추가되고, 최초 화면에 표시될 뷰(View)를 제외한 다른 뷰(View)들의 visibility 속성 값이 "invisible"로 되어 있음을 주의하세요.

[STEP-1] "activity_main.xml" - MainActivity의 레이아웃 구성.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.recipes4dev.examples.framelayoutchangingview3.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:id="@+id/linear">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Text 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Text 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Text 3" />

    </LinearLayout>


    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/frame"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linear"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#4CAF50"
            android:gravity="center"
            android:id="@+id/text1"
            android:text="TEXT 1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF9800"
            android:gravity="center"
            android:id="@+id/text2"
            android:text="TEXT 2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#009688"
            android:gravity="center"
            android:id="@+id/text3"
            android:text="TEXT 3" />

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

3.2 각 버튼 클릭 이벤트 처리.

다른 예제들과 마찬가지로, 화면에 배치된 버튼의 클릭 이벤트를 작성합니다. 각 버튼 클릭 이벤트 함수에서는 changeView() 함수를 호출합니다.

[STEP-2] "MainActivity.java" - onCreate() 함수에서 각 버튼 클릭 이벤트 처리.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // ... 코드 계속

        Button button1 = (Button) findViewById(R.id.button1) ;
            button1.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeView(0) ;
            }
        });

        Button button2 = (Button) findViewById(R.id.button2) ;
            button2.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeView(1) ;
            }
        });

        Button button3 = (Button) findViewById(R.id.button3) ;
            button3.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeView(2) ;
            }
        });

        // 코드 계속 ...
    }
}

3.3 FrameLayout에 표시될 뷰 변경 코드 작성.

이제 FrameLayout에 표시될 뷰(View)를 변경하는 changeView() 함수를 작성합니다. 각 자식(Children) 뷰를 화면에 표시할 것인지 여부는 View 클래스의 setVisibility() 함수를 사용합니다.

[STEP-3] "MainActivity.java" - FrameLayout에 표시될 뷰 변경 코드 작성.

public class MainActivity extends AppCompatActivity {

    private void changeView(int index) {

        // 자식(Children) 뷰들에 대한 참조 획득.
        TextView textView1 = (TextView) findViewById(R.id.text1) ;
        TextView textView2 = (TextView) findViewById(R.id.text2) ;
        TextView textView3 = (TextView) findViewById(R.id.text3) ;

        // index에 따라 자식(Children) 뷰 들의 visibility 설정.
        switch (index) {
            case 0 :
                textView1.setVisibility(View.VISIBLE) ;
                textView2.setVisibility(View.INVISIBLE) ;
                textView3.setVisibility(View.INVISIBLE) ;
                break ;
            case 1 :
                textView1.setVisibility(View.INVISIBLE) ;
                textView2.setVisibility(View.VISIBLE) ;
                textView3.setVisibility(View.INVISIBLE) ;
                break ;
            case 2 :
                textView1.setVisibility(View.INVISIBLE) ;
                textView2.setVisibility(View.INVISIBLE) ;
                textView3.setVisibility(View.VISIBLE) ;
                break ;
        }
    }
}

3.4 앱 시작 시, FrameLayout에 표시될 자식 뷰 결정.

마지막으로, MainActivity의 onCreate() 함수에서 changeView(0)를 호출하여, 앱 시작 시 첫 번째 뷰(View)가 표시되도록 만듭니다.

[STEP-4] "MainActivity.java" - onCreate() 함수에서 최초 FrameLayout에 표시될 뷰 결정.

public class MainActivity extends AppCompatActivity {

    // ... 코드 계속

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // ... 코드 계속

        // 첫 번째 뷰 표시.
        changeView(0) ;
    }
}

4. 예제 실행 화면

예제를 실행하면 아래와 같은 화면이 표시됩니다.

그리고 버튼을 클릭하면, 클릭된 버튼의 순서에 따른 TextView가 FrameLayout에 번갈아 표시됩니다.

5. 참고.

• 개발자 레시피 - 프레임레이아웃(FrameLayout)
  • [안드로이드 프레임레이아웃(Android FrameLayout)]을 참고하세요.
  • [안드로이드 프레임레이아웃 뷰 변경하기 1. [addView(), removeView()]]을 참고하세요.
  • [안드로이드 프레임레이아웃 뷰 변경하기 2. [LayoutInflater]]을 참고하세요.
• FrameLayout에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 FrameLayout]을 참고하세요.
• LayoutInflater에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 LayoutInflater]을 참고하세요.
• 개발자 레시피 - 레이아웃 관련 항목
  • [안드로이드 레이아웃 (Android Layout)]을 참고하세요.
  • [안드로이드 레이아웃 공통사항 (Android Layout Common)]을 참고하세요.
  • [안드로이드 리니어레이아웃 (Android LinearLayout)]을 참고하세요.
  • [안드로이드 렐러티브레이아웃 (Android RelativeLayout)]을 참고하세요.
• 레이아웃에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 레이아웃 항목]을 참고하세요.

.END.