android - 滑动效果之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);  
    }
    
    
}

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

运行效果：

from：http://my.oschina.net/fanxiao/blog/40306

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>