Android Customize Discoloration

距离上次写博客已经记不清楚是多久啦！！！
就在今天16年7月1号一个好基友突然说项目急用一个变色的loading，
刚好下午不是很忙就决定把这个逼给装了，写出来看看效果！！！
效果如下：

loading.jpg

以前只看到IOS有这种效果，安卓好像挺难实现的，反正我是不知道怎么实现！！
想了一会觉得LinearGradient可以实现这种效。
好基友就说用bitmapshader也可以实现实现，我觉得这两种都太麻烦啦！！
灵机一动 google一下发现 Canvas中的clipRect(float left, float top, float right, float bottom, Paint paint)方法是在手机屏幕上裁剪出一块区域来，起点是从屏幕的左上角开始。

好吧，其实我也是参考了别人的博客才知道这个方法是干嘛的。

我们都知道 在项目中的多个界面使用我自定义的View，每个界面该自定义View的颜色都不相同，这时候如果没有自定义属性，那我们是不是需要构建不同颜色的View出来呢，这样子我们的代码就会显得很沉厄，所以这时候我们就需要自定义其属性来满足我们不同的需求，自定义属性呢，我们需要在values下建立attrs.xml文件，在其中定义我们需要定义的属性，然后在自定义View中也要做相对应的修改。

在values下面新建一个attrs.xml，现在里面定义我们的属性。
接下来我贴上我在自定义这个进度条所用到的属性：

<declare-styleable name="loadingView">
    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />
    <attr name="text_origin_color" format="color|reference" />
    <attr name="text_change_color" format="color|reference" />
    <attr name="bgd_change_color" format="color|reference" />
    <attr name="bgd_origin_color" format="color|reference" />
    <attr name="progress_color" format="color|reference" />
    <attr name="progress_max" format="integer" />
    <attr name="progress" format="integer" />
</declare-styleable>

自定义View的属性我们算是定义好了，接下来就是怎么获取属性和代码的编写了，我们需要在构造方法中获取我们自己定义的相关属性，我们先调用context.obtainStyledAttributes(attrs, R.styleable.loadingView)来获取TypedArray，然后从TypedArray获取我们定义的属性:

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.loadingView);
 mText = ta.getString(R.styleable.loadingView_text);
 mTextSize = ta.getDimensionPixelSize(R.styleable.loadingView_text_size, mTextSize);
bgd_Origin_color =ta.getColor(R.styleable.loadingView_bgd_origin_color, bgd_Origin_color);
bgd_Change_color = ta.getColor(R.styleable.loadingView_bgd_change_color, bgd_Change_color);
mTextOriginColor =ta.getColor(R.styleable.loadingView_text_origin_color, mTextOriginColor);
mTextChangeColor =ta.getColor(R.styleable.loadingView_text_change_color, mTextChangeColor);
mProgress = ta.getInt(R.styleable.loadingView_progress, mProgress);
mProgress_max = ta.getInt(R.styleable.loadingView_progress_max,mProgress_max);
ta.recycle();

为了方便大家理解，我将自定义View的全部代码贴出来，看注释就好：

/**
 * Created by Liqingwen on 7/1/16.
 * Email: Liqingqingqingwen@163.com
 */
public class LoadingView extends View {
    // 字体内容
    private String  mText = "正在下载";
    // 进度背景
    private int  bgd_Change_color;
    // 默认背景
    private int  bgd_Origin_color;
    // 字体大小
    private int   mTextSize = sp2px(18);
    
    //默认字体颜色
    private int  mTextOriginColor;
    //进度字体颜色
    private int mTextChangeColor;
    //当前进度
    private int mProgress = 0;
    //进度最大值
    private int mProgress_max;
    // 画笔对象的引用
    private Paint mPaint;
    // 测量以后的宽
    private int measuredWidth;
    // 测量以后的高
    private int measuredHeight;

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

    public LoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.loadingView);
        mText = ta.getString(R.styleable.loadingView_text);
        mTextSize = ta.getDimensionPixelSize(R.styleable.loadingView_text_size, mTextSize);
        bgd_Origin_color = ta.getColor(R.styleable.loadingView_bgd_origin_color, bgd_Origin_color);
        bgd_Change_color = ta.getColor(R.styleable.loadingView_bgd_change_color, bgd_Change_color);
        mTextOriginColor = ta.getColor(R.styleable.loadingView_text_origin_color, mTextOriginColor);
        mTextChangeColor = ta.getColor(R.styleable.loadingView_text_change_color, mTextChangeColor);
        mProgress = ta.getInt(R.styleable.loadingView_progress, mProgress);
        mProgress_max = ta.getInt(R.styleable.loadingView_progress_max,mProgress_max);
        
        ta.recycle(); //加载完成回收资源 
        
        mPaint.setAntiAlias(true);  //消除锯齿
        mPaint.setStyle(Paint.Style.FILL); //设置空心
        mPaint.setTextSize(mTextSize);// 设置字体大小


    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        measuredWidth  = getMeasuredWidth();
        measuredHeight =  getMeasuredHeight();
        
        float  widthFloat  =  ((float)measuredWidth) / ((float) mProgress_max) ; // 通过宽度除以 最大进度 得到宽的倍数
       
         drawText(canvas,mTextOriginColor,bgd_Origin_color,0,measuredWidth); // 默认
         drawText(canvas,mTextChangeColor,bgd_Change_color,widthFloat * mProgress ,measuredWidth); //进度条    将宽的倍数 乘以当前进度  这样就可以把进度覆盖整个View    widthFloat * mProgress 

    }


    protected void  drawText(Canvas canvas , int color ,int bgdColor, float startX , int endX){
        
        RectF mRect  = new RectF();
        mRect.top = 0;
        mRect.bottom = measuredWidth;
        mRect.left = startX;
        mRect.right = endX;
        mPaint.setColor(bgdColor);//设置背景颜色
        canvas.drawRect(mRect,mPaint); // 通过矩形画背景
        
        canvas.save();
        /*
         * 这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下，
         * 当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，
         * 但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，
         * 所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响。
        */
        
        mPaint.setColor(color);  //字体颜色
        canvas.clipRect(startX, 0, endX, measuredHeight);// 剪辑矩形
        int percent = (int)(((float)mProgress / (float)mProgress_max) * 100); //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = mPaint.measureText(mText + percent + "%");// 测量当前字体宽度
        
        //画出百分比
        canvas.drawText(mText + percent + "%", (measuredWidth / 2) - (textWidth / 2)  , measuredHeight / 2 - ((mPaint.descent() + mPaint.ascent()) / 2), mPaint);
        
       canvas.restore();
    }


    public void setmProgress(int mProgress) {
        this.mProgress = mProgress;
        invalidate();
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);

    }

    private int measureHeight(int measureSpec) {
        int mode = MeasureSpec.getMode(measureSpec);
        int val = MeasureSpec.getSize(measureSpec);
        int result = 0;
        switch (mode)
        {
            case MeasureSpec.EXACTLY:
                result = val;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                result = val;
                break;
        }
        result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
        return result + getPaddingTop() + getPaddingBottom();
    }




    private int measureWidth(int measureSpec) {
        int mode = MeasureSpec.getMode(measureSpec);
        int val = MeasureSpec.getSize(measureSpec);
        int result = 0;
        switch (mode)
        {
            case MeasureSpec.EXACTLY:
                result = val;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                 result = val;
                break;
        }
        result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;
        return result + getPaddingLeft() + getPaddingRight();
    }


    private int sp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                dpVal, getResources().getDisplayMetrics());
    }


}

这里引用csdn一位大神的博客：
http://blog.csdn.net/harvic880925/article/details/39080931/

关于裁剪画布（clip系列函数）
裁剪画布是利用Clip系列函数，通过与Rect、Path、Region取交、并、差等集合运算来获得最新的画布形状。除了调用Save、Restore函数以外，这个操作是不可逆的，一但Canvas画布被裁剪，就不能再被恢复！Clip系列函数如下：

boolean clipPath(Path path)
boolean clipPath(Path path, Region.Op op)
boolean clipRect(Rect rect, Region.Op op)
boolean clipRect(RectF rect, Region.Op op)
boolean clipRect(int left, int top, int right, int bottom)
boolean clipRect(float left, float top, float right, float bottom)
boolean clipRect(RectF rect)
boolean clipRect(float left, float top, float right, float bottom, Region.Op op)
boolean clipRect(Rect rect)
boolean clipRegion(Region region)
boolean clipRegion(Region region, Region.Op op)

以上就是根据Rect、Path、Region来取得最新画布的函数，难度都不大，就不再一一讲述。利用ClipRect（）来稍微一讲

protected void onDraw(Canvas canvas) {  
    // TODO Auto-generated method stub  
    super.onDraw(canvas);  
      
    canvas.drawColor(Color.RED);  
    canvas.clipRect(new Rect(100, 100, 200, 200));  
    canvas.drawColor(Color.GREEN);  
} 

先把背景色整个涂成红色。显示在屏幕上然后裁切画布，最后最新的画布整个涂成绿色。可见绿色部分，只有一小块，而不再是整个屏幕了。关于两个画布与屏幕合成，我就不再画图了，跟上面的合成过程是一样的。
效果图：

20140909131229993.png

整体效果图：

Untitled.gif

好啦,这个逼我装完啦。

zhuangb.gif

如果有什么不清楚的地方记得留言。