안드로이드(android) FrameLayout 을 이용해서 이미지 뷰 전환하기

안드로이드(android) FrameLayout 을 이용해서 이미지 뷰 전환하기

 

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

 

FrameLayout 을 사용해서 샘플을 만들어 보았다. 구현한 샘플은 여러가지

이미지를 전환하는 것이다. 버튼을 이용해서 앞,뒤로 이미지를 볼수 있는데

FrameLayout 에 ImageView 추가해 놓고 번갈아 가며 VISIBLE, INVISIBLE

속성값을 변경한다. 이렇게 속성값을 변경해 가면 이미지를 변경해서 볼수 있다.

 

1. 레이아웃 설정

 

FrameLayout 안에 3개의 ImageView 위젯을 넣는다. 여기에 포함된 3개의

위젯을 VISIBLE, INVISIBLE 사용해 이미지가 전환되는 기능을 구현하는 것이다.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/btnPrev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Prev" />

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Next" />

    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/layout_color"
        android:padding="2dp" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/imageview_back"
            android:padding="2dp"
            android:visibility="visible"
            android:src="@drawable/view01" />
        
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/imageview_back"
            android:padding="2dp"
            android:visibility="invisible"
            android:src="@drawable/view02" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/imageview_back"
            android:padding="2dp"
            android:visibility="invisible"
            android:src="@drawable/view03" />
        
    </FrameLayout>

</LinearLayout>

 

2. 소스에서 이미지 전환을 위해 옵션 셋팅

 

화면에서 Prev, Next 버튼을 클릭할 때 이미지가 앞뒤로 전환되게 되는데

ImaveView 속성중 setVisibility() 함수를 사용한다. 파라미터로 View.INVISIBLE,

View.VISIBLE 를 넘겨주면 된다.

 

public void onClick(View v) {
switch (v.getId()) {
	case R.id.btnNext:
		if (imageIndex < 2 ) {
			imageIndex ++;
		}
		changeImage();
		break;
		
	case R.id.btnPrev:
		if (imageIndex > 0){
			imageIndex --;
		}
		changeImage();
		break;

	default:
		break;
	}
}

private void changeImage(){
	if (imageIndex == 0) {
		mImgView01.setVisibility(View.VISIBLE);
		mImgView02.setVisibility(View.INVISIBLE);
		mImgView03.setVisibility(View.INVISIBLE);
		
	}else if (imageIndex == 1){
		mImgView01.setVisibility(View.INVISIBLE);
		mImgView02.setVisibility(View.VISIBLE);
		mImgView03.setVisibility(View.INVISIBLE);
		
	}else if (imageIndex == 2){
		mImgView01.setVisibility(View.INVISIBLE);
		mImgView02.setVisibility(View.INVISIBLE);
		mImgView03.setVisibility(View.VISIBLE);
		
	}
}

 

3. 결과 화면과 전체 소스

 

전체 소스 :      FrameLayoutSample.zip