안드로이드 - ViewFlipper 사용하기

아이폰이나 안드로이드 어플들을 사용하다보면, 화면을 왼쪽 또는 오른쪽으로 드래그했을때,
화면이 휙휙 슬라이딩 되는 것처럼 전환되는 것들을 볼 수 있습니다.

ViewFlipper은 이러한 효과를 더 손쉽게 사용할 수 있도록 제공해줍니다.

ViewFlipperExample.zip

ViewFlipper를 사용한 예제와는 조금 다르지만, 이런 효과를 구현할 수 있습니다.

ViewFlipper은 FrameLayout을 상속받습니다.

FrameLayout은 AbsoluteLayout과 비슷하게 Layout안의 각각의 View 들이 서로 좌표를 겹쳐서 가집니다.
(나중에 그려진 View가 먼저 그려진 View를 덮어 버립니다.) 이 점을 주의해야 합니다.

View를 좌우로 밀었을 때의 애니메이션 효과를 미리 만들어줍니다.
이전에 다루었던 애니메이션 부분들과 어느 정도 이어집니다.

[안드로이드] Layout을 통해 Tween Animation 구현하기 (투명도 조절) - http://snowbora.com/390
[안드로이드] Layout을 통해 Tween Animation 구현하기 (개체 움직임) - http://snowbora.com/391
[안드로이드] Layout을 통해 Tween Animation 구현하기 (Set 태그) - http://snowbora.com/392

appear_from_left.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:fromXDelta="-100%p"

android:toXDelta="0%p"

android:duration="500"/>

<alpha

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration="500" />

</set>

appear_from_right.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:fromXDelta="100%p"

android:toXDelta="0%p"

android:duration="500"/>

<alpha

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration="500" />

</set>

disappear_to_left.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:fromXDelta="0%p"

android:toXDelta="-100%p"

android:duration="500"/>

<alpha

android:fromAlpha="1.0"

android:toAlpha="0.0"

android:duration="500" />

</set>

disappear_to_right.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:fromXDelta="0%p"

android:toXDelta="100%p"

android:duration="500"/>

<alpha

android:fromAlpha="1.0"

android:toAlpha="0.0"

android:duration="500" />

</set>

그리고 main.xml을 작성해봅니다.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"/>

<ViewFlipper

android:id="@+id/viewFlipper"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/view1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_gravity="center"

android:text="View 1"

android:textSize="30px"/>

<Button

android:id="@+id/view2"

android:src="@drawable/icon"

android:text="View 2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<ImageView

android:id="@+id/view3"

android:src="@drawable/icon"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_gravity="center"/>

</ViewFlipper>

</LinearLayout>

마지막으로 actViewFlipper.java 파일에 다음과 같은 코드를 입력합니다.

package View.Flipper;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
 
public class actViewFlipper extends Activity {
    private ViewFlipper m_viewFlipper;
     
    private int m_nPreTouchPosX = 0;
     
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
         
        m_viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
        m_viewFlipper.setOnTouchListener(MyTouchListener);
    }
     
    private void MoveNextView()
    {
        m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_right));
        m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_left));
        m_viewFlipper.showNext();
    }
     
    private void MovewPreviousView()
    {
        m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_left));
        m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_right));
        m_viewFlipper.showPrevious();
    }
     
    View.OnTouchListener MyTouchListener = new View.OnTouchListener()
    {
        public boolean onTouch(View v, MotionEvent event) 
        {
            if (event.getAction() == MotionEvent.ACTION_DOWN)
            {
                m_nPreTouchPosX = (int)event.getX();
            }
             
            if (event.getAction() == MotionEvent.ACTION_UP)
            {
                int nTouchPosX = (int)event.getX();
                 
                if (nTouchPosX < m_nPreTouchPosX)
                {
                    MoveNextView();
                }
                else if (nTouchPosX > m_nPreTouchPosX)
                {
                    MovewPreviousView();
                }
                 
                m_nPreTouchPosX = nTouchPosX;
            }
             
            return true;
        }
    };
}

전체 프로젝트 파일을 첨부합니다.

ViewFlipperExample.zip

ViewFlipper 사용하기

단축키

Articles