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>
from：http://blog.csdn.net/sjf0115/article/details/7253430