안드로이드(Android) 에서 ViewFlipper 을 이용해 화면 애니메이션 구현하기

안드로이드(Android) 에서 ViewFlipper 을 이용해 화면 애니메이션 구현하기

 

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

 

화면을 전환할 때 ViewFlipper 클래스를 이용하면 애니메이션 효과를

낼수가 있다. 여기에 필요한 것은 두개 이상의 뷰와 애니메이션 효과를 위해

필요한 xml 파일이 있다. 애니메이션 동작을 위한 앞과 뒤를 표현하기 위한

값인데 setInAnimation(), setOutAnimation() 에 각각 셋팅할 것들이다.

이 샘플에서는 기본적으로 제공되는 두개의 값을 사용할 것이다.

아래 두개값이 아닌 사용자 정의 XML 를 만든후 셋팅해도 된다.

 

android.R.anim.slide_in_left

android.R.animslide_out_right

 

그럼 각각의 필요한 내용들을 보기로 한다.

 

1. 메인화면 구성을 위한 activity_main.xml

 

구동을 하게 되면 총 5개의 화면이 움직이게 되는데

ViewFlipper 위젯 내부에 LinearLayout 5개가 존재하게 된다.

순서대로 버튼을 눌렀을 때 사라지고 나타나게 된다. 예제에서 보면

알겠지만 TextView, 버튼, 이미지 등 모든 위젯이 가능하다.

 

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

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

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

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

    <ViewFlipper
        android:id="@+id/viewflipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="- Button 2 -" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="LinearLayout 2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical" >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter something" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="LinearLayout 3" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ViewFlipper Project ~~~~~." />
    </ViewFlipper>

</LinearLayout>

 

2. 메인화면 소스 MainActivity.java

 

위에서도 언급했지만 애니메이션을 위한 XML 은 기본제공하는 것으로 사용했고

onClick 이벤트에서 ViewFlipper 함수인 showPrevious() 와 showNext() 를 사용하였다.

 

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnClickListener{

	Button btnPrev, btnNext;
	ViewFlipper vf;

	Animation slide_in_left, slide_out_right;

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

		btnPrev = (Button) findViewById(R.id.prev);
		btnNext = (Button) findViewById(R.id.next);
		vf = (ViewFlipper) findViewById(R.id.viewflipper);

		slide_in_left = AnimationUtils.loadAnimation(this,
				android.R.anim.slide_in_left);
		slide_out_right = AnimationUtils.loadAnimation(this,
				android.R.anim.slide_out_right);

		vf.setInAnimation(slide_in_left);
		vf.setOutAnimation(slide_out_right);

		btnPrev.setOnClickListener(this);
		btnNext.setOnClickListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	public void onClick(View v) {
		
		switch (v.getId()) {
		case R.id.prev:
			vf.showPrevious();
			break;
		case R.id.next:
			vf.showNext();
			break;
		default:
			break;
		}
		
	}

 

3. 전체소스와 화면

 

전체 소스 :       SampleViewFlipper.zip