[Android] 안드로이드 레이아웃:Frame Layout

안드로이드 정리노트 #5 안드로이드 레이아웃

(Android Layout:Frame Layout)

@Frame Layout

- Frame이 중첩된 레이아웃으로 보면 이해하기 쉽다. 레이아웃내의 뷰들이 중첩된다.

- 실제 예시를 보면 이해하기 쉽다.

- <예시>

- 전체의 Linear Layout에서 상단에는 버튼을 두고, 하단부에는 이미지뷰를 두고자 한다.

- 하단의 이미지뷰 자리에는 FrameLayout을 적용하여 2개의 이미지뷰가 중첩된 상태로 둔다.

- 버튼을 클릭할때마다 중첩된 이미지뷰에서 하나의 이미지뷰만이 번갈아 보이게 한다.

- <xml코드>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".secondActivity"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_ChangeImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이미지 변경"/>

    <!--이미지가 중첩된 레이아웃-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/image01"
            android:visibility="visible"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/image02"
            android:visibility="invisible"/>

    </FrameLayout>

</LinearLayout>

- <java코드>

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class secondActivity extends AppCompatActivity {

    // 1일 경우 이미지 1번이 보여지는 상태, 2일 경우 2번이 보여지는 상태로 정의
    int statusImage = 1;

    Button btnChangeImage;
    ImageView imageView1;
    ImageView imageView2;

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

        // 중첩된 이미지뷰의 이미지의 visibility 속성을 바꿀 버튼 객체참조
        btnChangeImage = (Button) findViewById(R.id.btn_ChangeImage);

        // 프레임 레이아웃에 위치한 이미지뷰 객체 참조
        imageView1 = (ImageView) findViewById(R.id.imageView1);
        imageView2 = (ImageView) findViewById(R.id.imageView2);

        // 버튼 클릭리스너
        btnChangeImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 1번이 보여지는 상태이면, 1번: invisible, 2번: visible로 변경
                if(statusImage==1){
                    imageView1.setVisibility(View.INVISIBLE);
                    imageView2.setVisibility(View.VISIBLE);
                    statusImage = 2;
                // else의 경우 2번이 보여지는 상태이므로 1번: visible, 2번: invisible로 변경
                }else {
                    imageView2.setVisibility(View.INVISIBLE);
                    imageView1.setVisibility(View.VISIBLE);
                    statusImage = 1;
                }
            }
        });
    }
}

- <결과>

- 버튼을 클릭할 때마다 1, 2번 이미지가 번갈아 보이게 된다.

- 이미지뷰 변경은 Frame Layout에서 중첩된 뷰 환경을 구성하는 것 이외에도, setImageResource() 메소드를 사용하는 방법도 있다.