首页 > 系统 > Android > 正文

Android自定义图片集合

2020-04-11 10:52:03
字体:
来源:转载
供稿:网友

本文主要包括以下内容:

  • 使用Xfermode设置圆角图片
  • 使用BitmapShader设置圆角图片
  • 滑动旋转缩放的bimp图片
  • 图片颜色处理(滑动)
  • 图片 + 文字

其中1,2是两种不同方式处理图片圆角的情况。3,是通过Matrix进行图片缩放,旋转等。4,是通过Matrix操作图片的处理,包括去饱和,四角黑影,中心突出等。5,图片加文字组合显示。
如果暂时感觉这些看不懂:
先看看这两篇:

Android自定义控件深入学习 Android生成随机验证码

详解Android自定义控件属性TypedArray以及attrs

1、使用Xfermode设置圆角图片
主要代码

package com.example.customimage.view;  import com.example.customimage.R;  import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.graphics.RectF; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.View;   /**  * 自定义View,实现圆角,圆形等效果  */ public class XfermodeImageView extends View {  //类型  private int type;  private static final int TYPE_CIRCLE = 0; //圆形  private static final int TYPE_RECT = 1; //矩形圆角   //原始图片  private Bitmap mSrc;   //矩形圆角的幅度  private int mRadius;   //控件的宽度  private int mWidth;   // 控件的高度  private int mHeight;   public XfermodeImageView(Context context, AttributeSet attrs)  {  this(context, attrs, 0);  }   public XfermodeImageView(Context context)  {  this(context, null);  }   /**  * 初始化一些自定义的参数  *  * @param context  * @param attrs  * @param defStyle  */  public XfermodeImageView(Context context, AttributeSet attrs, int defStyle)  {  super(context, attrs, defStyle);   TypedArray a = context.getTheme().obtainStyledAttributes(attrs,   R.styleable.XfermodeImageView, defStyle, 0);   int n = a.getIndexCount();  for (int i = 0; i < n; i++)  {   int attr = a.getIndex(i);   switch (attr)   {   //原始图片,在布局里面获取   case R.styleable.XfermodeImageView_src:   mSrc = BitmapFactory.decodeResource(getResources(),    a.getResourceId(attr, 0));   break;   //类型属性选择   case R.styleable.XfermodeImageView_type:   //自定义类型属性,0是圆形,1是矩形圆角   type = a.getInt(attr, 0);// 默认为Circle   break;   //矩形圆角幅度的获取,默认是10dp   case R.styleable.XfermodeImageView_borderRadius:   mRadius = a.getDimensionPixelSize(attr, (int) TypedValue    .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,     getResources().getDisplayMetrics()));   Log.i("Show", String.valueOf(mRadius));   break;   }  }  a.recycle();  }   /**  * 计算控件的高度和宽度  */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {  // 设置宽度  int specMode = MeasureSpec.getMode(widthMeasureSpec);  int specSize = MeasureSpec.getSize(widthMeasureSpec);   //match_parent或者设置的精确值获取  //MeasureSpec.EXACTLY  if (specMode == MeasureSpec.EXACTLY)  {   mWidth = specSize;  }  else  {   // 由图片决定的宽   //getPaddingLeft(),getPaddingRight()这两个值是控件属性的向内偏移的距离值,所以的一起计算   //区别于layout_marginLeft,两个控件的左间距值设置   int desireByImg = getPaddingLeft() + getPaddingRight()    + mSrc.getWidth();     // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   //所以最小的值,宽度的话是左右内偏移距离之和   mWidth = Math.min(desireByImg, specSize);   } else    mWidth = desireByImg;  }   // 设置高度,部分解释同上  specMode = MeasureSpec.getMode(heightMeasureSpec);  specSize = MeasureSpec.getSize(heightMeasureSpec);    //match_parent或者设置的精确值获取  //MeasureSpec.EXACTLY  if (specMode == MeasureSpec.EXACTLY)  {   mHeight = specSize;  } else  {   int desire = getPaddingTop() + getPaddingBottom()    + mSrc.getHeight();    // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   mHeight = Math.min(desire, specSize);   } else   mHeight = desire;  }   //计算好的宽度以及高度是值,设置进去  setMeasuredDimension(mWidth, mHeight);  }   /**  * 绘制image控件  */  @Override  protected void onDraw(Canvas canvas)  {  switch (type)  {  // 如果是TYPE_CIRCLE绘制圆形  case TYPE_CIRCLE:   //圆形宽度和高度应该一致的,所以也要比较一下大小,取小的值   int min = Math.min(mWidth, mHeight);   // 圆形宽度和高度如果不一致,按小的值进行压缩   mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);   //绘制圆形   canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);   break;  case TYPE_RECT:   canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);   break;   }   }   /**  * 根据原图和变长绘制圆形图片  *  * @param source  * @param min  * @return  */  private Bitmap createCircleImage(Bitmap source, int min)  {  final Paint paint = new Paint();  //防止边缘的抗锯齿  paint.setAntiAlias(true);    Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  // 产生一个同样大小的画布  Canvas canvas = new Canvas(target);  // 首先绘制圆形,除以2就是半径了  //最主要设置第三个参数为min/2,圆角幅度那么大就是圆形了  canvas.drawCircle(min / 2, min / 2, min/2, paint);  // 使用SRC_IN,参考上面的说明---上下层都显示。下层居上显示  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  // 绘制图片  canvas.drawBitmap(source, 0, 0, paint);  return target;  }   /**  * 根据原图添加圆角  *  * @param source  * @return  */  private Bitmap createRoundConerImage(Bitmap source)  {  final Paint paint = new Paint();  paint.setAntiAlias(true);  Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  Canvas canvas = new Canvas(target);  //绘制矩形  RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());  //设置圆角幅度  canvas.drawRoundRect(rect, mRadius, mRadius, paint);  // 使用SRC_IN,参考上面的说明---上下层都显示。下层居上显示  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  canvas.drawBitmap(source, 0, 0, paint);  return target;  } } 

2、使用BitmapShader设置圆角图片

package com.example.customimage.view;  import com.example.customimage.R;  import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader.TileMode; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.os.Parcelable; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.widget.ImageView;  /**  *  */ public class BitmapShaderImageView extends ImageView {  // 图片的类型,圆形or圆角  private int type;  public static final int TYPE_CIRCLE = 0;  public static final int TYPE_RECT = 1;  //圆角大小的默认值  private static final int BODER_RADIUS_DEFAULT = 10;  //圆角的大小  private int mBorderRadius;   // 绘图的Paint  private Paint mBitmapPaint;  //圆角的半径  private int mRadius;  // 3x3 矩阵,主要用于缩小放大  private Matrix mMatrix;  // 渲染图像,使用图像为绘制图形着色  private BitmapShader mBitmapShader;  // view的宽度  private int mWidth;  //矩形  private RectF mRoundRect;   public BitmapShaderImageView(Context context)  {  this(context, null);  }   public BitmapShaderImageView(Context context, AttributeSet attrs)  {  super(context, attrs);  mMatrix = new Matrix();  mBitmapPaint = new Paint();  mBitmapPaint.setAntiAlias(true);   TypedArray a = context.obtainStyledAttributes(attrs,   R.styleable.BitmapShaderImageView);  //矩形圆角幅度的获取,默认是10dp  mBorderRadius = a.getDimensionPixelSize(   R.styleable.BitmapShaderImageView_borderRadius, (int) TypedValue    .applyDimension(TypedValue.COMPLEX_UNIT_DIP,     BODER_RADIUS_DEFAULT, getResources()      .getDisplayMetrics()));  //自定义类型属性,0是圆形,1是矩形圆角  type = a.getInt(R.styleable.BitmapShaderImageView_type, TYPE_CIRCLE);   a.recycle();  }   @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);   // 如果类型是圆形,则强制改变view的宽高一致,以小值为准  if (type == TYPE_CIRCLE)  {   mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());   //圆形的半径   mRadius = mWidth / 2;   setMeasuredDimension(mWidth, mWidth);  }   }   // 初始化BitmapShader,获取到图片资源  // 等待画布的准备好,然后在画布上加上Paint就是了  //就是说图片的载体是Paint  private void setUpShader()  {  Drawable drawable = getDrawable();  if (drawable == null)  {   return;  }   Bitmap bmp = drawableToBitamp(drawable);  // 将bmp作为着色器,就是在指定区域内绘制bmp  //TileMode.CLAMP 拉伸  mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);  float scale = 1.0f;  if (type == TYPE_CIRCLE)  {   // 拿到bitmap宽或高的小值   int bSize = Math.min(bmp.getWidth(), bmp.getHeight());   scale = mWidth * 1.0f / bSize;   } else if (type == TYPE_RECT)  {   if (!(bmp.getWidth() == getWidth() && bmp.getHeight() == getHeight()))   {   // 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;   scale = Math.max(getWidth() * 1.0f / bmp.getWidth(),    getHeight() * 1.0f / bmp.getHeight());   }   }  // shader的变换矩阵,我们这里主要用于放大或者缩小  // scale * scale 的矩阵  mMatrix.setScale(scale, scale);  // 设置变换矩阵  mBitmapShader.setLocalMatrix(mMatrix);  // 设置shader  mBitmapPaint.setShader(mBitmapShader);  }   @Override  protected void onDraw(Canvas canvas)  {  if (getDrawable() == null)  {   return;  }  setUpShader();   if (type == TYPE_RECT)  {   //绘制矩形   canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,    mBitmapPaint);  } else  {   //绘制圆形   canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);  }  }   @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh)  {  super.onSizeChanged(w, h, oldw, oldh);   // 圆角图片的范围  if (type == TYPE_RECT)   mRoundRect = new RectF(0, 0, w, h);  }   //drawable转bitmap  private Bitmap drawableToBitamp(Drawable drawable)  {  //从控件的src获取背景,也是drawable文件获取  if (drawable instanceof BitmapDrawable)  {   BitmapDrawable bd = (BitmapDrawable) drawable;   return bd.getBitmap();  }    //如果没有绘图一个,只不过是空白的图片  int w = drawable.getIntrinsicWidth();  int h = drawable.getIntrinsicHeight();    Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  Canvas canvas = new Canvas(bitmap);  drawable.setBounds(0, 0, w, h);  drawable.draw(canvas);  return bitmap;  }   private static final String STATE_INSTANCE = "state_instance";  private static final String STATE_TYPE = "state_type";  private static final String STATE_BORDER_RADIUS = "state_border_radius";   //屏幕旋转后,取出保存的值  @Override  protected Parcelable onSaveInstanceState()  {  Bundle bundle = new Bundle();  bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());  bundle.putInt(STATE_TYPE, type);  bundle.putInt(STATE_BORDER_RADIUS, mBorderRadius);  return bundle;  }   //屏幕旋转,变量的保存,因为外面设置值,如果不保存,一旋转就变成个xml里面设置的值  @Override  protected void onRestoreInstanceState(Parcelable state)  {  if (state instanceof Bundle)  {   Bundle bundle = (Bundle) state;   super.onRestoreInstanceState(((Bundle) state)    .getParcelable(STATE_INSTANCE));   this.type = bundle.getInt(STATE_TYPE);   this.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);  } else  {   super.onRestoreInstanceState(state);  }   }   //设置矩形圆角幅度后,重新绘制控件  public void setBorderRadius(int borderRadius)  {  int pxVal = dp2px(borderRadius);  if (this.mBorderRadius != pxVal)  {   this.mBorderRadius = pxVal;   invalidate();  }  }   //设置是圆形还是矩形圆角  public void setType(int type)  {  if (this.type != type)  {   this.type = type;   if (this.type != TYPE_RECT && this.type != TYPE_CIRCLE)   {   this.type = TYPE_CIRCLE;   }   requestLayout();  }   }   //dp转px  public int dp2px(int dpVal)  {  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,   dpVal, getResources().getDisplayMetrics());  }  } 

3、滑动旋转缩放的bimp图片

package com.example.customimage.view;  import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.PaintFlagsDrawFilter; import android.graphics.PointF; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.view.MotionEvent; import android.widget.ImageView;  public class MatrixImageView extends ImageView {  private static final int MODE_NONE = 0x00123;// 默认的触摸模式  private static final int MODE_DRAG = 0x00321;// 拖拽模式  private static final int MODE_ZOOM = 0x00132;// 缩放or旋转模式   private int mode;// 当前的触摸模式   private float preMove = 1F;// 上一次手指移动的距离  private float saveRotate = 0F;// 保存了的角度值  private float rotate = 0F;// 旋转的角度   private float[] preEventCoor;// 上一次各触摸点的坐标集合   private PointF startPointF, midPointF;// 起点、中点对象  private Matrix currentMatrix, savedMatrix;// 当前和保存了的Matrix对象   //原始图片  private Bitmap mSrc;   //控件的宽度  private int mWidth;   // 控件的高度  private int mHeight;   private PaintFlagsDrawFilter mDrawFilter;   public MatrixImageView(Context context, AttributeSet attrs) {  super(context, attrs);   // 初始化  init();  }   /**  * 初始化  */  private void init() {  // 实例化对象   currentMatrix = new Matrix();  savedMatrix = new Matrix();  startPointF = new PointF();  midPointF = new PointF();  mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);  // 模式初始化  mode = MODE_NONE;   Drawable drawable = getDrawable();  mSrc = drawableToBitamp(drawable);    }   /**  * 计算控件的高度和宽度  */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {  // 设置宽度  int specMode = MeasureSpec.getMode(widthMeasureSpec);  int specSize = MeasureSpec.getSize(widthMeasureSpec);   //match_parent或者设置的精确值获取  //MeasureSpec.EXACTLY  if (specMode == MeasureSpec.EXACTLY)  {   mWidth = specSize;  }  else  {   // 由图片决定的宽   //getPaddingLeft(),getPaddingRight()这两个值是控件属性的向内偏移的距离值,所以的一起计算   //区别于layout_marginLeft,两个控件的左间距值设置   int desireByImg = getPaddingLeft() + getPaddingRight()    + mSrc.getWidth();     // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   //所以最小的值,宽度的话是左右内偏移距离之和   mWidth = Math.min(desireByImg, specSize);   } else    mWidth = desireByImg;  }   // 设置高度,部分解释同上  specMode = MeasureSpec.getMode(heightMeasureSpec);  specSize = MeasureSpec.getSize(heightMeasureSpec);    //match_parent或者设置的精确值获取  //MeasureSpec.EXACTLY  if (specMode == MeasureSpec.EXACTLY)  {   mHeight = specSize;  } else  {   int desire = getPaddingTop() + getPaddingBottom()    + mSrc.getHeight();    // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   mHeight = Math.min(desire, specSize);   } else   mHeight = desire;  }   //计算好的宽度以及高度是值,设置进去  setMeasuredDimension(mWidth, mHeight);  }   //drawable转bitmap  private Bitmap drawableToBitamp(Drawable drawable)  {  //从控件的src获取背景,也是drawable文件获取  if (drawable instanceof BitmapDrawable)  {   BitmapDrawable bd = (BitmapDrawable) drawable;   return bd.getBitmap();  }    //如果没有绘图一个,只不过是空白的图片  int w = drawable.getIntrinsicWidth();  int h = drawable.getIntrinsicHeight();    Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  Canvas canvas = new Canvas(bitmap);  drawable.setBounds(0, 0, w, h);  drawable.draw(canvas);  return bitmap;  }   final Paint paint = new Paint();  @Override  protected void onDraw(Canvas canvas) {  //消除锯齿, 图片旋转后的锯齿消除不成功,实在不行图片边缘加一些白色像素点  canvas.setDrawFilter(mDrawFilter);  //画经过Matrix变化后的图  canvas.drawBitmap(mSrc, currentMatrix, null);  }   @Override  public boolean onTouchEvent(MotionEvent event) {  switch (event.getAction() & MotionEvent.ACTION_MASK) {  case MotionEvent.ACTION_DOWN:// 单点接触屏幕时   savedMatrix.set(currentMatrix);   startPointF.set(event.getX(), event.getY());   //单点触摸是移动模式   mode = MODE_DRAG;   preEventCoor = null;   break;  case MotionEvent.ACTION_POINTER_DOWN:// 第二个点接触屏幕时   preMove = calSpacing(event);   if (preMove > 10F) {   savedMatrix.set(currentMatrix);   // 计算两个触摸点的中点坐标   calMidPoint(midPointF, event);   //两点是旋转或者缩放模式   mode = MODE_ZOOM;   }   preEventCoor = new float[4];   preEventCoor[0] = event.getX(0);   preEventCoor[1] = event.getX(1);   preEventCoor[2] = event.getY(0);   preEventCoor[3] = event.getY(1);   saveRotate = calRotation(event);   break;  case MotionEvent.ACTION_UP:// 单点离开屏幕时  case MotionEvent.ACTION_POINTER_UP:// 第二个点离开屏幕时   mode = MODE_NONE;   preEventCoor = null;   break;  case MotionEvent.ACTION_MOVE:// 触摸点移动时   /*   * 单点触控拖拽平移   */   if (mode == MODE_DRAG) {   currentMatrix.set(savedMatrix);   float dx = event.getX() - startPointF.x;   float dy = event.getY() - startPointF.y;   currentMatrix.postTranslate(dx, dy);   }   /*   * 两点触控拖放旋转   */   else if (mode == MODE_ZOOM && event.getPointerCount() == 2) {   float currentMove = calSpacing(event);   currentMatrix.set(savedMatrix);   /*    * 指尖移动距离大于10F缩放    */   if (currentMove > 10F) {    float scale = currentMove / preMove;    currentMatrix.postScale(scale, scale, midPointF.x, midPointF.y);   }   /*    * 保持两点时旋转    */   if (preEventCoor != null) {    rotate = calRotation(event);    r = rotate - saveRotate;    currentMatrix.postRotate(r, getMeasuredWidth() / 2, getMeasuredHeight() / 2);   }   }   break;  }   setImageMatrix(currentMatrix);  return true;  }   float r;   /**  * 计算两个触摸点间的距离  */  private float calSpacing(MotionEvent event) {  float x = event.getX(0) - event.getX(1);  float y = event.getY(0) - event.getY(1);  return (float) Math.sqrt(x * x + y * y);  }   /**  * 计算两个触摸点的中点坐标  */  private void calMidPoint(PointF point, MotionEvent event) {  float x = event.getX(0) + event.getX(1);  float y = event.getY(0) + event.getY(1);  point.set(x / 2, y / 2);  }   /**  * 计算旋转角度  *  * @param 事件对象  * @return 角度值  */  private float calRotation(MotionEvent event) {  double deltaX = (event.getX(0) - event.getX(1));  double deltaY = (event.getY(0) - event.getY(1));  double radius = Math.atan2(deltaY, deltaX);  return (float) Math.toDegrees(radius);  }  } 

4、图片颜色处理(滑动)

package com.example.customimage.view;  import com.example.customimage.R; 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.ColorMatrixColorFilter; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.PorterDuff.Mode; import android.graphics.PorterDuffXfermode; import android.graphics.RadialGradient; import android.graphics.Shader.TileMode; import android.util.AttributeSet; import android.view.View;  public class DreamEffectView extends View {  private Paint mBitmapPaint, mShaderPaint;// 位图画笔和Shader图形的画笔  private PorterDuffXfermode mXfermode;// 图形混合模式  private int x, y;// 位图起点坐标  //控件的宽度  private int mWidth;  // 控件的高度  private int mHeight;  //原始图片  private Bitmap mSrc;  //生成暗角的图片  private Bitmap darkCornerBitmap;  public final static int BITMAP_NULL = 0; //原图  private final static int BITMAP_DEAST = 1; //去饱和  private final static int BITMAP_CENTER = 2; //中心突出  private final static int BITMAP_DARKCORNER = 3; //四角黑暗   private int mnSelectMode = 0;   public DreamEffectView(Context context, AttributeSet attrs)  {  this(context, attrs, 0);  }   public DreamEffectView(Context context)  {  this(context, null);  }   public DreamEffectView(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs,defStyle);   TypedArray a = context.getTheme().obtainStyledAttributes(attrs,   R.styleable.DreamEffectView, defStyle, 0);    int n = a.getIndexCount();  for (int i = 0; i < n; i++)  {   int attr = a.getIndex(i);   switch (attr)   {   //原始图片,在布局里面获取   case R.styleable.DreamEffectView_src:   mSrc = BitmapFactory.decodeResource(getResources(),    a.getResourceId(attr, 0));   break;   case R.styleable.DreamEffectView_mode:   mnSelectMode = a.getInt(attr, 0);   break;   }  }  a.recycle();    // 实例化混合模式  mXfermode = new PorterDuffXfermode(Mode.SCREEN);   // 初始化画笔  initPaint();  }   /**  * 计算控件的高度和宽度  */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {  // 设置宽度  int specMode = MeasureSpec.getMode(widthMeasureSpec);  int specSize = MeasureSpec.getSize(widthMeasureSpec);   if (specMode == MeasureSpec.EXACTLY)  {   mWidth = specSize;  }  else  {   int desireByImg = getPaddingLeft() + getPaddingRight()    + mSrc.getWidth();     // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   //所以最小的值,宽度的话是左右内偏移距离之和   mWidth = Math.min(desireByImg, specSize);   } else    mWidth = desireByImg;  }   // 设置高度,部分解释同上  specMode = MeasureSpec.getMode(heightMeasureSpec);  specSize = MeasureSpec.getSize(heightMeasureSpec);    if (specMode == MeasureSpec.EXACTLY)  {   mHeight = specSize;  } else  {   int desire = getPaddingTop() + getPaddingBottom()    + mSrc.getHeight();    // wrap_content   if (specMode == MeasureSpec.AT_MOST)   {   mHeight = Math.min(desire, specSize);   } else   mHeight = desire;  }    x = mWidth / 2 - mSrc.getWidth() / 2;  y = mHeight / 2 - mSrc.getHeight() / 2;   //计算好的宽度以及高度是值,设置进去  setMeasuredDimension(mWidth, mHeight);  }   /**  * 初始化画笔  */  private void initPaint() {  // 实例化画笔  mBitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);   // 实例化Shader图形的画笔  mShaderPaint = new Paint();  switch (mnSelectMode) {  case BITMAP_NULL:     break;  case BITMAP_DEAST:   // 去饱和、提亮、色相矫正   mBitmapPaint.setColorFilter(new ColorMatrixColorFilter(    new float[] { 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F,     0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 }));     break;  case BITMAP_CENTER:   // 去饱和、提亮、色相矫正   mBitmapPaint.setColorFilter(new ColorMatrixColorFilter(    new float[] { 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F,     0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 }));   // 设置径向渐变,渐变中心当然是图片的中心也是屏幕中心,渐变半径我们直接拿图片的高度但是要稍微小一点   // 中心颜色为透明而边缘颜色为黑色   mShaderPaint.setShader(new RadialGradient(mWidth / 2, mWidth / 2, mSrc.getHeight() * 7 / 8, Color.TRANSPARENT,    Color.BLACK, TileMode.CLAMP));   break;  case BITMAP_DARKCORNER:   // 去饱和、提亮、色相矫正   mBitmapPaint.setColorFilter(new ColorMatrixColorFilter(    new float[] { 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F,     0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 }));   // 根据我们源图的大小生成暗角Bitmap   darkCornerBitmap = Bitmap.createBitmap(mSrc.getWidth(), mSrc.getHeight(), Bitmap.Config.ARGB_8888);    // 将该暗角Bitmap注入Canvas   Canvas canvas = new Canvas(darkCornerBitmap);    // 计算径向渐变半径   float radiu = canvas.getHeight() * (2F / 3F);    // 实例化径向渐变   RadialGradient radialGradient = new RadialGradient(canvas.getWidth() / 2F, canvas.getHeight() / 2F, radiu, new int[] { 0, 0, 0xAA000000 }, new float[] { 0F, 0.7F, 1.0F }, TileMode.CLAMP);    // 实例化一个矩阵   Matrix matrix = new Matrix();    // 设置矩阵的缩放   matrix.setScale(canvas.getWidth() / (radiu * 2F), 1.0F);    // 设置矩阵的预平移   matrix.preTranslate(((radiu * 2F) - canvas.getWidth()) / 2F, 0);    // 将该矩阵注入径向渐变   radialGradient.setLocalMatrix(matrix);    // 设置画笔Shader   mShaderPaint.setShader(radialGradient);    // 绘制矩形   canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mShaderPaint);   break;  default:   break;  }  }   @Override  protected void onDraw(Canvas canvas) {  canvas.drawColor(Color.BLACK);   // 新建图层  int sc = canvas.saveLayer(x, y, x + mSrc.getWidth(), y + mSrc.getHeight(), null, Canvas.ALL_SAVE_FLAG);   // 绘制混合颜色  canvas.drawColor(0xcc1c093e);   // 设置混合模式  mBitmapPaint.setXfermode(mXfermode);   // 绘制位图  canvas.drawBitmap(mSrc, x, y, mBitmapPaint);   // 还原混合模式  mBitmapPaint.setXfermode(null);   // 还原画布  canvas.restoreToCount(sc);   switch (mnSelectMode) {  case BITMAP_NULL:     break;  case BITMAP_DEAST:   break;  case BITMAP_CENTER:   // 绘制一个跟图片大小一样的矩形   canvas.drawRect(x, y, x + mSrc.getWidth(), y + mSrc.getHeight(),mShaderPaint);   break;  case BITMAP_DARKCORNER:   // 绘制我们画好的径向渐变图   canvas.drawBitmap(darkCornerBitmap, x, y, null);   break;  default:   break;  }  } } 

1)、实现 去饱和、提亮、色相矫正 效果的部分代码

mBitmapPaint.setColorFilter(new ColorMatrixColorFilter(  new float[] { 0.8587F, 0.2940F, -0.0927F, 0, 6.79F, 0.0821F, 0.9145F, 0.0634F, 0, 6.79F,   0.2019F, 0.1097F, 0.7483F, 0, 6.79F, 0, 0, 0, 1, 0 })); 

2)、实现中心颜色为透明而边缘颜色为黑色效果的部分代码  

mShaderPaint.setShader(new RadialGradient(mWidth / 2, mWidth / 2, mSrc.getHeight() * 7 / 8, Color.TRANSPARENT,  Color.BLACK, TileMode.CLAMP)); 

3)、实现四角黑暗效果的部分代码

// 根据我们源图的大小生成暗角Bitmap darkCornerBitmap = Bitmap.createBitmap(mSrc.getWidth(), mSrc.getHeight(), Bitmap.Config.ARGB_8888);  // 将该暗角Bitmap注入Canvas Canvas canvas = new Canvas(darkCornerBitmap);  // 计算径向渐变半径 float radiu = canvas.getHeight() * (2F / 3F);  // 实例化径向渐变 RadialGradient radialGradient = new RadialGradient(canvas.getWidth() / 2F, canvas.getHeight() / 2F, radiu, new int[] { 0, 0, 0xAA000000 }, new float[] { 0F, 0.7F, 1.0F }, TileMode.CLAMP);  // 实例化一个矩阵 Matrix matrix = new Matrix();  // 设置矩阵的缩放 matrix.setScale(canvas.getWidth() / (radiu * 2F), 1.0F);  // 设置矩阵的预平移 matrix.preTranslate(((radiu * 2F) - canvas.getWidth()) / 2F, 0);  // 将该矩阵注入径向渐变 radialGradient.setLocalMatrix(matrix);  // 设置画笔Shader mShaderPaint.setShader(radialGradient);  // 绘制矩形 canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mShaderPaint); 

5、图片 + 文字

package com.example.customimage.view;  import com.example.customimage.R;  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.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.graphics.RectF; import android.graphics.Bitmap.Config; import android.graphics.Paint.Style; import android.graphics.Rect; import android.text.TextPaint; import android.text.TextUtils; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.View;  public class ImageViewText extends View{   //类型  private int type;  private static final int TYPE_CIRCLE = 0; //圆形  private static final int TYPE_RECT = 1; //矩形圆角  //原始图片  private Bitmap mImage;  //控件的宽度  private int mWidth;   // 控件的高度  private int mHeight;   //矩形圆角的幅度  private int mRadius;  //图片下面的文字  private String mTitle;  private int mTextColor;  private int mTextSize;  private Rect rect;  private Paint mPaint;  private Rect mTextBound;   public ImageViewText(Context context, AttributeSet attrs)  {  this(context, attrs, 0);  }   public ImageViewText(Context context)  {  this(context, null);  }   /**  * 初始化所特有自定义类型  *  * @param context  * @param attrs  * @param defStyle  */  public ImageViewText(Context context, AttributeSet attrs, int defStyle)  {  super(context, attrs, defStyle);   TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ImageViewText, defStyle, 0);   int n = a.getIndexCount();   for (int i = 0; i < n; i++)  {   int attr = a.getIndex(i);    switch (attr)   {   //获取图片   case R.styleable.ImageViewText_image:   mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));   break;   //获取圆形还是方形   case R.styleable.ImageViewText_type:   type = a.getInt(attr, 0);   break;   //获取文字   case R.styleable.ImageViewText_titleText:   mTitle = a.getString(attr);   break;   //获取文字的图片   case R.styleable.ImageViewText_titleTextColor:   mTextColor = a.getColor(attr, Color.BLACK);   break;   //获取文字的大小   case R.styleable.ImageViewText_titleTextSize:   mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,    16, getResources().getDisplayMetrics()));   break;   //矩形圆角幅度的获取,默认是10dp   case R.styleable.ImageViewText_borderRadius:   mRadius = a.getDimensionPixelSize(attr, (int) TypedValue    .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,     getResources().getDisplayMetrics()));   break;   }  }  a.recycle();  rect = new Rect();  mPaint = new Paint();  mTextBound = new Rect();  mPaint.setTextSize(mTextSize);  // 计算了描绘字体需要的范围  mPaint.getTextBounds(mTitle, 0, mTitle.length(), mTextBound);   }   //测量控件的大小  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {   //设置宽度  int specMode = MeasureSpec.getMode(widthMeasureSpec);  int specSize = MeasureSpec.getSize(widthMeasureSpec);  // match_parent , accurate 大小  if (specMode == MeasureSpec.EXACTLY)  {   mWidth = specSize;  } else  {   // 由图片决定的宽   int desireByImg = getPaddingLeft() + getPaddingRight() + mImage.getWidth();   // 由字体决定的宽   int desireByTitle = getPaddingLeft() + getPaddingRight() + mTextBound.width();   //wrap_content 大小   if (specMode == MeasureSpec.AT_MOST)   {   //取小的值   int desire = Math.max(desireByImg, desireByTitle);   mWidth = Math.min(desire, specSize);   }  }   //设置高度  specMode = MeasureSpec.getMode(heightMeasureSpec);  // match_parent , accurate 大小  if (specMode == MeasureSpec.EXACTLY)  {   mHeight = specSize;  } else  {   //wrap_content 大小   mHeight = getPaddingTop() + getPaddingBottom() + mImage.getHeight() + mTextBound.height();  }  //测量好的大小设置进去  setMeasuredDimension(mWidth, mHeight);  }   @Override  protected void onDraw(Canvas canvas)  {  // 边框  mPaint.setStrokeWidth(4);  mPaint.setStyle(Paint.Style.STROKE);  mPaint.setColor(Color.CYAN);  canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);   mPaint.setColor(mTextColor);  mPaint.setStyle(Style.FILL);  //当前设置的宽度小于字体需要的宽度,将字体改为  //绘制文字  if (mTextBound.width() > mWidth)  {   TextPaint paint = new TextPaint(mPaint);   String msg = TextUtils.ellipsize(mTitle, paint, (float) mWidth - getPaddingLeft() - getPaddingRight(),    TextUtils.TruncateAt.END).toString();   canvas.drawText(msg, getPaddingLeft(), mHeight - getPaddingBottom(), mPaint);   } else  {   //正常情况,将字体居中   canvas.drawText(mTitle, mWidth / 2 - mTextBound.width() * 1.0f / 2, mHeight - getPaddingBottom(), mPaint);  }     //计算居中的矩形范围   rect.left = mWidth / 2 - mImage.getWidth() / 2 + getPaddingLeft();   rect.right = mWidth / 2 + mImage.getWidth() / 2 + getPaddingRight();   rect.top = (mHeight - mTextBound.height()) / 2 - mImage.getHeight() / 2 + getPaddingTop();   rect.bottom = (mHeight - mTextBound.height()) / 2 + mImage.getHeight() / 2 + getPaddingBottom();    switch (type)  {  // 如果是TYPE_CIRCLE绘制圆形  case TYPE_CIRCLE:   //圆形宽度和高度应该一致的,所以也要比较一下大小,取小的值   int min = Math.min(mWidth, mHeight);   // 圆形宽度和高度如果不一致,按小的值进行压缩   mImage = Bitmap.createScaledBitmap(mImage, min, min, false);   //绘制圆形   canvas.drawBitmap(createCircleImage(mImage, min), null, rect, null);   break;  case TYPE_RECT:   canvas.drawBitmap(createRoundConerImage(mImage), null, rect, null);   break;   }  }   /**  * 根据原图和变长绘制圆形图片  *  * @param source  * @param min  * @return  */  private Bitmap createCircleImage(Bitmap source, int min)  {  final Paint paint = new Paint();  //防止边缘的抗锯齿  paint.setAntiAlias(true);    Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  // 产生一个同样大小的画布  Canvas canvas = new Canvas(target);  // 首先绘制圆形,除以2就是半径了  //最主要设置第三个参数为min/2,圆角幅度那么大就是圆形了  canvas.drawCircle(min / 2, min / 2, min/2, paint);  // 使用SRC_IN,参考上面的说明---上下层都显示。下层居上显示  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  // 绘制图片  canvas.drawBitmap(source, 0, 0, paint);  return target;  }   /**  * 根据原图添加圆角  *  * @param source  * @return  */  private Bitmap createRoundConerImage(Bitmap source)  {  final Paint paint = new Paint();  paint.setAntiAlias(true);  Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  Canvas canvas = new Canvas(target);  //绘制矩形  RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());  //设置圆角幅度  canvas.drawRoundRect(rect, mRadius, mRadius, paint);  // 使用SRC_IN,参考上面的说明---上下层都显示。下层居上显示  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  canvas.drawBitmap(source, 0, 0, paint);  return target;  } } 

是不是很全的Android自定义图片集合,希望大家喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表