继承ViewFlipper实现左右滑动展示以及下面华丽的点点点

    忙活了一周，今天终于闲下来了。闲来无事，把这周的一些心得拿来与大家分享。

    废话不多话，直接进入主题。量表述不便，直接上图：

   下面上代码：

package cn.trto1987.android.util;import java.util.List;import java.util.Timer;import java.util.TimerTask;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.drawable.Drawable;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.util.Log;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.MotionEvent;import android.view.View;import android.view.animation.AnimationUtils;import android.widget.ViewFlipper;import cn.trto1987.android.test.R;/** * public class<br/> * <b>ImageFlipper</b><br/> * extends {@link ViewFlipper}<br/> * <b>简单左右滑动图片展示，支持自动播放。</b><br/> * 相关的资源:<br/> * <blockquote> *     res/anim/image_left_in.xml, *     res/anim/image_left_out.xml, *     res/anim/image_right_in.xml, *     res/anim/image_right_out.xml * </blockquote> * @author trto1987 */public class ImageFlipper extends ViewFlipper{private List<Drawable> res;//要展示的图片资源private GestureDetector gesture;//手势private Context context;private ImageCounter imageCounter;//图片序号指示器，与本类配合使用private ImageHandler handler;//处理左右滑动的Handlerprivate boolean isBreak = false;//判断自动播放是否点击事件打断private TimerTask autoPlayTask;//定时任务，用来定时滑动public ImageFlipper(Context context) {super(context);this.context = context;this.gesture = new GestureDetector(this.context, new ImageOnGestureListener());//手势监听this.setLongClickable(true);this.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {return gesture.onTouchEvent(event);}});}public ImageFlipper(Context context, AttributeSet attrs){super(context, attrs);this.context = context;this.gesture = new GestureDetector(this.context, new ImageOnGestureListener());this.setLongClickable(true);this.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {return gesture.onTouchEvent(event);}});}/** * 设置图片资源 * @param res List<Drawable> 图片资源 */@SuppressWarnings("deprecation")public void setResources(List<Drawable> res){this.res = res;for( Drawable d : this.res ){View v = new View(context);v.setBackgroundDrawable(d);this.addView(v);}}public int size(){return res.size();}public int getIndex(){return this.getDisplayedChild();}/** * 设置序号指示器 * @param imageCounter 见{@link ImageCounter} */public void setCounter( ImageCounter imageCounter ){this.imageCounter = imageCounter;imageCounter.setCount(size());}/** * 启用自动播放 * @param breakTime 播放间隔 */public void startAutoPlay( int breakTime ){handler = new ImageHandler();Timer timer = new Timer();autoPlayTask = new TimerTask(){@Overridepublic void run() {if(!isBreak){//如果被电击事件打断，则跳过本次播放handler.sendEmptyMessage(0);} else {isBreak = false;}}};timer.schedule(autoPlayTask, breakTime, breakTime);}/** * 停止自动播放 */public void stopAutoPlay(){autoPlayTask.cancel();}@Overridepublic boolean onTouchEvent(MotionEvent event) {isBreak = true;return super.onTouchEvent(event);}@SuppressLint("HandlerLeak")class ImageHandler extends Handler{@Overridepublic void handleMessage(Message msg) {ImageFlipper.this.setInAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_left_in));//滑动动画ImageFlipper.this.setOutAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_left_out));ImageFlipper.this.showNext();//展示下一张if( ImageFlipper.this.imageCounter != null ){ImageFlipper.this.imageCounter.showNext(ImageFlipper.this.getIndex());//配置了图片序号指示器，相应的变化}super.handleMessage(msg);}}class ImageOnGestureListener implements OnGestureListener{@Overridepublic boolean onDown(MotionEvent e) { return false; }@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {Log.e("flipper", "fling");if( e1.getX()-e2.getX() > 120 ){ImageFlipper.this.setInAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_left_in));ImageFlipper.this.setOutAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_left_out));ImageFlipper.this.showNext();if( ImageFlipper.this.imageCounter != null ){ImageFlipper.this.imageCounter.showNext(ImageFlipper.this.getIndex());}return true;} else if( e1.getX()-e2.getX() < -120 ){ImageFlipper.this.setInAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_right_in));ImageFlipper.this.setOutAnimation(AnimationUtils.loadAnimation(ImageFlipper.this.context, R.anim.image_right_out));ImageFlipper.this.showPrevious();if( ImageFlipper.this.imageCounter != null ){ImageFlipper.this.imageCounter.showNext(ImageFlipper.this.getIndex());}return true;}return false;}@Overridepublic void onLongPress(MotionEvent e) {}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; }@Overridepublic void onShowPress(MotionEvent e) {}@Overridepublic boolean onSingleTapUp(MotionEvent e) { return false; }}}

package cn.trto1987.android.util;import java.util.ArrayList;import android.content.Context;import android.util.AttributeSet;import android.widget.ImageView;import android.widget.LinearLayout;import cn.trto1987.android.test.R;/** * public class<br/> * <b>ImageCounter</b><br/> * extends {@link LinearLayout}<br/> * <b>本类配合ImageFlipper使用，指示出显示图片的序号</b><br/> * 相关的资源:<br/> * <blockquote> *     res/drawable/counter_checked.png, *     res/drawable/counter_unchecked.png * </blockquote> * @author trto1987 */public class ImageCounter extends LinearLayout{private int size;//图片的数目private ArrayList<ImageView> list;//指示器的所有指示点private ImageView checked;//正在展示的点private Context context;private LayoutParams viewLayoutParams;//指示点的布局public ImageCounter(Context context) {super(context);this.context = context;list = new ArrayList<ImageView>();viewLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);viewLayoutParams.setMargins(10, 10, 10, 10);}public ImageCounter(Context context, AttributeSet attrs){super(context,attrs);this.context = context;list = new ArrayList<ImageView>();viewLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);viewLayoutParams.setMargins(10, 10, 10, 10);}/** * 绑定到{@link ImageFlipper} * @param size 图片数目 */public void setCount(int size) {this.size = size;for( int i = 0; i < this.size; i ++ ){ImageView v = new ImageView(context);v.setLayoutParams(this.viewLayoutParams);if(i==0){v.setBackgroundResource(R.drawable.counter_checked);checked = v;} else {v.setBackgroundResource(R.drawable.counter_unchecked);}this.addView(v);list.add(v);}}/** * 指示下一个，在{@link ImageFlipper}中调用 * @param index 图片序号 */public void showNext(int index){if(checked!=null){checked.setBackgroundResource(R.drawable.counter_unchecked);}checked = list.get(index);checked.setBackgroundResource(R.drawable.counter_checked);}}

下面是实现上图的代码：

res/layout/main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#e0e0e0"    tools:context=".MainActivity" >    <cn.trto1987.android.util.ImageFlipper        android:id="@+id/imgs"        android:layout_width="200dp"        android:layout_height="150dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="50dp"/>        <cn.trto1987.android.util.ImageCounter        android:id="@+id/imgsCounter"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_below="@+id/imgs"        android:layout_marginTop="10dp"/>    </RelativeLayout>

src/cn.trto1987.android.test/MainActivity.java

package cn.trto1987.android.test;import java.util.ArrayList;import android.app.Activity;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.view.Window;import cn.trto1987.android.util.ImageCounter;import cn.trto1987.android.util.ImageFlipper;public class MainActivity extends Activity {private ImageFlipper imageFlipper;private ImageCounter imageCounter;private ArrayList<Drawable> imgList;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.main);initView();}private void initView() {imgList = new ArrayList<Drawable>();imgList.add(getResources().getDrawable(R.drawable.a));imgList.add(getResources().getDrawable(R.drawable.b));imgList.add(getResources().getDrawable(R.drawable.c));imageFlipper = (ImageFlipper) findViewById(R.id.imgs);imageCounter = (ImageCounter) findViewById(R.id.imgsCounter);imageFlipper.setResources(imgList);imageFlipper.setCounter(imageCounter);imageFlipper.startAutoPlay(3000);}}

其他的一些关联的东东：

res/anim/image_left_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <translate        android:duration="500"        android:fromXDelta="100%p"        android:toXDelta="0" />    <alpha        android:duration="500"        android:fromAlpha="0.1"        android:toAlpha="1.0" /></set>

res/anim/image_left_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <translate        android:duration="500"        android:fromXDelta="0"        android:toXDelta="-100%p" />    <alpha        android:duration="500"        android:fromAlpha="1.0"        android:toAlpha="0.1" /></set>

res/anim/image_right_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <translate        android:duration="500"        android:fromXDelta="-100%p"        android:toXDelta="0" />    <alpha        android:duration="500"        android:fromAlpha="0.1"        android:toAlpha="1.0" /></set>

res/anim/image_right_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <translate        android:duration="500"        android:fromXDelta="0"        android:toXDelta="100%p" />    <alpha        android:duration="500"        android:fromAlpha="1.0"        android:toAlpha="0.1" /></set>

    暂时就这些了，欢迎一起讨论！