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

最新推荐文章于 2019-04-28 22:47:56 发布

trto1987

最新推荐文章于 2019-04-28 22:47:56 发布

阅读量1.3k

点赞数

分类专栏： android 文章标签： android 滑动图片图片序号指示器

本文链接：https://blog.csdn.net/trto1987/article/details/9532161

版权

android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

下面上代码：

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;			//处理左右滑动的Handler
	private 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() {
			
			@Override
			public 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() {
			
			@Override
			public 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(){

			@Override
			public void run() {
				if(!isBreak){		//如果被电击事件打断，则跳过本次播放
					handler.sendEmptyMessage(0);
				} else {
					isBreak = false;
				}
			}
			
		};
		timer.schedule(autoPlayTask, breakTime, breakTime);
	}
	
	/**
	 * 停止自动播放
	 */
	public void stopAutoPlay(){
		autoPlayTask.cancel();
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		isBreak = true;
		return super.onTouchEvent(event);
	}
	
	@SuppressLint("HandlerLeak")
	class ImageHandler extends Handler{
		@Override
		public 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{
		@Override
		public boolean onDown(MotionEvent e) { return false; }
		
		@Override
		public 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;
		}

		@Override
		public void onLongPress(MotionEvent e) {}

		@Override
		public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; }

		@Override
		public void onShowPress(MotionEvent e) {}

		@Override
		public 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;

	@Override
	protected 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>

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