ViewFlipper 사용하기

by 조쉬 posted Jul 16, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

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


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"?>

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

<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"?>

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

<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"?>

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

<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"?>

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

<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 파일에 다음과 같은 코드를 입력합니다.

01.package View.Flipper;
02. 
03.import android.app.Activity;
04.import android.os.Bundle;
05.import android.view.MotionEvent;
06.import android.view.View;
07.import android.view.animation.AnimationUtils;
08.import android.widget.ViewFlipper;
09. 
10.public class actViewFlipper extends Activity {
11.    private ViewFlipper m_viewFlipper;
12.     
13.    private int m_nPreTouchPosX = 0;
14.     
15.    /** Called when the activity is first created. */
16.    @Override
17.    public void onCreate(Bundle savedInstanceState)
18.    {
19.        super.onCreate(savedInstanceState);
20.        setContentView(R.layout.main);
21.         
22.        m_viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
23.        m_viewFlipper.setOnTouchListener(MyTouchListener);
24.    }
25.     
26.    private void MoveNextView()
27.    {
28.        m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_right));
29.        m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_left));
30.        m_viewFlipper.showNext();
31.    }
32.     
33.    private void MovewPreviousView()
34.    {
35.        m_viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.appear_from_left));
36.        m_viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.disappear_to_right));
37.        m_viewFlipper.showPrevious();
38.    }
39.     
40.    View.OnTouchListener MyTouchListener = new View.OnTouchListener()
41.    {
42.        public boolean onTouch(View v, MotionEvent event)
43.        {
44.            if (event.getAction() == MotionEvent.ACTION_DOWN)
45.            {
46.                m_nPreTouchPosX = (int)event.getX();
47.            }
48.             
49.            if (event.getAction() == MotionEvent.ACTION_UP)
50.            {
51.                int nTouchPosX = (int)event.getX();
52.                 
53.                if (nTouchPosX < m_nPreTouchPosX)
54.                {
55.                    MoveNextView();
56.                }
57.                else if (nTouchPosX > m_nPreTouchPosX)
58.                {
59.                    MovewPreviousView();
60.                }
61.                 
62.                m_nPreTouchPosX = nTouchPosX;
63.            }
64.             
65.            return true;
66.        }
67.    };
68.}


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