Android自定义View使用canvas实现轮播图效果

1.功能分析

1.1 左右滑动切换图片，并且实现循环切换。

1.2 自动切换图片

1.3 导航圆点跟随轮播变更

1.4 点击图片，实现监听反馈

1.5 图片需要适配屏幕，按定义宽高显示



2.代码实现

2.1 实现原理

每次加载显示需要3张图片，并且偏移至左中右三个位置，不断地重绘view，修改偏移值，达到切换图片效果。

2.2 代码实现

创建自定义View类CarouselFigure，在onMeasure方法中，获取容器view的宽度，这里使用默认显示图片宽度与view容器宽度比值，作为适配比，然后确定容器view显示高度。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取view宽高
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight = MeasureSpec.getSize(heightMeasureSpec);
//默认showindex对应图片适配后宽高，做轮播图整体宽高
if(imgList!=null && imgList.size()>0){
Bitmap bitmap = imgList.get(showIndex);
float scale = (float)mWidth / bitmap.getWidth();
mHeight = (int) (scale * bitmap.getHeight());
}
setMeasuredDimension(mWidth,mHeight);
}

手指左右滑动图片时候，获取横向手指偏移量，偏移量具有方向，向左为负，向右为正。向左偏移，左中右图片动态偏移量分别为，-mWidth+offset ，offset，mWidth+offset。showIndex表示显示图片imgList中索引号，pre_show_index为左图索引号，next_show_index为右图索引号。通过变更偏移和索引号，切换显示图片。

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//判断偏移之后在临界值
float min_x = mWidth-Math.abs(offset);
//小于临界值时，改变显示图片索引值
if(min_x<MIN_WIDTH_OFFSET_VALUE){
//左移动
if(offset<0 ){
showIndex ++;
}
if(offset>0 ){
showIndex--;
}
//回归
reSetValue();
}
//初始化showIndex
initShowIndex();
//构画左中右三图
handleImgWnH(pre_show_index);
handleImgWnH(showIndex);
handleImgWnH(next_show_index);
canvas.drawBitmap(imgList.get(pre_show_index),-mWidth+offset,0,mPaint);
canvas.drawBitmap(imgList.get(showIndex),offset,0,mPaint);
canvas.drawBitmap(imgList.get(next_show_index),mWidth+offset,0,mPaint);
//构画导航圆点
drawCycle(canvas);
}

一开始触摸图片，记录当前触摸坐标，标记为初始坐标startPoint，移动时获取实时坐标，计算手势滑动方向与水平方向夹角正切值，判断是否是水平滑动，如果是横向水平滑动，则记录滑动偏移量，调用invalidate进行重绘

@Override
public boolean onTouchEvent(MotionEvent event) {
//正在刷新禁止触摸
if(isRefreshing){return true;}
//正在自动轮播时，不能触发
if(isAutoSliding||isGestureSliding){return true;}
int action = event.getAction();
switch (action){
case MotionEvent.ACTION_DOWN:
//关闭自动轮播
isAllowAutoSlid = false;
startPoint.set(event.getX(),event.getY());//记录初始值
return true;
case MotionEvent.ACTION_MOVE:
float min_x = Math.abs(startPoint.x - event.getX());
float min_y = Math.abs(startPoint.y - event.getY());
//获取正切值
float angle_tan_value = min_y / min_x;
if(angle_tan_value<MIN_ANGLE_TAN_VALUE){ //横向滑动
min_x = event.getX() - startPoint.x ;
offset = old_offset + min_x;
nowPoint.set(event.getX(),event.getY());//记录当前坐标
invalidate();
}
return true;
case MotionEvent.ACTION_UP:
old_offset = offset;//记录上一次偏移量
//滑动手势产生图片切换效果
post(slidImgRunnable);
//重新开启自动轮播
isAllowAutoSlid = true;
if(offset==0) {
onTopImageClickListeners.onClick(showIndex);
}
return true;
}
return false;

}

此时，已经实现让图片跟随手指偏移。但是图片并不会自动保持滑动惯性，使自己显示完全。 因此，需要在ACTION_UP处补充一个方法，让图片继续完成剩下偏移。此处使用线程slidImgRunnable

private Runnable slidImgRunnable = new Runnable() {
@Override
public void run() {
float abs_offset = Math.abs(offset);
//向左移动
if(offset<0) {
if(abs_offset<ALLOW_SLID_IMG_OFFSET){  //允许产生滑动的偏移量，否则图片回归原位置
offset += SLID_IMG_INTERVAL_OFFSET;
if(offset>0){
reSetValue();
}
}else {
offset += -SLID_IMG_INTERVAL_OFFSET;
}
}else if(offset>0){ //向右移动
if(abs_offset<ALLOW_SLID_IMG_OFFSET){ //允许产生滑动的偏移量，否则图片回归原位置
offset += -SLID_IMG_INTERVAL_OFFSET;
if(offset<0){
reSetValue();
}
}else {
offset += SLID_IMG_INTERVAL_OFFSET;
}
}
//当滑动之后 offset重置为0 结束循环
if(abs_offset==0){
isGestureSliding = false;
return;
}
isGestureSliding = true;
invalidate();
postDelayed(slidImgRunnable,SLID_IMG_INTERVALS);
}
};

无论向左还是向右移动，offset 绝对值都在增大，并且offset区间在0~mWidth之间，所以，只要设定一个递增偏移常量，不断循环执行修改偏移量和重绘，就可以让图片自动完成偏移。

自动轮播效果，需要另启一循环线程执行。autoSlidImg决定轮播周期，autoSlidImgRunnable 完成偏移量递增，和重绘view

/**
* 开启自动轮播
*/
private void autoSlidImg()  {
new Thread(new Runnable() {
@Override
public void run() {
try {
while (true){
Thread.sleep(4000);//每4秒轮播一次
if(isAllowAutoSlid){
post(autoSlidImgRunnable);
}
}
}catch (Exception e ){
}
}
}).start();
}

/**
* 实现自动轮播效果
*/
private Runnable autoSlidImgRunnable = new Runnable() {
@Override
public void run() {
offset += -SLID_IMG_INTERVAL_OFFSET;
if (isNextCycle) {//判断是否可以继续产生偏移，完成一次轮播后退出
offset=0;
isNextCycle=false;
isAutoSliding = false;
return;
}else{
isAutoSliding = true;//正在轮播滑动
}
invalidate();
postDelayed(autoSlidImgRunnable, SLID_IMG_INTERVALS);
}
};

定义接口返回点击显示图片监听

/**
*定义点击接口
*/
public interface OnTopImageClickListeners{
void onClick(int showIndex);
}

carouselFigure.setOnTopImageClickListeners(new  CarouselFigure.OnTopImageClickListeners() {
@Override
public void onClick(int showIndex) {
Log.i("tag","index: "+showIndex);
}
});

github分享地址

CSDN下载地址