自定义进度条动画(背景跟随变化)

原创 2016年05月30日 16:25:53

公司有一个这样的需求:


需求描述如下:长按右面的接受按钮,左侧的进度向右增加,进度条覆盖的地方跟没覆盖前的颜色是不一样的,比如进度条覆盖前的文字是黑色,覆盖后的文字是白色。释放按钮进度条会回滚。

一开始想用属性动画来解决,不料没成功,我是用属性动画做不出来,有高手希望指点一下。

我这里是用自定义view来实现,主要思路如下:

1:在draw方法画两份除了颜色都一样的视图,一份是覆盖进度条的,一份是没覆盖进度条的

2:根据进度条的位置,通过切割画布来决定画布的哪一部分显示有进度条的视图,另一部分显示没有进度条的部分。

这边没有美工,实现简单的效果如下:


看懂思路后具体的代码很简单(有兴趣的可以在上面的基础改一下,文子间距,背景什么的弄好看点):

package com.example.chttest;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;

/**
 * @author haitao
 */
public class MyProgressBoard extends View {
	
	private Thread thread; 
	private Context mContext;
	private Paint mPaint;
	private Paint mTextPaint;
	private Paint mCiclePaint;
	private Path path;
	private int progress = 10;//進度
	private boolean isOver=false;
	private Bitmap bitmap;
	private volatile boolean isDown = false;  //是否按下右边按钮
	private int imageWidth; //图片的宽度
	private int imageHeight; //图片的高度
	private int leftPadding = 20;
	private int textTopPadding = 30;
	private String titleStr = "免费卷";
	private String sencondStr = "免费得到超级乐视电视价值$3888元";
	private String thirdStr = "有效期:2016.1.2-2016.2.5";
	
	private String buttonStr = "按下";
	private int radio = 60;//圆的半径

	public MyProgressBoard(Context context) {
		super(context);
	}

	public MyProgressBoard(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
	}

	public MyProgressBoard(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;

		setBackgroundColor(Color.WHITE);
		mPaint = new Paint();
		mPaint.setColor(Color.GREEN);
		mPaint.setStyle(Style.STROKE);
		mPaint.setStrokeWidth(10);
		path = new Path();

		mTextPaint = new Paint();
		mTextPaint.setTextSize(20);
		mTextPaint.setColor(Color.BLACK);
		mTextPaint.setStyle(Style.FILL);
		
		mCiclePaint = new Paint();
		mCiclePaint.setColor(Color.RED);
		mCiclePaint.setTextSize(20);
		mCiclePaint.setStyle(Style.STROKE);
		if(thread==null){
			thread = new Thread(runbale);
			thread.start();
		}
		
	}
	
	private Runnable runbale = new Runnable() {
		
		@Override
		public void run() {
			while(true){
				if(isDown && progress<=getWidth()){
					progress++;
					try {
						Thread.sleep(4);
						
						postInvalidate();
						
						if(progress>getWidth()){
							isDown = false;
							break;//退出while循环
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}else{
					if(progress>0){
						progress--;
					}
					try {
						Thread.sleep(2);
						
						postInvalidate();
						
						if(progress==0){
							continue;//不退出while循环
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
			}
		}
	};

	private Runnable mLongClick = new Runnable() {
		
		@Override
		public void run() {
			isDown = true;
		}
	};
	
	@Override
	protected void onDraw(final Canvas cv) {
		super.onDraw(cv);
	    /** 红色区域**/
		Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		Bitmap bitmapmap = toGrayscale(BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher));
		imageWidth = bitmapmap.getWidth();
		imageHeight = bitmapmap.getHeight();
		canvas.drawRGB(255, 0, 0);
		canvas.drawBitmap(bitmapmap, DensityUtil.dip2px(mContext, leftPadding), getHeight()/2-imageHeight/2, mTextPaint);
		mTextPaint.setColor(Color.WHITE);
		canvas.drawText(titleStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, textTopPadding), mTextPaint);
		canvas.drawText(sencondStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 2*textTopPadding), mTextPaint);
		canvas.drawText(thirdStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 3*textTopPadding), mTextPaint);
		mCiclePaint.setColor(Color.WHITE);
		float textWidth = mCiclePaint.measureText(buttonStr);   //测量字体宽度,我们需要根据字体的宽度设置在圆环中间  
		canvas.drawCircle(getWidth()-radio, getHeight()/2, radio, mCiclePaint);
		canvas.drawText(buttonStr, getWidth()-radio - textWidth / 2, getHeight()/2 + 20/2, mCiclePaint); //画出进度百分比  
		 
		cv.save();
		cv.clipRect(0, 0, progress,getHeight());
		cv.drawBitmap(bitmap, getLeft(), getTop(), mPaint);
		cv.restore();
		
		
		 /** 白色区域**/
		Bitmap bitmap1 = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
		Bitmap bitmapmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
		Canvas canvas1 = new Canvas(bitmap1);
//			canvas1.translate(getWidth() / 2, getHeight() / 2);
		mPaint.setColor(Color.GREEN);
		mTextPaint.setColor(Color.BLACK);
		canvas1.drawBitmap(bitmapmap1, DensityUtil.dip2px(mContext, leftPadding), getHeight()/2-imageHeight/2, mTextPaint);
		
		canvas1.drawText(titleStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, textTopPadding), mTextPaint);
		canvas1.drawText(sencondStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 2*textTopPadding), mTextPaint);
		canvas1.drawText(thirdStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 3*textTopPadding), mTextPaint);
		
		
		mCiclePaint.setColor(Color.BLACK);
		canvas1.drawCircle(getWidth()-radio, getHeight()/2, radio, mCiclePaint);
        canvas1.drawText(buttonStr, getWidth()-radio - textWidth / 2, getHeight()/2 + 20/2, mCiclePaint); //画出进度百分比  
		
		cv.save();
		cv.clipRect(progress, 0, getWidth(), getHeight());
		cv.drawBitmap(bitmap1, getLeft(), getTop(), mPaint);
		cv.restore();

	}
	
	
	/***//**
     * 图片去色,返回灰度图片
     * @param bmpOriginal 传入的图片
     * @return 去色后的图片
     */
    public static Bitmap toGrayscale(Bitmap bmpOriginal) {
        int width, height;
        height = bmpOriginal.getHeight();
        width = bmpOriginal.getWidth();    

        Bitmap bmpGrayscale = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
        Canvas c = new Canvas(bmpGrayscale);
        Paint paint = new Paint();
        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0);
        ColorMatrixColorFilter f = new ColorMatrixColorFilter(cm);
        paint.setColorFilter(f);
        c.drawBitmap(bmpOriginal, 0, 0, paint);
        return bmpGrayscale;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
    	int x = 0;
		int y = 0;
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			 x = (int)event.getX();
			 y = (int)event.getY();
			if(x<getWidth() && x>getWidth()-radio*2
					&& y>getHeight()/2-radio && y<getHeight()/2+radio){
//				isDown = true;
				postDelayed(mLongClick, 500);
				return true;
			}
			break;
		case MotionEvent.ACTION_MOVE:
			
			if (Math.abs(event.getX()- x) > 350  
                    || Math.abs(event.getY() - y) > 350) {  
                // 移动超过阈值,则表示移动了  
//				isDown = false;
//				removeCallbacks(mLongClick);
            }  
			break;
		case MotionEvent.ACTION_UP:
			isDown = false;
			removeCallbacks(mLongClick);
			break;
		default:
			break;
		}
		
    	return super.dispatchTouchEvent(event);
    }

}





字体随着ProgressBar的加载而滚动

在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写篇博文,记录一下写作过程,给大家做一个参考。先看下最终效果效果图 我这里用的是LICEcap软件录制...

基于PCA的人脸检测(Matlab版代码)

花了几天,终于把matlab版的人脸检测运行成功了,虽然正确率不是很高,看着各种论文上的人脸检测正确率都出奇的高,我是不怎么相信的,有的论文连基于平均脸的人脸检测正确率都能达到98%,汗啊~~  也许...

人脸识别经典算法一:特征脸方法(Eigenface)

这篇文章是撸主要介绍人脸识别经典方法的第一篇,后续会有其他方法更新。特征脸方法基本是将人脸识别推向真正可用的第一种方法,了解一下还是很有必要的。...

自定义控件背景图加进度条

  • 2014年01月25日 09:45
  • 1.43MB
  • 下载

自定义弧形进度条,百分比的值在变化

 activity_main.xml

自定义圆形进度条--加载动画

  • 2017年03月16日 11:06
  • 5KB
  • 下载

Android中自定义SeekBar背景颜色,进度条颜色,滑块图片

目录目录 Android SeekBar常见问题 进度条颜色 设置进度条高度 设置滑块样式Android SeekBar常见问题在使用Android Seekbar大家可能经常遇到下面这几个问题: 如...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义进度条动画(背景跟随变化)
举报原因:
原因补充:

(最多只允许输入30个字)