現(xiàn)如今主流的Android應(yīng)用中,都少不了左右滑動(dòng)滾屏這項(xiàng)功能,(貌似現(xiàn)在好多人使用智能機(jī)都習(xí)慣性的有事沒(méi)事的左右滑屏,也不知道在干什么。。。嘿嘿),由于前段時(shí)間項(xiàng)目的需要,所以也對(duì)其研究了一下,總的來(lái)說(shuō)滑屏實(shí)現(xiàn)有三種方式:(至于其他的實(shí)現(xiàn)方式目前后還沒(méi)碰到。。。)
1.ViewPager?2.ViewFlipper 3.ViewFlow
一.ViewPager
官方文檔介紹:http://developer.android.com/reference/android/support/v4/view/ViewPager.html
根據(jù)繼承關(guān)系我們可以看出,ViewPager不在android sdk 自帶jar包中,來(lái)源google 的補(bǔ)充組件android-support-v4.jar中,所以我們?cè)?.0以前的版本中使用就需要導(dǎo)入該jar包了。
1.1 介紹:該類是一個(gè)布局管理器,它允許用戶通過(guò)滑動(dòng)左、右頁(yè)的數(shù)據(jù)。你必須要一個(gè)實(shí)現(xiàn)了PagerAdapter接口從而生成的頁(yè)面視圖。
1.2 使用:
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 | <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????xmlns:tools="http://schemas.android.com/tools" ????android:layout_width="match_parent" ????android:layout_height="match_parent"?> ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????<android.support.v4.view.ViewPager ????????android:id="@+id/viewpager" ????????android:layout_width="fill_parent" ????????android:layout_height="fill_parent"?/> </RelativeLayout> |
MainActivity類:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | package?comzhf.android_viewpager; import?java.util.ArrayList; import?java.util.List; import?android.os.Bundle; import?android.app.Activity; import?android.support.v4.view.ViewPager; import?android.view.LayoutInflater; import?android.view.View; import?android.view.View.OnClickListener; import?android.widget.Button; import?android.widget.TextView; import?android.widget.Toast; /** ?* 主界面:ViewPagerViewPager不在android sdk 自帶jar包中,來(lái)源google 的補(bǔ)充組件android-support-v4.jar ?*/ public?class?ViewPagerActivity?extends?Activity { ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????private?ViewPager mViewPager; ????List<View> viewList; ????@Override ????protected?void?onCreate(Bundle savedInstanceState) { ????????super.onCreate(savedInstanceState); ????????setContentView(R.layout.activity_main); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????LayoutInflater mInflater = getLayoutInflater().from(this); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????View v1 = mInflater.inflate(R.layout.layout1,?null); ????????View v2 = mInflater.inflate(R.layout.layout2,?null); ????????View v3 = mInflater.inflate(R.layout.layout3,?null); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????//添加頁(yè)面數(shù)據(jù) ????????viewList =?new?ArrayList<View>(); ????????viewList.add(v1); ????????viewList.add(v2); ????????viewList.add(v3); ????????//實(shí)例化適配器 ????????mViewPager = (ViewPager) findViewById(R.id.viewpager); ????????mViewPager.setAdapter(new?MyPagerAdapter(viewList)); ????????mViewPager.setCurrentItem(0);?//設(shè)置默認(rèn)當(dāng)前頁(yè) ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????View view = viewList.get(0); ????????TextView textView = (TextView) view.findViewById(R.id.text_1); ????????textView.setText("我是第一頁(yè)"); ????????Button button = (Button) view.findViewById(R.id.button_1); ????????button.setOnClickListener(new?OnClickListener() { ????????????public?void?onClick(View v) { ????????????????// TODO Auto-generated method stub ????????????????Toast.makeText(getApplicationContext(),?"你點(diǎn)擊了按鈕", Toast.LENGTH_SHORT).show(); ????????????????} ????????}); ????} } |
這里還有三個(gè)布局文件:layout1.xml (其余兩個(gè)類似,略)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?xml?version="1.0"?encoding="utf-8"?> <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????android:layout_width="fill_parent" ????android:layout_height="fill_parent" ????android:orientation="vertical" ????android:background="@drawable/guide01"?> ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????<TextView ????????android:id="@+id/text_1" ????????android:layout_width="wrap_content" ????????android:layout_height="wrap_content" ????????android:layout_gravity="center_horizontal" ????????android:text="葉片一" ????????android:textSize="25sp"?/> ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????<Button ????????android:id="@+id/button_1" ????????android:layout_width="fill_parent" ????????android:layout_height="wrap_content" ????????android:text="點(diǎn)擊我" ????????> ????</Button> ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? </LinearLayout> |
效果圖:
??
補(bǔ)充說(shuō)明:
1.這里我們用了Layout作為每個(gè)page的填充數(shù)據(jù),其實(shí)官方文檔說(shuō)ViewPager+Fragment配合使用更好
2.每個(gè)頁(yè)面的響應(yīng)事件我們可以在OnPageChangeListener監(jiān)聽(tīng)器類中進(jìn)行捕獲和處理對(duì)應(yīng)事件。
二.ViewFlipper
官方文檔:http://developer.android.com/reference/android/widget/ViewFlipper.html
2.1 介紹:ViewFilpper控件是系統(tǒng)自帶控件之一,主要用于在同一個(gè)屏幕間的切換及設(shè)置動(dòng)畫效果、間隔時(shí)間,且可以自動(dòng)播放。
順便提及一下,View動(dòng)畫關(guān)系圖:
2.2 使用:
2.2.1 靜態(tài)加載:
activity_main.xml:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????xmlns:tools="http://schemas.android.com/tools" ????android:layout_width="match_parent" ????android:layout_height="match_parent"?> ????<ViewFlipper ????????android:id="@+id/body_flipper" ????????android:layout_width="fill_parent" ????????android:layout_height="fill_parent" ????????android:background="#f0f0f0"?> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ?????????<include ????????????android:id="@+id/layout01" ????????????layout="@layout/page1"?/> ????????<include ????????????android:id="@+id/layout02" ????????????layout="@layout/page2"?/> ????????<include ????????????android:id="@+id/layout02" ????????????layout="@layout/page3"?/> ????????<include ????????????android:id="@+id/layout02" ????????????layout="@layout/page4"?/> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????</ViewFlipper> </RelativeLayout> |
MainActivity類:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | package?com.zhf.android_viewflipper_view; import?android.os.Bundle; import?android.app.Activity; import?android.view.MotionEvent; import?android.view.View; import?android.view.View.OnTouchListener; import?android.view.animation.AnimationUtils; import?android.widget.ViewFlipper; /** ?* ViewFlipper 靜態(tài)加載 ?* @author ZHF **/ public?class?MainActivity?extends?Activity?implements?OnTouchListener{ ????private?ViewFlipper viewFlipper; ????private?float touchDownX;??// 手指按下的X坐標(biāo) ????private?float touchUpX;??//手指松開(kāi)的X坐標(biāo) ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????@Override ????public?void?onCreate(Bundle savedInstanceState) { ????????super.onCreate(savedInstanceState); ????????setContentView(R.layout.activity_main); ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper); ????????viewFlipper.setOnTouchListener(this); ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????@Override ????public?boolean onTouch(View v, MotionEvent event) { ????????if?(event.getAction() == MotionEvent.ACTION_DOWN) { ????????????// 取得左右滑動(dòng)時(shí)手指按下的X坐標(biāo) ????????????touchDownX = event.getX(); ????????????return?true; ????????}?else?if?(event.getAction() == MotionEvent.ACTION_UP) { ????????????// 取得左右滑動(dòng)時(shí)手指松開(kāi)的X坐標(biāo) ????????????touchUpX = event.getX(); ????????????// 從左往右,看前一個(gè)View ????????????if?(touchUpX - touchDownX >?100) { ????????????????// 顯示上一屏動(dòng)畫 ????????????????viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, ???????????????????????R.anim.push_right_in)); ????????????????viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, ????????????????????????R.anim.push_right_out)); ????????????????// 顯示上一屏的View ????????????????viewFlipper.showPrevious(); ????????????????// 從右往左,看后一個(gè)View ????????????}?else?if?(touchDownX - touchUpX >?100) { ????????????????//顯示下一屏的動(dòng)畫 ????????????????viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, ????????????????????????R.anim.push_left_in)); ????????????????viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, ????????????????????????R.anim.push_left_out)); ????????????????// 顯示下一屏的View ????????????????viewFlipper.showNext(); ????????????} ????????????return?true; ????????} ????????return?false; ????} } |
動(dòng)畫配置文件(右進(jìn)右出同理,略):
push_left_in.xml:
| 1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0"?encoding="utf-8"?> <set?xmlns:android="http://schemas.android.com/apk/res/android"?> ????<translate ????????android:duration="500" ????????android:fromXDelta="100.0%p" ????????android:toXDelta="0.0"?/> ????<alpha ????????android:duration="500" ????????android:fromAlpha="0.1" ????????android:toAlpha="1.0"?/> </set> |
push_left_out.xml:
| 1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0"?encoding="utf-8"?> <set?xmlns:android="http://schemas.android.com/apk/res/android"?> ????<translate ????????android:duration="500" ????????android:fromXDelta="0.0" ????????android:toXDelta="-100.0%p"?/> ????<alpha ????????android:duration="500" ????????android:fromAlpha="1.0" ????????android:toAlpha="0.1"?/> </set> |
效果:
?
向左滑屏 向右滑屏
補(bǔ)充:
上述的page只有4個(gè),而真實(shí)項(xiàng)目中的page頁(yè)面?zhèn)€數(shù)是不確定的,所以下面這種方式是項(xiàng)目中經(jīng)常用到的。
2.2.2 動(dòng)態(tài)加載(重要)
參考文章:http://blog.csdn.net/yuzhiboyi/article/details/7702953
activity_main2.xml
| 1 2 3 4 5 6 7 8 9 10 11 | <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????xmlns:tools="http://schemas.android.com/tools" ????android:layout_width="match_parent" ????android:layout_height="match_parent"?> ????<com.zhf.android_viewflipper_view.MyViewFlipper ????????android:id="@+id/body_flipper" ????????android:layout_width="fill_parent" ????????android:layout_height="fill_parent" ????????android:background="#f0f0f0"?> ????</com.zhf.android_viewflipper_view.MyViewFlipper> </RelativeLayout> |
flipper_view.xml:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?xml version="1.0"?encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" ????android:layout_width="fill_parent" ????android:layout_height="fill_parent" ????android:scrollbars="none"?> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????<LinearLayout ????????android:layout_width="fill_parent" ????????android:layout_height="wrap_content" ????????android:gravity="center" ????????android:orientation="vertical"?> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????<ImageView ????????????android:layout_width="wrap_content" ????????????android:layout_height="wrap_content" ????????????android:src="@drawable/ic_launcher"?/> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????<TextView ????????????android:id="@+id/textView" ????????????android:textSize="100dip" ????????????android:layout_width="wrap_content" ????????????android:layout_height="wrap_content"?/> ????</LinearLayout> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? </ScrollView> |
注:這里并不是所有的View都能有onFling回調(diào)函數(shù),外部需要加ScrollView !
MyGestureListener類:自定義滑動(dòng)事件監(jiān)聽(tīng)器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | package?com.zhf.android_viewflipper_view; import?android.view.GestureDetector.SimpleOnGestureListener; import?android.view.MotionEvent; /** ?* 自定義滑動(dòng)事件監(jiān)聽(tīng)器 ?* SimpleOnGestureListener已經(jīng)實(shí)現(xiàn)了OnGestureListener接口和OnDoubleTapListener接口, ?* 可以有選擇性的復(fù)寫需要的方法,提供方法onFling()作為滑動(dòng)事件的回調(diào)函數(shù) ?* @author ZHF ?* ?*/ public?class?MyGestureListener?extends?SimpleOnGestureListener{ ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????private?OnFlingListener mOnFlingListener; ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**用戶按下觸摸屏、快速移動(dòng)后松開(kāi),由1個(gè)MotionEvent ACTION_DOWN, 多個(gè)ACTION_MOVE, 1個(gè)ACTION_UP觸發(fā) **/ ????@Override ????public?final?boolean?onFling(final?MotionEvent e1,?final?MotionEvent e2, ????????????final?float?speedX,?final?float?speedY) { ????????if?(mOnFlingListener ==?null) { ????????????return?super.onFling(e1, e2, speedX, speedY); ????????} ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????float?XFrom = e1.getX();??//按下坐標(biāo) ????????float?XTo = e2.getX(); ????????float?YFrom = e1.getY(); ????????float?YTo = e2.getY(); ????????// 左右滑動(dòng)的X軸幅度大于100,并且X軸方向的速度大于100 ????????if?(Math.abs(XFrom - XTo) >?100.0f && Math.abs(speedX) >?100.0f) { ????????????// X軸幅度大于Y軸的幅度 ????????????if?(Math.abs(XFrom - XTo) >= Math.abs(YFrom - YTo)) { ????????????????if?(XFrom > XTo) { ????????????????????// 下一個(gè) ????????????????????mOnFlingListener.flingToNext(); ????????????????}?else?{ ????????????????????// 上一個(gè) ????????????????????mOnFlingListener.flingToPrevious(); ????????????????} ????????????} ????????}?else?{ ????????????return?false; ????????} ????????return?true; ????} ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**自定義滑動(dòng)的回調(diào)接口**/ ????public?interface?OnFlingListener { ????????void?flingToNext();??//滑動(dòng)到下一頁(yè) ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????void?flingToPrevious();??//滑動(dòng)到上一頁(yè) ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????public?OnFlingListener getOnFlingListener() { ????????return?mOnFlingListener; ????} ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????public?void?setOnFlingListener(OnFlingListener mOnFlingListener) { ????????this.mOnFlingListener = mOnFlingListener; ????} } |
MyViewFlipper類:自定義View滑動(dòng)類:監(jiān)聽(tīng)滑動(dòng)事件,并做切換視圖的處理。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | package?com.zhf.android_viewflipper_view; import?android.content.Context; import?android.util.AttributeSet; import?android.view.GestureDetector; import?android.view.MotionEvent; import?android.view.View; import?android.widget.ViewFlipper; import?com.zhf.android_viewflipper_view.MyGestureListener.OnFlingListener; /** ?* 自定義View滑動(dòng)類:監(jiān)聽(tīng)滑動(dòng)事件,并做切換視圖的處理。 ?* @author ZHF ?* ?*/ public?class?MyViewFlipper?extends?ViewFlipper?implements?OnFlingListener { ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????//手勢(shì)監(jiān)聽(tīng)類 ????private?GestureDetector mGestureDetector =?null; ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????private?OnViewFlipperListener mOnViewFlipperListener =?null; ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????public?MyViewFlipper(Context context) { ????????super(context); ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????public?MyViewFlipper(Context context, AttributeSet attrs) { ????????super(context, attrs); ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????public?void?setOnViewFlipperListener(OnViewFlipperListener mOnViewFlipperListener) { ????????this.mOnViewFlipperListener = mOnViewFlipperListener; ????????//初始化自定義滑動(dòng)事件監(jiān)聽(tīng)器 ????????MyGestureListener myGestureListener =?new?MyGestureListener(); ????????//綁定自定義的滑動(dòng)監(jiān)聽(tīng)器 ????????myGestureListener.setOnFlingListener(this); ????????mGestureDetector =?new?GestureDetector(myGestureListener); ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????@Override ????public?boolean onInterceptTouchEvent(MotionEvent ev) { ????????if?(null?!= mGestureDetector) { ????????????return?mGestureDetector.onTouchEvent(ev); ????????}?else?{ ????????????return?super.onInterceptTouchEvent(ev); ????????} ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**向下一條滑動(dòng)事件**/ ????@Override ????public?void?flingToNext() { ????????if?(null?!= mOnViewFlipperListener) { ????????????int?childCnt = getChildCount(); ????????????if?(childCnt ==?2) { ????????????????removeViewAt(1); ????????????} ????????????addView(mOnViewFlipperListener.getNextView(),?0); ????????????if?(0?!= childCnt) { ????????????????setInAnimation(getContext(), R.anim.push_left_in); ????????????????setOutAnimation(getContext(), R.anim.push_left_out); ????????????????setDisplayedChild(0); ????????????} ????????} ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**向上一條滑動(dòng)事件**/ ????@Override ????public?void?flingToPrevious() { ????????if?(null?!= mOnViewFlipperListener) { ????????????int?childCnt = getChildCount(); ????????????if?(childCnt ==?2) { ????????????????removeViewAt(1); ????????????} ????????????addView(mOnViewFlipperListener.getPreviousView(),?0); ????????????if?(0?!= childCnt) { ????????????????setInAnimation(getContext(), R.anim.push_right_in); ????????????????setOutAnimation(getContext(), R.anim.push_right_out); ????????????????setDisplayedChild(0); ????????????} ????????} ????} ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**自定義View變化監(jiān)聽(tīng)回調(diào)接口**/ ????public?interface?OnViewFlipperListener { ????????View getNextView();???//獲取下一頁(yè)View ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????View getPreviousView();??//獲取上一頁(yè)View ????} } |
MainActivity2類:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | package?com.zhf.android_viewflipper_view; import?com.zhf.android_viewflipper_view.MyViewFlipper.OnViewFlipperListener; import?android.app.Activity; import?android.os.Bundle; import?android.view.LayoutInflater; import?android.view.View; import?android.widget.ScrollView; import?android.widget.TextView; /** ?* ViewFlipper 動(dòng)態(tài)加載 ?* @author ZHF ?*/ public?class?MainActivity2?extends?Activity?implements?OnViewFlipperListener{ ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ??????private?MyViewFlipper myViewFlipper; ??????private?int?currentNumber; ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????@Override ????protected?void?onCreate(Bundle savedInstanceState) { ????????super.onCreate(savedInstanceState); ????????setContentView(R.layout.activity_main2); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????currentNumber =?1;??//默認(rèn)頁(yè)號(hào) ????????myViewFlipper = (MyViewFlipper) findViewById(R.id.body_flipper); ????????//給ViewFlipper綁定自定義的滑動(dòng)監(jiān)聽(tīng)器 ????????myViewFlipper.setOnViewFlipperListener(this); ????????//初始化頁(yè)面數(shù)據(jù),即View ????????myViewFlipper.addView(createView(currentNumber)); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????} ????/**獲取下一頁(yè)View**/ ????@Override ????public?View getNextView() { ????????currentNumber = currentNumber ==?10???1?: currentNumber +?1; ????????return?createView(currentNumber); ????} ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**獲取上一頁(yè)View**/ ????@Override ????public?View getPreviousView() { ????????currentNumber = currentNumber ==?1???10?: currentNumber -?1; ????????return?createView(currentNumber); ????} ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**更換View數(shù)據(jù):這里是根據(jù)頁(yè)號(hào)來(lái)更換textView上的文字**/ ????private?View createView(int?currentNumber) { ????????LayoutInflater layoutInflater = LayoutInflater.from(this); ????????ScrollView resultView = (ScrollView) layoutInflater.inflate(R.layout.flipper_view,?null); ????????((TextView) resultView.findViewById(R.id.textView)).setText(currentNumber +?""); ????????return?resultView; ????} } |
效果圖:
--向左滑動(dòng)(漸變過(guò)程不好截圖)-->?
補(bǔ)充說(shuō)明:
上述的三個(gè)類:
MyGestureListener:繼承了SimpleGestureListener手勢(shì)監(jiān)聽(tīng)類, 復(fù)寫了該類onFling()方法,用于監(jiān)聽(tīng)用戶按下滑動(dòng)事件的處理;還自定義了滑動(dòng)的回調(diào)接口OnFlingListener(包含了兩個(gè)抽象方法flingToNext(),flingToPrevious)。
MyViewFlipper:是一個(gè)自定義ViewFlipper,該類首先實(shí)現(xiàn)和綁定了上一個(gè)類中的滑動(dòng)的回調(diào)接口OnFlingListener,完成了接口中兩個(gè)重要的方法。同時(shí)定義了一個(gè)View變化監(jiān)聽(tīng)回調(diào)接口OnViewFlipperListener(包含了兩個(gè)抽象方法getNextView(),getPreviousView())。
MainActivity2:加載布局,實(shí)現(xiàn)監(jiān)聽(tīng),統(tǒng)一處理頁(yè)面數(shù)據(jù)View和滑動(dòng)事件的綁定。
三.ViewFlow類
3.1介紹:
ViewFlow不是google官方的api,它是gethub上的一個(gè)開(kāi)源項(xiàng)目,利用ViewFlow可以產(chǎn)生視圖切換的效果。ViewFlow 相當(dāng)于 Android UI 部件提供水平滾動(dòng)的 ViewGroup,使用 Adapter 進(jìn)行條目綁定,例如ViewPager或是ViewFlipper。它提供了三個(gè)組件ViewFlow、FlowIndicator和TitleFlowIndicator,一般情況下,當(dāng)你需要做一個(gè)滑動(dòng)然而不確定view的數(shù)目時(shí),可以考慮使用ViewFlow。如果你的view數(shù)目確定,使用Fragments 或兼容庫(kù)里的ViewPager比較好 。
3.2使用:
A.首先下載ViewFlow開(kāi)源庫(kù)代碼:
官方文檔:https://github.com/pakerfeldt/android-viewflow
B.下載之后我們解壓打開(kāi)viewflow文件夾:
C.建項(xiàng)目將這三個(gè)類直接復(fù)制過(guò)來(lái)放項(xiàng)目中使用即可。
注:這里可能還需要一個(gè)styleable文件,直接將value文件夾下的attrs.xml拷入即可。
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?xml?version="1.0"?encoding="utf-8"?> <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????xmlns:app="http://schemas.android.com/apk/res/com.zhf.android_viewflow" ????android:layout_width="fill_parent" ????android:layout_height="fill_parent" ????android:orientation="vertical"?> ????<FrameLayout ????????android:layout_width="fill_parent" ????????android:layout_height="fill_parent" ????????android:orientation="vertical"?> ????????<RelativeLayout ????????????android:layout_width="fill_parent" ????????????android:layout_height="135dp" ????????????android:orientation="vertical"?> ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????????<com.zhf.android_viewflow.ViewFlow ????????????????android:id="@+id/viewflow" ????????????????android:layout_width="fill_parent" ????????????????android:layout_height="fill_parent" ????????????????app:sidebuffer="3"/> ????????</RelativeLayout> ????????<com.zhf.android_viewflow.CircleFlowIndicator ????????????android:id="@+id/viewflowindic" ????????????android:layout_width="wrap_content" ????????????android:layout_height="140dp" ????????????android:layout_alignParentBottom="true" ????????????android:layout_gravity="center_horizontal" ????????????app:fadeOut="0" ????????????app:inactiveType="fill" ????????????android:paddingTop="125dp"?/> ????????<!--圓點(diǎn)指示器還支持activeColor、inactiveColor、activeType(填充或描邊)、 ????????????inactiveType(填充或描邊)、 ????????????fadeOut(設(shè)置圓點(diǎn)自動(dòng)隱藏的秒數(shù),若為0則不會(huì)自動(dòng)隱藏)、 ????????????radius(圓點(diǎn)的半徑)等。 ????????--> ????</FrameLayout> </LinearLayout> |
注:這里需要強(qiáng)調(diào)一下,因?yàn)槭褂玫谌降膸?kù)組件,所以要在使用之前引入:
xmlns:app="http://schemas.android.com/apk/res/com.zhf.android_viewflow"
main_item.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?xml?version="1.0"?encoding="utf-8"?> <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????android:layout_width="fill_parent" ????android:layout_height="fill_parent" ????android:isScrollContainer="true" ????android:scrollbarAlwaysDrawVerticalTrack="true" ????android:scrollbars="vertical"?> <!-- isScrollContainer?? 設(shè)置當(dāng)前View為滾動(dòng)容器 ????scrollbarAlwaysDrawVerticalTrack????? 設(shè)置是否始終顯示垂直滾動(dòng)條--> ????<ImageView ????????android:id="@+id/imgView" ????????android:layout_width="fill_parent" ????????android:layout_height="wrap_content" ????????android:layout_gravity="center_vertical|center_horizontal"?> ????</ImageView> </LinearLayout> |
MainActivity類
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | package?com.zhf.android_viewflow; import?android.os.Bundle; import?android.app.Activity; import?android.content.res.Configuration; public?class?MainActivity?extends?Activity { ????private?ViewFlow viewFlow; ????private?CircleFlowIndicator indic;??//頁(yè)表指示器 ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????@Override ????protected?void?onCreate(Bundle savedInstanceState) { ????????super.onCreate(savedInstanceState); ????????setContentView(R.layout.activity_main); ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????viewFlow = (ViewFlow) findViewById(R.id.viewflow); ????????//為其綁定適配器 ????????viewFlow.setAdapter(new?ImageAdapter(this),5);?//初始位置5 ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????indic = (CircleFlowIndicator) findViewById(R.id.viewflowindic); ????????//為viewFlow綁定頁(yè)表指示器 ????????viewFlow.setFlowIndicator(indic); ????} ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????/**處理轉(zhuǎn)屏操作**/ ????@Override ????public?void?onConfigurationChanged(Configuration newConfig) { ????????super.onConfigurationChanged(newConfig); ????????viewFlow.onConfigurationChanged(newConfig); ????} } |
這里還有一個(gè)圖片適配器:ImageAdapter
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | package?com.zhf.android_viewflow; import?com.cjf.ui.R; import?android.content.Context; import?android.view.LayoutInflater; import?android.view.View; import?android.view.ViewGroup; import?android.widget.BaseAdapter; import?android.widget.ImageView; public?class?ImageAdapter?extends?BaseAdapter{ ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????private?LayoutInflater mInflater; ????//圖片資源的id ????private?static?final?int[] ids = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, ????????R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h}; ????public?ImageAdapter(Context context) { ????????this.mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); ????} ????@Override ????public?int?getCount() { ????????// TODO Auto-generated method stub ????????return?ids ==?null???0?:ids.length; ????} ????@Override ????public?Object?getItem(int?position) { ????????// TODO Auto-generated method stub ????????return?position; ????} ????@Override ????public?long getItemId(int?position) { ????????// TODO Auto-generated method stub ????????return?position; ????} ????@Override ????public?View getView(int?position, View convertView, ViewGroup parent) { ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????if?(convertView ==?null) { ????????????convertView = mInflater.inflate(R.layout.image_item,?null); ????????} ????????((ImageView) convertView.findViewById(R.id.imgView)).setImageResource(ids[position]); ????????return?convertView; ????} } |
運(yùn)行一下吧!效果圖:
轉(zhuǎn)屏后?
恩,終于寫完了! 希望這篇博客能幫助到大家!好累~~
三個(gè)例子的源碼我已總結(jié)好(獨(dú)立的三個(gè)項(xiàng)目,壓縮在一個(gè)zip里了)
下載地址:http://down.51cto.com/data/976370
總結(jié)
以上是生活随笔為你收集整理的Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。