【转】android ViewPager,ViewFlipper,ViewFlow实现左右滑动

转自：http://blog.csdn.net/zhouyuanjing/article/details/8290454

开篇

首页只是作为ViewPager，ViewFlipper，ViewFlow的入口，提供三个Button进行跳转。

1. ViewPager

先看看官方文档怎么介绍ViewPager的：http://developer.android.com/reference/android/support/v4/view/ViewPager.html

继承关系如下：

java.lang.Object

android.view.View

android.view.ViewGroup

android.support.v4.view.ViewPager

ViewPager做为容器类，可以结合View（Layout）和Fragment（Android 3.0 才引入的），官方文档说ViewPager+Fragment配合使用更好。ViewPager不在android sdk 自带jar包中，来源google 的补充组件android-support-v4.jar，没有的话可以通过eclipse下载和自己下载再添加到相应的工程中，本例用的是android-support-v13.jar，完全兼容android-support-v4.jar，看看android-support-v13.jar的目录结构：

[android-support-v13.jar下载]

切入正题，ViewPager用法如下：

配置文件：viewpager_layout.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5. <android.support.v4.view.ViewPager
6. android:id="@+id/viewpager"
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content" />
9. </RelativeLayout>

源文件如下ViewPagerActivity.java如下：

1. package com.xyz.vvv.ViewPager;
2. import java.util.ArrayList;
3. import com.xyz.vvv.R;
4. import android.app.ActionBar;
5. import android.app.ActionBar.LayoutParams;
6. import android.app.ActionBar.Tab;
7. import android.app.ActionBar.TabListener;
8. import android.app.Activity;
9. import android.app.Fragment;
10. import android.app.FragmentTransaction;
11. import android.content.Context;
12. import android.os.Bundle;
13. import android.support.v13.app.FragmentPagerAdapter;
14. import android.support.v4.view.ViewPager;
15. import android.support.v4.view.ViewPager.OnPageChangeListener;
16. import android.view.LayoutInflater;
17. import android.view.View;
18. public class ViewPagerActivity extends Activity {
19. private ViewPager mViewPager;
20. private ViewPagerAdapter mAdapter;
21. private ActionBar mTabBar;
22. @Override
23. protected void onCreate(Bundle savedInstanceState) {
24. // TODO Auto-generated method stub
25. super.onCreate(savedInstanceState);
26. setContentView(R.layout.viewpager_layout);
27. mViewPager = (ViewPager) findViewById(R.id.viewpager);
28. mAdapter = new ViewPagerAdapter(this, mViewPager);
29. mTabBar = getActionBar();
30. mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_qworld),
31. FirstFragment.class, null);
32. mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_group),
33. SecondFragment.class, null);
34. mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_friends),
35. ThreeFragment.class, null);
36. mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_recent),
37. FourFragment.class, null);
38. }
39. private View getCustomView() {
40. return getLayoutInflater().inflate(R.layout.title_panel_layout, null);
41. }
42. private static class ViewPagerAdapter extends FragmentPagerAdapter
43. implements TabListener, OnPageChangeListener {
44. private Context mContext;
45. private ActionBar mActionBar = null;
46. private ViewPager mViewPager = null;
47. private ArrayList<TabInfo> mTabList = new ArrayList<TabInfo>();
48. public ViewPagerAdapter(Activity activity, ViewPager viewPager) {
49. // TODO Auto-generated constructor stub
50. super(activity.getFragmentManager());
51. mContext = activity;
52. mActionBar = activity.getActionBar();
53. /*
54. * mActionBar.setCustomView(getCustomView(), new LayoutParams(
55. * LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
56. */
57. mActionBar.setDisplayOptions(mActionBar.getDisplayOptions()
58. ^ ActionBar.DISPLAY_SHOW_HOME
59. ^ ActionBar.DISPLAY_SHOW_TITLE, ActionBar.DISPLAY_SHOW_HOME
60. | ActionBar.DISPLAY_SHOW_TITLE);
61. mActionBar.setDisplayShowHomeEnabled(false);
62. mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
63. mViewPager = viewPager;
64. mViewPager.setAdapter(this);
65. mViewPager.setOnPageChangeListener(this);
66. }
67. /** Override OnPageChangeListener start **/
68. @Override
69. public void onPageScrollStateChanged(int arg0) {
70. // TODO Auto-generated method stub
71. }
72. @Override
73. public void onPageScrolled(int position, float positionOffset,
74. int positionOffsetPixels) {
75. // TODO Auto-generated method stub
76. }
77. @Override
78. public void onPageSelected(int position) {
79. // TODO Auto-generated method stub
80. mActionBar.setSelectedNavigationItem(position);
81. }
82. /** Override OnPageChangeListener end **/
83. /** Override TabListener start **/
84. @Override
85. public void onTabSelected(Tab tab, FragmentTransaction ft) {
86. // TODO Auto-generated method stub
87. Object tag = tab.getTag();
88. for (int i = 0; i < mTabList.size(); i++) {
89. if (mTabList.get(i) == tag) {
90. mViewPager.setCurrentItem(i);
91. }
92. }
93. }
94. @Override
95. public void onTabUnselected(Tab tab, FragmentTransaction ft) {
96. // TODO Auto-generated method stub
97. }
98. @Override
99. public void onTabReselected(Tab tab, FragmentTransaction ft) {
100. // TODO Auto-generated method stub
101. }
102. /** Override TabListener end **/
103. /** Override FragmentPagerAdapter start **/
104. @Override
105. public Fragment getItem(int position) {
106. // TODO Auto-generated method stub
107. TabInfo tab = mTabList.get(position);
108. if (tab.fragment == null) {
109. tab.fragment = Fragment.instantiate(mContext,
110. tab.clazz.getName(), tab.bundle);
111. }
112. return tab.fragment;
113. }
114. @Override
115. public int getCount() {
116. // TODO Auto-generated method stub
117. return mTabList.size();
118. }
119. /** Override FragmentPagerAdapter end **/
120. private View getCustomView() {
121. LayoutInflater inflater = (LayoutInflater) mContext
122. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
123. return inflater.inflate(R.layout.title_panel_layout, null);
124. }
125. public void addTab(Tab tab, Class<?> clazz, Bundle bundle) {
126. TabInfo tabInfo = new TabInfo(clazz, bundle);
127. tab.setTag(tabInfo);
128. tab.setTabListener(this);
129. mTabList.add(tabInfo);
130. mActionBar.addTab(tab);
131. notifyDataSetChanged();
132. }
133. private static final class TabInfo {
134. private final Class<?> clazz;
135. private final Bundle bundle;
136. Fragment fragment;
137. TabInfo(Class<?> clazz, Bundle bundle) {
138. this.clazz = clazz;
139. this.bundle = bundle;
140. }
141. }
142. }
143. }

里面用到的FirstFragment，SecondFragment，ThreeFragment，FourFragment分别继承Fragment，运行效果如下：

第一个就弄里个TextView，复杂的界面开发者任由发挥了，第二个和第四个都是ListView，第三个ExpandableListView，ListView的使用难点就是写适配器咯，本例是继承BaseAdapter的。ExpandableListView需要一个继承BaseExpandableListAdapter的适配器[不会的请看：ExpandableListView用法]。

2.ViewFlipper

ViewFilpper控件是系统自带控件之一，主要为在同一个屏幕间的切换及设置动画效果，且可以自动播放，用法如下：

配置文件：viewflipper_layout.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:xyz="http://schemas.android.com/apk/res/com.xyz.vvv"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent" >
6. <ViewFlipper
7. android:id="@+id/viewflipper"
8. android:layout_width="match_parent"
9. android:layout_height="match_parent"
10. android:inAnimation="@anim/slide_in"
11. android:outAnimation="@anim/slide_out"
12. android:flipInterval="2000" >
13. <include layout="@layout/viewflipper_one_layout" />
14. <include layout="@layout/viewflipper_two_layout" />
15. <include layout="@layout/viewflipper_three_layout" />
16. <include layout="@layout/viewflipper_four_layout" />
17. <include layout="@layout/viewflipper_five_layout" />
18. </ViewFlipper>
19. <!--
20. <com.xyz.vvv.PageControlView
21. android:id="@+id/viewflipper_indicator"
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. android:layout_marginBottom="25dip"
25. android:gravity="center_horizontal"
26. android:layout_alignParentBottom="true"
27. xyz:cell_width="@dimen/indicator_width"
28. xyz:cell_height="@dimen/indicator_height" />
29. -->
30. </RelativeLayout>

被注释的部分是指示器，那五个layout里都是一个ImageView，本例图片中画有指示器，PageControlView就不需要啦。

android:autoStart="true" <<==>> mViewFlipper.startFlipping();  //自动播放

android:flipInterval="2000" <<==>>mViewFlipper.setFilpInterval(2000);  //设置View之间切换的时间间隔

android:inAnimation="@anim/slide_in", android:outAnimation="@anim/slide_out" 对应方法：mViewFlipper.setInAnimation，

mViewFlipper.setOutAnimation。

源文件：ViewFlipperActivity.java

1. package com.xyz.vvv.ViewFlipper;
2. import com.xyz.vvv.R;
3. import android.app.Activity;
4. import android.os.Bundle;
5. import android.view.GestureDetector;
6. import android.view.GestureDetector.OnGestureListener;
7. import android.view.MotionEvent;
8. import android.view.View;
9. import android.view.View.OnTouchListener;
10. import android.widget.ViewFlipper;
11. public class ViewFlipperActivity extends Activity implements OnGestureListener,
12. OnTouchListener {
13. private ViewFlipper mViewFlipper;
14. private GestureDetector mGestureDetector;
15. @Override
16. protected void onCreate(Bundle savedInstanceState) {
17. // TODO Auto-generated method stub
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.viewflipper_layout);
20. mGestureDetector = new GestureDetector(this);
21. mViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
22. mViewFlipper.setOnTouchListener(this);
23. mViewFlipper.startFlipping();
24. }
25. @Override
26. public boolean onDown(MotionEvent e) {
27. // TODO Auto-generated method stub
28. return false;
29. }
30. @Override
31. public void onShowPress(MotionEvent e) {
32. // TODO Auto-generated method stub
33. }
34. @Override
35. public boolean onSingleTapUp(MotionEvent e) {
36. // TODO Auto-generated method stub
37. return false;
38. }
39. @Override
40. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
41. float distanceY) {
42. // TODO Auto-generated method stub
43. return false;
44. }
45. @Override
46. public void onLongPress(MotionEvent e) {
47. // TODO Auto-generated method stub
48. }
49. @Override
50. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
51. float velocityY) {
52. // TODO Auto-generated method stub
53. if (e2.getX() - e1.getX() > 0) {
54. //mViewFlipper.showPrevious();
55. } else {
56. //mViewFlipper.showNext();
57. }
58. return true;
59. }
60. @Override
61. public boolean onTouch(View v, MotionEvent event) {
62. // TODO Auto-generated method stub
63. mGestureDetector.onTouchEvent(event);
64. return true;
65. }
66. }

效果图如下：

图片太宽了，还有一张没加进来（图片来自手机QQ）。

这是ViewFlipper静态加载View，动态加载View请看：ViewFlipper动态加载View

3.ViewFlow

Viewflow 是 Android 平台上一个视图切换的效果库，非标准的得自己下载。ViewFlow 相当于 Android UI 部件提供水平滚动的 ViewGroup，使用 Adapter 进行条目绑定。这个拿来主义 ^-^

按图说话吧：  带圆点的指示器。

配置文件：circle_viewflow_layout.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:xyz="http://schemas.android.com/apk/res/com.xyz.vvv"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:orientation="vertical" >
7. <org.taptwo.android.widget.ViewFlow
8. android:id="@+id/viewflow"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent"
11. xyz:sidebuffer="3" >
12. </org.taptwo.android.widget.ViewFlow>
13. <org.taptwo.android.widget.CircleFlowIndicator
14. android:id="@+id/viewflowindic"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_gravity="bottom|center_horizontal"
18. android:padding="10dip"
19. android:layout_marginBottom="10dip"
20. xyz:fadeOut="1000"
21. xyz:inactiveType="stroke" />
22. </FrameLayout>

源文件：CircleViewFlowActivity.java

1. package com.xyz.vvv.ViewFlow;
2. import org.taptwo.android.widget.CircleFlowIndicator;
3. import org.taptwo.android.widget.ViewFlow;
4. import com.xyz.vvv.R;
5. import android.app.Activity;
6. import android.content.Context;
7. import android.content.res.Configuration;
8. import android.os.Bundle;
9. import android.view.LayoutInflater;
10. import android.view.View;
11. import android.view.ViewGroup;
12. import android.widget.BaseAdapter;
13. import android.widget.ImageView;
14. public class CircleViewFlowActivity extends Activity {
15. private ViewFlow mViewFlow;
16. private CircleFlowIndicator mIndicator = null;
17. /** Called when the activity is first created. */
18. @Override
19. public void onCreate(Bundle savedInstanceState) {
20. super.onCreate(savedInstanceState);
21. setTitle(R.string.circle_title);
22. setContentView(R.layout.circle_viewflow_layout);
23. mViewFlow = (ViewFlow) findViewById(R.id.viewflow);
24. mViewFlow.setAdapter(new ViewFlowAdapter(this), 0);
25. mIndicator = (CircleFlowIndicator) findViewById(R.id.viewflowindic);
26. mViewFlow.setFlowIndicator(mIndicator);
27. }
28. @Override
29. public void onConfigurationChanged(Configuration newConfig) {
30. super.onConfigurationChanged(newConfig);
31. mViewFlow.onConfigurationChanged(newConfig);
32. }
33. private class ViewFlowAdapter extends BaseAdapter {
34. private Context mContext;
35. private LayoutInflater mInflater = null;
36. private final int[] mImageIds = { R.drawable.cupcake, R.drawable.donut,
37. R.drawable.eclair, R.drawable.froyo, R.drawable.gingerbread,
38. R.drawable.honeycomb, R.drawable.icecream };
39. public ViewFlowAdapter(Context ctx) {
40. mContext = ctx;
41. mInflater = (LayoutInflater) mContext
42. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
43. }
44. @Override
45. public int getCount() {
46. // TODO Auto-generated method stub
47. return mImageIds.length;
48. }
49. @Override
50. public Integer getItem(int position) {
51. // TODO Auto-generated method stub
52. return mImageIds[position];
53. }
54. @Override
55. public long getItemId(int position) {
56. // TODO Auto-generated method stub
57. return position;
58. }
59. @Override
60. public View getView(int position, View convertView, ViewGroup parent) {
61. // TODO Auto-generated method stub
62. if (convertView == null) {
63. convertView = mInflater.inflate(R.layout.circle_viewflow_item_layout,
64. null);
65. }
66. ((ImageView) convertView.findViewById(R.id.img_view))
67. .setImageResource(getItem(position));
68. return convertView;
69. }
70. }
71. }

ViewFlow还有其他几个例子，个人觉得用的不多，就不贴啦，感兴趣的可以下载下来研究下。

源码下载：http://download.csdn.net/detail/zhouyuanjing/4886174

~~完~~