ViewFlipper 跟 ViewPager的效果有點相似

都是可以靠滑動來切換要顯示的畫面

但是其中有些不同

在support-v4 library出來之前

android並沒有原生的翻頁元件

要達成翻頁效果的其中一種方式

就是透過ViewFlipper

ViewFlipper的使用上比ViewPager簡單

但是缺點是

必須等到gesture結束才會翻頁

在操作上 就少了一些流暢性

ViewPager 在官方文件中

是和action bar 的 tag 一起使用

用以切換不同的Activity

因此如果是在同一個Activity要作滑動效果

使用ViewFlipper會比較省事

 

        flipper = (ViewFlipper) findViewById(R.id.itemType);
        flipper.setOnTouchListener(new OnTouchListener(){
			@Override
			public boolean onTouch(View arg0, MotionEvent event) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					startX = event.getX();
					break;
				case MotionEvent.ACTION_UP:
					if(event.getX() > startX){
						flipper.setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_right_in));  
			            flipper.setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_right_out));  
			            count++; 
			            flipper.showNext();  
			            setList(flipper.getCurrentView().getId());
			            if (count > 3) count = 0;
								
					}
					else if(event.getX() < startX){
						flipper.setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_left_in));  
			            flipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_out));  
			            flipper.showPrevious();
		                count--;  
		                setList(flipper.getCurrentView().getId());
			            if (count < 0) count = 2;
			            return true;  
					}
					break;
				default:
					break;
			}
			return true;
			}
        	
        });

findViewById()取得ViewFlipper後
藉由setOnTouchListner()來設定被觸擊的動作
如果拖曳後位移為+就往右翻頁
反之往左
翻頁的特效藉由設定Animation來達成
基本上就是淡出再淡入
覺得不夠炫也可以自行另外設計
不設定也可以
但是會憑空改變畫面 十分突兀
 

動畫設定如下:

push_left_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.1"
android:duration="500" />
</set>

push_left_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.1"
android:duration="500" />
</set>

push_right_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.1"
android:duration="500" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.1"
android:duration="500" />
</set>

 

創作者介紹
創作者 Klv 的頭像
Klv

值得嗎?

Klv 發表在 痞客邦 留言(0) 人氣()