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

2021-09-10 14:14:17

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

 

开篇

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

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

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下载]

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

         切入正题，ViewPager用法如下：

配置文件：viewpager_layout.xml:

 

[java] view plaincopy
 
  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.       
  6.     <android.support.v4.view.ViewPager  
  7.         android:id="@+id/viewpager"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content" />  
  10.   
  11. </RelativeLayout>  



源文件如下ViewPagerActivity.java如下：

 

 

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

 

 

 

 

 

 

 

 

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

 

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

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

 

2.ViewFlipper

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

配置文件：viewflipper_layout.xml

[java] view plaincopy
 
  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.   
  7.     <ViewFlipper  
  8.         android:id="@+id/viewflipper"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:inAnimation="@anim/slide_in"  
  12.         android:outAnimation="@anim/slide_out"  
  13.         android:flipInterval="2000" >  
  14.   
  15.         <include layout="@layout/viewflipper_one_layout" />  
  16.   
  17.         <include layout="@layout/viewflipper_two_layout" />  
  18.   
  19.         <include layout="@layout/viewflipper_three_layout" />  
  20.   
  21.         <include layout="@layout/viewflipper_four_layout" />  
  22.   
  23.         <include layout="@layout/viewflipper_five_layout" />  
  24.     </ViewFlipper>  
  25.   
  26.     <!--    
  27.     <com.xyz.vvv.PageControlView  
  28.         android:id="@+id/viewflipper_indicator"  
  29.         android:layout_width="fill_parent"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_marginBottom="25dip"  
  32.         android:gravity="center_horizontal"  
  33.         android:layout_alignParentBottom="true"  
  34.         xyz:cell_width="@dimen/indicator_width"  
  35.         xyz:cell_height="@dimen/indicator_height" />  
  36.     -->  
  37.   
  38. </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

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

效果图如下：

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

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

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

 

3.ViewFlow

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

           按图说话吧：  带圆点的指示器。
【转】android ViewPager,ViewFlipper,ViewFlow实现左右滑动

配置文件：circle_viewflow_layout.xml

[java] view plaincopy
 
  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.   
  8.     <org.taptwo.android.widget.ViewFlow  
  9.         android:id="@+id/viewflow"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent"  
  12.         xyz:sidebuffer="3" >  
  13.     </org.taptwo.android.widget.ViewFlow>  
  14.   
  15.     <org.taptwo.android.widget.CircleFlowIndicator  
  16.         android:id="@+id/viewflowindic"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_gravity="bottom|center_horizontal"  
  20.         android:padding="10dip"  
  21.         android:layout_marginBottom="10dip"  
  22.         xyz:fadeOut="1000"  
  23.         xyz:inactiveType="stroke" />  
  24.   
  25. </FrameLayout>  

源文件：CircleViewFlowActivity.java

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

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

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

        ~~完~~

【转】android ViewPager,ViewFlipper,ViewFlow实现左右滑动,布布扣,bubuko.com

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

上一篇：如何编写android ANE


下一篇：ios-ASIHTTPRequest下载与进度条以及用观察者模式来监听进度条属性