ViewFlipper、ViewPager和Gallery

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);
    }
}

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、Gallery

package xiaosi.gallery;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class GalleryActivity extends Activity {
    /** Called when the activity is first created. */
    private Gallery gallery =null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        gallery = (Gallery)findViewById(R.id.gallery);
        //设置图片适配器
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setSpacing(5);

        //设置监听器
        gallery.setOnItemClickListener(new OnItemClickListener() {

            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,    long arg3) {
                Toast.makeText(GalleryActivity.this, "点击了第"+arg2+"张图片", Toast.LENGTH_LONG).show();
            }
        });
    }
}

class ImageAdapter extends BaseAdapter{

    int mGalleryItemBackground;
    private Context context;
    //图片源数组
    private Integer[] imageInteger={
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d
    };
    public ImageAdapter(Context c){
        context = c;
        TypedArray attr = context.obtainStyledAttributes(R.styleable.HelloGallery);
        mGalleryItemBackground = attr.getResourceId(R.styleable.HelloGallery_android_galleryItemBackground, 0);
        attr.recycle();
    }
    // 获取图片的个数
    public int getCount() {
        return imageInteger.length;
    }
    // 获取图片在库中的位置
    public Object getItem(int position) {
        return position;
    }
    // 获取图片ID
    public long getItemId(int position) {
        return position;
    }
    public View getView(int position, View convertView, ViewGroup parent) {

        ImageView imageView = new ImageView(context);
        // 给ImageView设置资源
        imageView.setImageResource(imageInteger[position]);
        // 设置显示比例类型
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        // 设置布局 图片120*80
        imageView.setLayoutParams(new Gallery.LayoutParams(180, 100));
        imageView.setBackgroundResource(mGalleryItemBackground);
        return imageView;
    }
}

mian.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" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:background="?android:galleryItemBackground"/>
</LinearLayout>

创建一个新的XML文件在res/values/目录下 attrs.xml命名。

这是一个定制的styleable资源,可以应用于一个布局。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="HelloGallery">
         <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>