Android实现遮罩层（蒙板）效果

359 阅读 0 评论 237 点赞

我是靠谱客的博主愤怒花生，最近开发中收集的这篇文章主要介绍Android实现遮罩层（蒙板）效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Android的遮罩效果就是把一张图片盖在另一张图片的上面，通过控制任意一张图片的显示百分比实现遮罩效果。下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果。使用遮罩效果来实现progressbar的效果的好处是，我们可以只改变图片就可以更改progress的进度填充效果，并且我们可以实现任意形式的填充效果，就比如横竖填充，扇形逆/顺时填充针等。

网上有很多介绍Android 遮罩效果的列子，但是都是横竖的填充效果，下面我来实现一个扇形填充效果，如下图：

我现在要做的就是用这两种图去实现一个progressbar效果.好了原来不解释了直接上代码吧：

一.Activity代码

package com.gplus.mask.test;
 
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
 
import com.gplus.mask.widget.MaskProgress;
import com.gplus.mask.widget.MaskProgress.AnimateListener;
 
 
public class GplusMask extends Activity{
 
 float progressFromCode = 150;
 float progressFromXml = 150;
 
 MaskProgress maskProgressFromeCode;
 MaskProgress maskProgressFromeXml;
 
 private boolean isAnimateFinish = true;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 
 RelativeLayout parent = (RelativeLayout) findViewById(R.id.parent);
 maskProgressFromeCode = new MaskProgress(this);
 initialProgress(maskProgressFromeCode);
 RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 
  RelativeLayout.LayoutParams.MATCH_PARENT);
 parent.addView(maskProgressFromeCode, rp);
 maskProgressFromeCode.initial();
 
 maskProgressFromeXml = (MaskProgress) findViewById(R.id.maskView);
 
 }
 
 private void initialProgress(MaskProgress maskProgress){
 //设置最大值
 maskProgress.setMax(300);
 //初始填充量为一半
 //初始化填充progress时的填充动画时间,越大越慢
 maskProgress.setTotaltime(3);
 //progress背景图
 maskProgress.setBackgroundResId(R.drawable.untitled1);
 //progress填充内容图片
 maskProgress.setContentResId(R.drawable.untitled2);
 //Progress开始的填充的位置360和0为圆最右、90圆最下、180为圆最右、270为圆最上(顺时针方向为正)
 maskProgress.setStartAngle(0);
 maskProgress.setAnimateListener(animateListener);
 //初始化时必须在setMax设置之后再设置setProgress
 maskProgress.setProgress(175);
 }
 
 Handler handler = new Handler(){
 
 @Override
 public void handleMessage(Message msg) {
  super.handleMessage(msg);
 
  float newProgress = maskProgressFromeCode.getProgress() - 4;
  if(newProgress <= 0){//随机绘制效果
  
  float max = (float) (Math.random() * 900 + 1000);
  float progress = (float) (max * Math.random());
  
  maskProgressFromeCode.setMax(max);
  maskProgressFromeCode.setProgress(progress);
  maskProgressFromeCode.setTotaltime((float) (Math.random()*10));
  maskProgressFromeCode.setStartAngle((float) (Math.random()*360));
  maskProgressFromeCode.initial();
  return;
  }
  maskProgressFromeCode.setProgress(newProgress);
  maskProgressFromeCode.updateProgress();
  
  handler.sendEmptyMessageDelayed(0, 50);
 }
 };
 
 AnimateListener animateListener = new AnimateListener() {
 
 @Override
 public void onAnimateFinish() {
  handler.sendEmptyMessageDelayed(0, 500);
 }
 };
}

二.activity布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res/com.gplus.mask.test"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
 
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical" >
 
    <com.gplus.mask.widget.MaskProgress
      android:id="@+id/maskView"
      android:layout_width="200dp"
      android:layout_height="200dp"
      app:anim_time="20"
      app:max="180"
      app:progress="135"
      app:progress_background="@drawable/untitled1"
      app:progress_content="@drawable/untitled2"
      app:start_angle="0" 
      android:layout_centerInParent="true"/>
  </RelativeLayout>
 
  <RelativeLayout
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical" />
 
</LinearLayout>

三.View的实现效果MaskProgress.java

package com.gplus.mask.widget;
 
 
 
 
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.PorterDuff.Mode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
 
/**
 * @author huangxin
 */
public class MaskProgress extends View{
 
 
 /** 每次setProgress时进度条前进或者回退到所设的值时都会有一段动画。
 * 该接口用于监听动画的完成，你应该设置监听器监听到动画完成后，才再一次调用 
 * setProgress方法
 * */
 public static interface AnimateListener{
 public void onAnimateFinish();
 }
 
 private float totalTime = 5;//s
 
 
 private final static int REFRESH = 10;//mills
 
 private float step;
 
 private float max = 360;
 
 
 private float currentProgress;
 
 private float destProgress = 0;
 private float realProgress = 0;
 private float oldRealProgress = 0;
 private int backgroundResId;
 private int contentResId;
 
 private float startAngle = 270;
 
 private Bitmap bg;
 private Bitmap ct;
 
 private Paint paint;
 
 private int radius;
 
 private int beginX;
 private int beginY;
 
 private int centerX;
 private int centerY;
 
 private RectF rectF;
 
 private PorterDuffXfermode srcIn;
 
 private double rate;
 
 boolean initialing = false;
 
 AnimateListener animateListener;
 
 public MaskProgress(Context context) {
 this(context, null);
 }
 
 public MaskProgress(Context context, AttributeSet attrs) {
 this(context, attrs, R.attr.maskProgressStyle);
 }
 
 public MaskProgress(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init(context, attrs, defStyle);
 }
 
 
 public void setAnimateListener(AnimateListener animateListener) {
 this.animateListener = animateListener;
 }
 
 public void setProgress(float destProgress) {
 if(destProgress > max)
  try {
  throw new Exception("progress can biger than max");
  } catch (Exception e) {
  e.printStackTrace();
  }
 
 this.destProgress = destProgress;
 oldRealProgress = realProgress;
 realProgress = (float) (destProgress * rate);
 }
 
 public float getProgress(){
 return destProgress;
 }
 
 public void setTotaltime(float totalTime) {
 this.totalTime = totalTime;
 step = 360 / (totalTime * 1000 / REFRESH);
 }
 
 public static int getRefresh() {
 return REFRESH;
 }
 
 public void setMax(float max) {
 this.max = max;
 rate = 360 / max;
 }
 
 public void setStartAngle(float startAngle) {
 this.startAngle = startAngle;
 }
 
 
 public void setBackgroundResId(int backgroundResId) {
 this.backgroundResId = backgroundResId;
 bg = BitmapFactory.decodeResource(getResources(), backgroundResId);
 }
 
 public void setContentResId(int contentResId) {
 this.contentResId = contentResId;
 ct = BitmapFactory.decodeResource(getResources(), contentResId);
 }
 
 public void updateProgress(){
 invalidate();
 }
 
 /** 初始化,第一次给MaskProgress设值时,从没有填充到,填充到给定的值时
 * 有一段动画
 * */
 public void initial(){
 initialing = true;
 new CirculateUpdateThread().start();
 }
 
 public float getMax() {
 return max;
 }
 
 private void init(Context context, AttributeSet attrs, int defStyle){
 
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.maskProgressBar, defStyle, 0);
 
 if (typedArray != null) {
      try {
        setMax(typedArray.getFloat(R.styleable.maskProgressBar_max, max));
        setProgress(typedArray.getFloat(R.styleable.maskProgressBar_progress, destProgress));
        setTotaltime(typedArray.getFloat(R.styleable.maskProgressBar_anim_time, totalTime));
        setStartAngle(typedArray.getFloat(R.styleable.maskProgressBar_start_angle, startAngle));
        setContentResId(typedArray.getResourceId(R.styleable.maskProgressBar_progress_content, R.drawable.untitled2));
        setBackgroundResId(typedArray.getResourceId(R.styleable.maskProgressBar_progress_background, R.drawable.untitled1));
      } finally {
       typedArray.recycle();
      }  
    }
  
 paint = new Paint();
 paint.setDither(true);
 paint.setAntiAlias(true);
 
 rate = 360 / max;
 currentProgress = 0;
 realProgress = (float) (destProgress * rate);
 srcIn = new PorterDuffXfermode(Mode.SRC_IN);
 step = 360 / (totalTime * 1000 / REFRESH);
 
 bg = BitmapFactory.decodeResource(getResources(), backgroundResId);
 ct = BitmapFactory.decodeResource(getResources(), contentResId);
 
 Log.w("init", "max: " + max + "n" + "destProgress: " + destProgress +"n"+"totalTime: "+ totalTime+"n"+"startAngle: "+ startAngle);
 
 initialing = true;
 new CirculateUpdateThread().start();
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 
 canvas.drawBitmap(bg, 0, (getHeight() - bg.getHeight()) / 2, paint);
 int rc = canvas.saveLayer(0, (getHeight() - bg.getHeight()) / 2, bg.getWidth(), (getHeight() + bg.getHeight()) / 2, null, Canvas.ALL_SAVE_FLAG);
 
 paint.setFilterBitmap(false);
 if(initialing){
  canvas.drawArc(rectF, startAngle, currentProgress, true, paint);
 }else{
  canvas.drawArc(rectF, startAngle, realProgress, true, paint);
 }
 paint.setXfermode(srcIn);
 canvas.drawBitmap(ct, 0, (getHeight() - ct.getHeight()) / 2, paint);
 
 paint.setXfermode(null);
 canvas.restoreToCount(rc);
 }
 
 public int[] getRectPosition(int progress){
 int[] rect = new int[4]; 
 
 rect[0] = beginX;
 rect[1] = beginY;
 rect[2] = (int)(centerX + radius * Math.cos(progress * Math.PI /180));
 rect[3] = (int)(centerY + radius * Math.sin(progress * Math.PI /180));
 
 Log.w("getRectPosition", "30: " + Math.sin(30 * Math.PI /180));
 
 Log.w("getRectPosition", "X: " + rect[2] + " " + "Y: " + rect[3]);
 
 return rect;
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
 }
 
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 
 int tmp = w >= h ? h : w;
 
 radius = tmp / 2;
 beginX = w / 2;
 beginY = 0;
 centerX = tmp / 2;
 centerY = tmp / 2;
 
 Bitmap bg_ = resizeBitmap(bg, tmp, tmp);
 Bitmap ct_ = resizeBitmap(ct, tmp, tmp);
 
 rectF = new RectF(0, (getHeight() - bg_.getHeight()) / 2, bg_.getWidth(), (getHeight() + bg_.getHeight()) / 2);
 
 bg.recycle();
 ct.recycle();
 
 bg = bg_;
 ct = ct_;
 }
 
 private Bitmap resizeBitmap(Bitmap src, int w, int h){
 
 int width = src.getWidth();
 int height = src.getHeight();
 int scaleWidht = w / width;
 int scaleHeight = h / height;
 
 Matrix matrix = new Matrix();
 matrix.postScale(scaleWidht, scaleHeight);
 
 Bitmap result = Bitmap.createScaledBitmap(src, w, h, true);
 src = null;
 
 return result;
 }
 
 class CirculateUpdateThread extends Thread{
 
 @Override
 public void run() {
  while(initialing){
  postInvalidate();
  if(currentProgress < realProgress){
   currentProgress += step * rate;
   if(currentProgress > realProgress)
   currentProgress = realProgress;
  }else{  
   // new Thread(new Runnable() {
   //
   // @Override
   // public void run() {
   // while (true) {
   // postInvalidate();
   // if (currentProgress > 0) {
   // currentProgress -= step * rate;
   // } else {
   // currentProgress = 0;
   // new CirculateUpdateThread().start();
   // break;
   // }
   // try {
   // Thread.sleep(REFRESH);
   // } catch (Exception e) {
   // e.printStackTrace();
   // }
   // }
   // }
   // }).start();
   currentProgress = 0;
   initialing = false;
   if(animateListener != null)
   animateListener.onAnimateFinish();
  }
  try{
   Thread.sleep(REFRESH);
  }catch(Exception e){
   e.printStackTrace();
  }
  }
 }
 
 } 
}

四.该Veiw自定义的属性文件attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
  <declare-styleable name="maskProgressBar">
    <attr name="max" format="float" />
    <attr name="progress" format="float" />
    <attr name="start_angle" format="float" />
    <attr name="progress_background" format="reference" />
    <attr name="progress_content" format="reference" />
    <attr name="anim_time" format="float" />
  </declare-styleable>
 
  
  <attr name="maskProgressStyle" format="reference" />
  
</resources>

效果图如下，上面小的是定义xml的，下面大的是从代码中添加的