Android中利用ViewFliper实现屏幕切换效果

程序结构图：

ViewFliper中的代码

                    1.packagecom.scnu.mc.myviewfliper; 
            2. 
            3.importAndroid.app.Activity; 
            4.importandroid.os.Bundle; 
            5.importandroid.view.MotionEvent; 
            6.importandroid.widget.ViewFlipper; 
            7. 
            8.publicclassViewFliperextendsActivity{ 
            9. 
            10.ViewFlipperviewFlipper=null; 
            11.floatstartX; 
            12. 
            13.@Override 
            14.publicvoidonCreate(BundlesavedInstanceState){ 
            15.super.onCreate(savedInstanceState); 
            16.setContentView(R.layout.main); 
            17. 
            18.init(); 
            19.} 
            20. 
            21.privatevoidinit(){ 
            22.viewFlipper=(ViewFlipper)this.findViewById(R.id.viewFlipper); 
            23.} 
            24. 
            25.@Override 
            26.publicbooleanonTouchEvent(MotionEventevent){ 
            27.switch(event.getAction()){ 
            28.caseMotionEvent.ACTION_DOWN: 
            29.startX=event.getX(); 
            30.break; 
            31.caseMotionEvent.ACTION_UP: 
            32. 
            33.if(event.getX()>startX){//向右滑动 
            34.viewFlipper.setInAnimation(this,R.anim.in_left2right); 
            35.viewFlipper.setOutAnimation(this,R.anim.out_left2right); 
            36.viewFlipper.showNext(); 
            37.}elseif(event.getX()<startX){//向左滑动 
            38.viewFlipper.setInAnimation(this,R.anim.in_right2left); 
            39.viewFlipper.setOutAnimation(this,R.anim.out_right2left); 
            40.viewFlipper.showPrevious(); 
            41.} 
            42.break; 
            43.} 
            44. 
            45.returnsuper.onTouchEvent(event); 
            46.} 
            47. 
            48.}

main.xml代码

                    1.<?xmlversion="1.0"encoding="utf-8"?> 
            2.<LinearLayoutxmlns:Android="http://schemas.android.com/apk/res/android" 
            3.Android:layout_width="fill_parent"android:layout_height="fill_parent" 
            4.Android:orientation="vertical"> 
            5.<ViewFlipperAndroid:id="@+id/viewFlipper" 
            6.Android:layout_width="fill_parent"android:layout_height="fill_parent"> 
            7.<!--第一个页面--> 
            8.<LinearLayoutAndroid:layout_width="fill_parent" 
            9.Android:layout_height="fill_parent"android:gravity="center"> 
            10.<ImageViewAndroid:layout_width="wrap_content" 
            11.Android:layout_height="wrap_content"android:src="@drawable/a1"/> 
            12.</LinearLayout> 
            13.<!--第二个页面--> 
            14.<LinearLayoutAndroid:layout_width="fill_parent" 
            15.Android:layout_height="fill_parent"android:gravity="center"> 
            16.<ImageViewAndroid:layout_width="wrap_content" 
            17.Android:layout_height="wrap_content"android:src="@drawable/a2" 
            18.Android:gravity="center"/> 
            19.</LinearLayout> 
            20.<!--第三个页面--> 
            21.<LinearLayoutAndroid:layout_width="fill_parent" 
            22.Android:layout_height="fill_parent"android:gravity="center"> 
            23. 
            24.<ImageViewAndroid:layout_width="wrap_content" 
            25.Android:layout_height="wrap_content"android:src="@drawable/a3" 
            26.Android:gravity="center"/> 
            27.</LinearLayout> 
            28.<!--第四个页面--> 
            29.<LinearLayoutAndroid:layout_width="fill_parent" 
            30.Android:layout_height="fill_parent"android:gravity="center"> 
            31. 
            32.<ImageViewAndroid:layout_width="wrap_content" 
            33.Android:layout_height="wrap_content"android:src="@drawable/a4" 
            34.Android:gravity="center"/> 
            35.</LinearLayout> 
            36.</ViewFlipper> 
            37.</LinearLayout>

4个动画效果的xml文件

in_left2right----从左到右进入屏幕

                    1.<?xmlversion="1.0"encoding="utf-8"?> 
            2.<setxmlns:Android="http://schemas.android.com/apk/res/android"> 
            3.<translate 
            4.Android:duration="30" 
            5.Android:fromXDelta="-100%p" 
            6.Android:toXDelta="0"/> 
            7.</set>

in_right2left----从右至左进入屏幕

                    1.<?xmlversion="1.0"encoding="utf-8"?> 
            2.<setxmlns:Android="http://schemas.android.com/apk/res/android"> 
            3.<translate 
            4.Android:duration="30" 
            5.Android:fromXDelta="100%p" 
            6.Android:toXDelta="0"/> 
            7.</set>

out_left2right----从左到右退出屏幕

                    1.<?xmlversion="1.0"encoding="utf-8"?> 
            2.<setxmlns:Android="http://schemas.android.com/apk/res/android"> 
            3.<translate 
            4.Android:duration="30" 
            5.Android:fromXDelta="0" 
            6.Android:toXDelta="100%p"/> 
            7.</set>

out_right2left----从右至左退出屏幕

                    1.<?xmlversion="1.0"encoding="utf-8"?> 
            2.<setxmlns:Android="http://schemas.android.com/apk/res/android"> 
            3.<translate 
            4.Android:duration="30" 
            5.Android:fromXDelta="0" 
            6.Android:toXDelta="-100%p"/> 
            7.</set>

注：fromXDelta和toXDelta代表控件相对应parent的偏移距离，个人理解是"100%p"代表控件向右跑到屏幕的外面，"-100%p"代表控件向左跑到屏幕的外部。下面附上个人理解的图。

更多相关文章

随机推荐