[안드로이드] 뷰플리퍼를 통한 슬라이드 구현

참고 주소 : http://www.inter-fuser.com/2009/07/android-transistions-slide-in-and-slide.html 

뷰 플리퍼를 통한 슬라이드를 구현해보자. 일단 뷰플리퍼를 통한 뷰들을 받을 메인 레이아웃이 필요한다

.해당 액티비티에 아래와 같은 xml을 setContentView 해야한다.

 <?xml version="1.0" encoding="utf-8"?><ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/flipper"android:layout_width="fill_parent"android:layout_height="fill_parent"><include android:id="@+id/first" layout="@layout/first_view" /><include android:id="@+id/second" layout="@layout/second_view" /></ViewFlipper>

이 이외에 위 xml에 들어가는 first_view.xml과 second_view,xml 이 필요하다. 이렇게 하면 이 두 뷰가 슬라이드 된다. 

플리퍼는 두 뷰를 교체를 하게하고 뷰 플리퍼에 슬라이드 애니메이션 효과를 줌으로써 슬라이드가 완성이된다.

 애니매이션 코드는 아래와 같다. 일단 오른쪽에서 왼쪽으로 슬라이드 되는 애니매이션 효과이다.

private Animation inFromRightAnimation() {Animation inFromRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);inFromRight.setDuration(500);inFromRight.setInterpolator(new AccelerateInterpolator());return inFromRight;}private Animation outToLeftAnimation() {Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);outtoLeft.setDuration(500);outtoLeft.setInterpolator(new AccelerateInterpolator());return outtoLeft;}

아래 코드는 왼쪽에서 오른쪽으로 슬라이드 되는 애니메이션 효과이다

 private Animation inFromLeftAnimation() {Animation inFromLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);inFromLeft.setDuration(500);inFromLeft.setInterpolator(new AccelerateInterpolator());return inFromLeft;}private Animation outToRightAnimation() {Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);outtoRight.setDuration(500);outtoRight.setInterpolator(new AccelerateInterpolator());return outtoRight;}

이렇게 적은후 클래스를 작성하자. 

 package com.example.viewflipper;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.animation.AccelerateInterpolator;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ViewFlipper;public class Slide extends Activity {ViewFlipper flipper;private Animation inFromRightAnimation() {Animation inFromRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);inFromRight.setDuration(500);inFromRight.setInterpolator(new AccelerateInterpolator());return inFromRight;}private Animation outToLeftAnimation() {Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);outtoLeft.setDuration(500);outtoLeft.setInterpolator(new AccelerateInterpolator());return outtoLeft;}private Animation inFromLeftAnimation() {Animation inFromLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);inFromLeft.setDuration(500);inFromLeft.setInterpolator(new AccelerateInterpolator());return inFromLeft;}private Animation outToRightAnimation() {Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);outtoRight.setDuration(500);outtoRight.setInterpolator(new AccelerateInterpolator());return outtoRight;}/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.flipper); Button button1 = (Button) findViewById(R.id.Button01); Button button2 = (Button) findViewById(R.id.Button02); button1.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { flipper.setInAnimation(inFromRightAnimation()); flipper.setOutAnimation(outToLeftAnimation()); flipper.showNext(); } }); button2.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { flipper.setInAnimation(inFromLeftAnimation()); flipper.setOutAnimation(outToRightAnimation()); flipper.showPrevious(); } });}}