AndroidのViewFlipper和ViewPager

1. 知识点：

1.ViewFlipper基本用法及动态添加View；

任意张图片实现循环滑动，其实PageFlipper当前最多的子View个数(ChildViewCount)小于等于2.

1、ViewFlipper

1）View切换的控件—ViewFlipper介绍

ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout。

查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果。该类有如下几个和动画相关的方法。

setInAnimation：设置View进入屏幕时候使用的动画。该方法有两个重载方法，即可以直接传入Animation对象，也可以传入定义的Animation文件的resourceID。

setOutAnimation：设置View退出屏幕时候使用的动画。使用方法和setInAnimation方法一样。

showNext：调用该方法可以显示FrameLayout里面的下一个View。

showPrevious：调用该方法可以来显示FrameLayout里面的上一个View。

查看ViewFlipper的源码可以看到，ViewFlipper主要用来实现View的自动切换。该类提供了如下几个主要的方法。

setFilpInterval：设置View切换的时间间隔。参数为毫秒。

startFlipping：开始进行View的切换，时间间隔是上述方法设置的间隔数。切换会循环进行。

stopFlipping：停止View切换。

setAutoStart：设置是否自动开始。如果设置为“true”，当ViewFlipper显示的时候View的切换会自动开始。

一般情况下，我们都会使用ViewFilpper类实现View的切换，而不使用它的父类ViewAnimator类。

2）实现滑动—GestureDetector介绍

如果想要实现滑动翻页的效果，就要了解另外一个类：android.view.GestureDetector类。GestureDetector类中可以用来检测各种手势事件。该类有两个回调接口，分别用来通知具体的事件。

GestureDetector.OnDoubleTapListener：用来通知DoubleTap事件，类似于PC上面的鼠标的双击事件。

GestureDetector.OnGestureListener：用来通知普通的手势事件，该接口有六个回调方法，具体的可以查看API。这里想要实现滑动的判断，就需要用到其中的onFling()方法。

3）具体的实现

下面的代码片段详细说明了如何实现滑动翻页。

<?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" >    <ViewFlipper        android:id="@+id/viewFlipper1"        android:layout_width="fill_parent"        android:layout_height="fill_parent" >        <ImageView            android:id="@+id/imageView1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:src="@drawable/b" />         <ImageView            android:id="@+id/imageView2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:src="@drawable/c" />          <ImageView            android:id="@+id/imageView3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:src="@drawable/d" />          <ImageView            android:id="@+id/imageView4"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:src="@drawable/f" />         <ImageView            android:id="@+id/imageView5"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:src="@drawable/g" />    </ViewFlipper></LinearLayout>

public class ViewFlipperActivity extends Activity implements OnTouchListener, android.view.GestureDetector.OnGestureListener {    private ViewFlipper flipper;    GestureDetector mGestureDetector;      private int mCurrentLayoutState;      private static final int FLING_MIN_DISTANCE = 80;      private static final int FLING_MIN_VELOCITY = 150;      @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.viewflipper);                flipper=(ViewFlipper) this.findViewById(R.id.viewFlipper1);         //注册一个用于手势识别的类          mGestureDetector = new GestureDetector(this);          //给mFlipper设置一个listener          flipper.setOnTouchListener(this);          mCurrentLayoutState = 0;          //允许长按住ViewFlipper,这样才能识别拖动等手势          flipper.setLongClickable(true);              }    /**       * 此方法在本例中未用到，可以指定跳转到某个页面       * @param switchTo       */      public void switchLayoutStateTo(int switchTo) {          while (mCurrentLayoutState != switchTo)   {              if (mCurrentLayoutState > switchTo) {                  mCurrentLayoutState--;                  flipper.setInAnimation(inFromLeftAnimation());                  flipper.setOutAnimation(outToRightAnimation());                  flipper.showPrevious();              } else {                  mCurrentLayoutState++;                  flipper.setInAnimation(inFromRightAnimation());                  flipper.setOutAnimation(outToLeftAnimation());                  flipper.showNext();              }             }       }     /**       * 定义从右侧进入的动画效果       * @return       */      protected Animation inFromRightAnimation() {          Animation inFromRight = new TranslateAnimation(                  Animation.RELATIVE_TO_PARENT, +1.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f);          inFromRight.setDuration(200);          inFromRight.setInterpolator(new AccelerateInterpolator());          return inFromRight;      }         /**       * 定义从左侧退出的动画效果       * @return       */      protected Animation outToLeftAnimation() {          Animation outtoLeft = new TranslateAnimation(                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, -1.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f);          outtoLeft.setDuration(200);          outtoLeft.setInterpolator(new AccelerateInterpolator());          return outtoLeft;      }         /**       * 定义从左侧进入的动画效果       * @return       */      protected Animation inFromLeftAnimation() {          Animation inFromLeft = new TranslateAnimation(                  Animation.RELATIVE_TO_PARENT, -1.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f);          inFromLeft.setDuration(200);          inFromLeft.setInterpolator(new AccelerateInterpolator());          return inFromLeft;      }          /**       * 定义从右侧退出时的动画效果       * @return       */      protected Animation outToRightAnimation() {          Animation outtoRight = new TranslateAnimation(                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, +1.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f,                  Animation.RELATIVE_TO_PARENT, 0.0f);          outtoRight.setDuration(200);          outtoRight.setInterpolator(new AccelerateInterpolator());          return outtoRight;      }          public boolean onDown(MotionEvent e) {        // TODO Auto-generated method stub        return false;    }    /*       * 用户按下触摸屏、快速移动后松开即触发这个事件       * e1：第1个ACTION_DOWN MotionEvent       * e2：最后一个ACTION_MOVE MotionEvent       * velocityX：X轴上的移动速度，像素/秒       * velocityY：Y轴上的移动速度，像素/秒       * 触发条件 ：       * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒       */    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,            float velocityY) {         if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE                      && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                  // 当像左侧滑动的时候                  //设置View进入屏幕时候使用的动画                  flipper.setInAnimation(inFromRightAnimation());                  //设置View退出屏幕时候使用的动画                  flipper.setOutAnimation(outToLeftAnimation());                  flipper.showNext();              } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                      && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                  // 当像右侧滑动的时候                  flipper.setInAnimation(inFromLeftAnimation());                  flipper.setOutAnimation(outToRightAnimation());                  flipper.showPrevious();              }              return false;      }    public void onLongPress(MotionEvent e) {        // TODO Auto-generated method stub            }    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,            float distanceY) {        // TODO Auto-generated method stub        return false;    }    public void onShowPress(MotionEvent e) {        // TODO Auto-generated method stub            }    public boolean onSingleTapUp(MotionEvent e) {        // TODO Auto-generated method stub        return false;    }    public boolean onTouch(View v, MotionEvent event) {        // TODO Auto-generated method stub          // 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）          return mGestureDetector.onTouchEvent(event);      }        }

from：http://blog.csdn.net/arui319

2、ViewPager

说明：

ViewPager用于实现多页面的切换效果，该类存在于Google的兼容包里面，所以在引用时记得在BuilldPath中加入“android-support-v4.jar”

主布局文件

main.xml

<?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.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" >        <android.support.v4.view.PagerTitleStrip            android:id="@+id/pagertitle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="top" />    </android.support.v4.view.ViewPager></LinearLayout>

其中ViewPager为多页显示控件，PagerTitleStrip用于显示当前页面的标题

主窗口代码：

PagerTitleDemoActivity.java

package com.ns.pager;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTitleStrip;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;public class PagerTitleDemoActivity extends Activity {    /** Called when the activity is first created. */    private ViewPager mViewPager;    private PagerTitleStrip mPagerTitleStrip;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        mViewPager = (ViewPager)findViewById(R.id.viewpager);        mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);                //将要分页显示的View装入数组中        LayoutInflater mLi = LayoutInflater.from(this);        View view1 = mLi.inflate(R.layout.view1, null);        View view2 = mLi.inflate(R.layout.view2, null);        View view3 = mLi.inflate(R.layout.view3, null);                //每个页面的Title数据        final ArrayList<View> views = new ArrayList<View>();        views.add(view1);        views.add(view2);        views.add(view3);                final ArrayList<String> titles = new ArrayList<String>();        titles.add("tab1");        titles.add("tab2");        titles.add("tab3");                //填充ViewPager的数据适配器        PagerAdapter mPagerAdapter = new PagerAdapter() {                        @Override            public boolean isViewFromObject(View arg0, Object arg1) {                return arg0 == arg1;            }                        @Override            public int getCount() {                return views.size();            }            @Override            public void destroyItem(View container, int position, Object object) {                ((ViewPager)container).removeView(views.get(position));            }            @Override            public CharSequence getPageTitle(int position) {                return titles.get(position);            }            @Override            public Object instantiateItem(View container, int position) {                ((ViewPager)container).addView(views.get(position));                return views.get(position);            }        };                mViewPager.setAdapter(mPagerAdapter);    }}

3. 源码下载点击下载

AndroidのViewFlipper和ViewPager

AndroidのViewFlipper和ViewPager

更多相关文章

随机推荐