zoukankan      html  css  js  c++  java

  • 【转】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:

    [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，运行效果如下：

            第一个就弄里个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. }  

    效果图如下：

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

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

    3.ViewFlow

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

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

    配置文件：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

            ~~完~~
  • 相关阅读:
    JSP指令用来设置整个JSP页面相关的属性
    JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期
    JSP 开发环境搭建
    JSP（Java Server Pages，即：Java服务器页面
    JSP 国际化
    JSP 调试
    JSP 异常处理
    JSP 自定义标签
    JSP JavaBean
    JSP 标准标签库（JSTL）
  • 原文地址：https://www.cnblogs.com/wliangde/p/3665088.html
Copyright © 2011-2022 走看看