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

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

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="wrap_content" />

</RelativeLayout>

源文件如下ViewPagerActivity.java如下：

[java] view
plaincopy

package com.xyz.vvv.ViewPager;

import java.util.ArrayList;

import com.xyz.vvv.R;

import android.app.ActionBar;

import android.app.ActionBar.LayoutParams;

import android.app.ActionBar.Tab;

import android.app.ActionBar.TabListener;

import android.app.Activity;

import android.app.Fragment;

import android.app.FragmentTransaction;

import android.content.Context;

import android.os.Bundle;

import android.support.v13.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

public class ViewPagerActivity extends Activity {

private ViewPager mViewPager;

private ViewPagerAdapter mAdapter;

private ActionBar mTabBar;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.viewpager_layout);

mViewPager = (ViewPager) findViewById(R.id.viewpager);

mAdapter = new ViewPagerAdapter(this, mViewPager);

mTabBar = getActionBar();

mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_qworld),

FirstFragment.class, null);

mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_group),

SecondFragment.class, null);

mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_friends),

ThreeFragment.class, null);

mAdapter.addTab(mTabBar.newTab().setIcon(R.drawable.tab_icon_recent),

FourFragment.class, null);

}

private View getCustomView() {

return getLayoutInflater().inflate(R.layout.title_panel_layout, null);

}

private static class ViewPagerAdapter extends FragmentPagerAdapter

implements TabListener, OnPageChangeListener {

private Context mContext;

private ActionBar mActionBar = null;

private ViewPager mViewPager = null;

private ArrayList<TabInfo> mTabList = new ArrayList<TabInfo>();

public ViewPagerAdapter(Activity activity, ViewPager viewPager) {

// TODO Auto-generated constructor stub

super(activity.getFragmentManager());

mContext = activity;

mActionBar = activity.getActionBar();

/*

* mActionBar.setCustomView(getCustomView(), new LayoutParams(

* LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

*/

mActionBar.setDisplayOptions(mActionBar.getDisplayOptions()

^ ActionBar.DISPLAY_SHOW_HOME

^ ActionBar.DISPLAY_SHOW_TITLE, ActionBar.DISPLAY_SHOW_HOME

| ActionBar.DISPLAY_SHOW_TITLE);

mActionBar.setDisplayShowHomeEnabled(false);

mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

mViewPager = viewPager;

mViewPager.setAdapter(this);

mViewPager.setOnPageChangeListener(this);

}

/** Override OnPageChangeListener start **/

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrolled(int position, float positionOffset,

int positionOffsetPixels) {

// TODO Auto-generated method stub

}

@Override

public void onPageSelected(int position) {

// TODO Auto-generated method stub

mActionBar.setSelectedNavigationItem(position);

}

/** Override OnPageChangeListener end **/

/** Override TabListener start **/

@Override

public void onTabSelected(Tab tab, FragmentTransaction ft) {

// TODO Auto-generated method stub

Object tag = tab.getTag();

for (int i = 0; i < mTabList.size(); i++) {

if (mTabList.get(i) == tag) {

mViewPager.setCurrentItem(i);

}

}

}

@Override

public void onTabUnselected(Tab tab, FragmentTransaction ft) {

// TODO Auto-generated method stub

}

@Override

public void onTabReselected(Tab tab, FragmentTransaction ft) {

// TODO Auto-generated method stub

}

/** Override TabListener end **/

/** Override FragmentPagerAdapter start **/

@Override

public Fragment getItem(int position) {

// TODO Auto-generated method stub

TabInfo tab = mTabList.get(position);

if (tab.fragment == null) {

tab.fragment = Fragment.instantiate(mContext,

tab.clazz.getName(), tab.bundle);

}

return tab.fragment;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return mTabList.size();

}

/** Override FragmentPagerAdapter end **/

private View getCustomView() {

LayoutInflater inflater = (LayoutInflater) mContext

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

return inflater.inflate(R.layout.title_panel_layout, null);

}

public void addTab(Tab tab, Class<?> clazz, Bundle bundle) {

TabInfo tabInfo = new TabInfo(clazz, bundle);

tab.setTag(tabInfo);

tab.setTabListener(this);

mTabList.add(tabInfo);

mActionBar.addTab(tab);

notifyDataSetChanged();

}

private static final class TabInfo {

private final Class<?> clazz;

private final Bundle bundle;

Fragment fragment;

TabInfo(Class<?> clazz, Bundle bundle) {

this.clazz = clazz;

this.bundle = bundle;

}

}

}

}

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



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

2.ViewFlipper

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

配置文件：viewflipper_layout.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:xyz="http://schemas.android.com/apk/res/com.xyz.vvv"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<ViewFlipper

android:id="@+id/viewflipper"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:inAnimation="@anim/slide_in"

android:outAnimation="@anim/slide_out"

android:flipInterval="2000" >

<include layout="@layout/viewflipper_one_layout" />

<include layout="@layout/viewflipper_two_layout" />

<include layout="@layout/viewflipper_three_layout" />

<include layout="@layout/viewflipper_four_layout" />

<include layout="@layout/viewflipper_five_layout" />

</ViewFlipper>

<!--

<com.xyz.vvv.PageControlView

android:id="@+id/viewflipper_indicator"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="25dip"

android:gravity="center_horizontal"

android:layout_alignParentBottom="true"

xyz:cell_width="@dimen/indicator_width"

xyz:cell_height="@dimen/indicator_height" />

-->

</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

package com.xyz.vvv.ViewFlipper;

import com.xyz.vvv.R;

import android.app.Activity;

import android.os.Bundle;

import android.view.GestureDetector;

import android.view.GestureDetector.OnGestureListener;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.widget.ViewFlipper;

public class ViewFlipperActivity extends Activity implements OnGestureListener,

OnTouchListener {

private ViewFlipper mViewFlipper;

private GestureDetector mGestureDetector;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.viewflipper_layout);

mGestureDetector = new GestureDetector(this);

mViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);

mViewFlipper.setOnTouchListener(this);

mViewFlipper.startFlipping();

}

@Override

public boolean onDown(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@Override

public void onShowPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@Override

public boolean onSingleTapUp(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@Override

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,

float distanceY) {

// TODO Auto-generated method stub

return false;

}

@Override

public void onLongPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

// TODO Auto-generated method stub

if (e2.getX() - e1.getX() > 0) {

//mViewFlipper.showPrevious();

} else {

//mViewFlipper.showNext();

}

return true;

}

@Override

public boolean onTouch(View v, MotionEvent event) {

// TODO Auto-generated method stub

mGestureDetector.onTouchEvent(event);

return true;

}

}

效果图如下：



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

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

3.ViewFlow

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

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



配置文件：circle_viewflow_layout.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:xyz="http://schemas.android.com/apk/res/com.xyz.vvv"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<org.taptwo.android.widget.ViewFlow

android:id="@+id/viewflow"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xyz:sidebuffer="3" >

</org.taptwo.android.widget.ViewFlow>

<org.taptwo.android.widget.CircleFlowIndicator

android:id="@+id/viewflowindic"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center_horizontal"

android:padding="10dip"

android:layout_marginBottom="10dip"

xyz:fadeOut="1000"

xyz:inactiveType="stroke" />

</FrameLayout>

源文件：CircleViewFlowActivity.java

[java] view
plaincopy

package com.xyz.vvv.ViewFlow;

import org.taptwo.android.widget.CircleFlowIndicator;

import org.taptwo.android.widget.ViewFlow;

import com.xyz.vvv.R;

import android.app.Activity;

import android.content.Context;

import android.content.res.Configuration;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

public class CircleViewFlowActivity extends Activity {

private ViewFlow mViewFlow;

private CircleFlowIndicator mIndicator = null;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setTitle(R.string.circle_title);

setContentView(R.layout.circle_viewflow_layout);

mViewFlow = (ViewFlow) findViewById(R.id.viewflow);

mViewFlow.setAdapter(new ViewFlowAdapter(this), 0);

mIndicator = (CircleFlowIndicator) findViewById(R.id.viewflowindic);

mViewFlow.setFlowIndicator(mIndicator);

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

mViewFlow.onConfigurationChanged(newConfig);

}

private class ViewFlowAdapter extends BaseAdapter {

private Context mContext;

private LayoutInflater mInflater = null;

private final int[] mImageIds = { R.drawable.cupcake, R.drawable.donut,

R.drawable.eclair, R.drawable.froyo, R.drawable.gingerbread,

R.drawable.honeycomb, R.drawable.icecream };

public ViewFlowAdapter(Context ctx) {

mContext = ctx;

mInflater = (LayoutInflater) mContext

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return mImageIds.length;

}

@Override

public Integer getItem(int position) {

// TODO Auto-generated method stub

return mImageIds[position];

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub

if (convertView == null) {

convertView = mInflater.inflate(R.layout.circle_viewflow_item_layout,

null);

}

((ImageView) convertView.findViewById(R.id.img_view))

.setImageResource(getItem(position));

return convertView;

}

}

}

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

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

~~完~~