当前位置: 首页 > 编程笔记 >

Android自定义控件之圆形、圆角ImageView

后焕
2023-03-14
本文向大家介绍Android自定义控件之圆形、圆角ImageView,包括了Android自定义控件之圆形、圆角ImageView的使用技巧和注意事项,需要的朋友参考一下

一、问题在哪里?

问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:

 二、怎么搞?

机智的我,第一想法就是,切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈!

在背景纯色的前提下,这的确能简单解决问题,但是如果背景没有这么简单呢?

在这种不规则背景下,有两个问题:

1)、背景图常常是适应手机宽度缩放,而头像的尺寸又是固定宽高DP的,所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的。

2)、在这种非纯色背景下,哪天想调整一下头像位置就得重新换图片蒙板,实在是太难维护了……

所以呢,既然头像图片肯定是方的,那就就让ImageView圆起来吧。

三、开始干活

基本思路是,自定义一个ImageView,通过重写onDraw方法画出一个圆形的图片来:

public class ImageViewPlus extends ImageView{
  private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
  private Bitmap mRawBitmap;
  private BitmapShader mShader;
  private Matrix mMatrix = new Matrix();
  
  public ImageViewPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
    Bitmap rawBitmap = getBitmap(getDrawable());
    if (rawBitmap != null){
      int viewWidth = getWidth();
      int viewHeight = getHeight();
      int viewMinSize = Math.min(viewWidth, viewHeight);
      float dstWidth = viewMinSize;
      float dstHeight = viewMinSize;
      if (mShader == null || !rawBitmap.equals(mRawBitmap)){
        mRawBitmap = rawBitmap;
        mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
      }
      if (mShader != null){
        mMatrix.setScale(dstWidth / rawBitmap.getWidth(), dstHeight / rawBitmap.getHeight());
        mShader.setLocalMatrix(mMatrix);
      }
      mPaintBitmap.setShader(mShader);
      float radius = viewMinSize / 2.0f;
      canvas.drawCircle(radius, radius, radius, mPaintBitmap);
    } else {
      super.onDraw(canvas);
    }
  }

  private Bitmap getBitmap(Drawable drawable){
    if (drawable instanceof BitmapDrawable){
      return ((BitmapDrawable)drawable).getBitmap();
    } else if (drawable instanceof ColorDrawable){
      Rect rect = drawable.getBounds();
      int width = rect.right - rect.left;
      int height = rect.bottom - rect.top;
      int color = ((ColorDrawable)drawable).getColor();
      Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(bitmap);
      canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
      return bitmap;
    } else {
      return null;
    }
  }
}

分析一下代码:

 canvas.drawCircle 决定了画出来的形状是圆形,而圆形的内容则是通过 mPaintBitmap.setShader 搞定的。

其中,BitmapShader需要设置Bitmap填充ImageView的方式(CLAMP:拉伸边缘, MIRROR:镜像, REPEAT:整图重复)。

这里其实设成什么不重要,因为我们实际需要的是将Bitmap按比例缩放成跟ImageView一样大,而不是预置的三种效果。

所以,别忘了 mMatrix.setScale 和 mShader.setLocalMatrix 一起用,将图片缩放一下。

四、更多玩法 —— 支持边框

看下面的效果图,如果想给圆形的头像上加一个边框,该怎么搞呢?

public class ImageViewPlus extends ImageView{
  private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
  private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
  private Bitmap mRawBitmap;
  private BitmapShader mShader;
  private Matrix mMatrix = new Matrix();
  private float mBorderWidth = dip2px(15);
  private int mBorderColor = 0xFF0080FF;
  
  public ImageViewPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
    Bitmap rawBitmap = getBitmap(getDrawable());
    if (rawBitmap != null){
      int viewWidth = getWidth();
      int viewHeight = getHeight();
      int viewMinSize = Math.min(viewWidth, viewHeight);
      float dstWidth = viewMinSize;
      float dstHeight = viewMinSize;
      if (mShader == null || !rawBitmap.equals(mRawBitmap)){
        mRawBitmap = rawBitmap;
        mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
      }
      if (mShader != null){
        mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
        mShader.setLocalMatrix(mMatrix);
      }
      mPaintBitmap.setShader(mShader);
      mPaintBorder.setStyle(Paint.Style.STROKE);
      mPaintBorder.setStrokeWidth(mBorderWidth);
      mPaintBorder.setColor(mBorderColor);
      float radius = viewMinSize / 2.0f;
      canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder);
      canvas.translate(mBorderWidth, mBorderWidth);
      canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
    } else {
      super.onDraw(canvas);
    }
  }

  private Bitmap getBitmap(Drawable drawable){
    if (drawable instanceof BitmapDrawable){
      return ((BitmapDrawable)drawable).getBitmap();
    } else if (drawable instanceof ColorDrawable){
      Rect rect = drawable.getBounds();
      int width = rect.right - rect.left;
      int height = rect.bottom - rect.top;
      int color = ((ColorDrawable)drawable).getColor();
      Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(bitmap);
      canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
      return bitmap;
    } else {
      return null;
    }
  }
  
  private int dip2px(int dipVal)
  {
    float scale = getResources().getDisplayMetrics().density;
    return (int)(dipVal * scale + 0.5f);
  }
}

看代码中,加边框实际上就是用实心纯色的 Paint 画了一个圆边,在此基础上画上原来的头像即可。

需要的注意的地方有三个:

1)、圆框的半径不是 radius ,而应该是 radius - mBorderWidth / 2.0f 。想象着拿着笔去画线,线其实是画在右图中白色圈的位置,只不过它很粗。

2)、在ImageView大小不变的基础上,头像的实际大小要比没有边框的时候小了,所以 mMatrix.setScale 的时候要把边框的宽度去掉。

3)、画头像Bitmap的时候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ,这样你会发现头像的右侧和下方边缘被拉伸了(右图)

为什么呢?因为 Paint 默认是以左上角为基准开始绘制的,此时头像的实际区域是右图中的红框,而超过红框的部分(圆形的右侧和下方),自然被 TileMode.CLAMP效果沿边缘拉伸了。

所以,需要通过挪动坐标系的位置和调整圆心,才能把头像画在正确的区域(右图绿框)中。

五、更多玩法 —— 支持xml配置

既然有了边框,那如果想配置边框的宽度和颜色该如何是好呢?

基本上两个思路:

1)、给ImageViewPlus加上set接口,设置完成之后通过 invalidate(); 重绘一下即可;

2)、在xml里就支持配置一些自定义属性,这样用起来会方便很多。

这里重点说一下支持xml配置自定义属性。

自定义控件要支持xml配置自定义属性的话,首先需要在 \res\values 里去定义属性:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <attr name="borderColor" format="color" />
  <attr name="borderWidth" format="dimension" />

  <declare-styleable name="ImageViewPlus"> 
    <attr name="borderColor" />
    <attr name="borderWidth" />
  </declare-styleable> 
</resources> 

 然后在ImageViewPlus的构造函数中去读取这些自定义属性:

private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
  private static final int DEFAULT_BORDER_WIDTH = 0;
  
  public ImageViewPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
    //取xml文件中设定的参数
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
    mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
    mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
    ta.recycle();
  }

 在xml布局中使用自定义属性:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/wallpaper"
  android:orientation="vertical"
  tools:context="${relativePackage}.${activityClass}" >
  
  <cc.snser.imageviewplus.ImageViewPlus
    android:id="@+id/imgplus"
    android:layout_width="200dp"
    android:layout_height="300dp"
    android:layout_marginBottom="50dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:src="@drawable/img_square"
    snser:borderColor="#FF0080FF"
    snser:borderWidth="15dp" />
  
</RelativeLayout>

六、更多玩法 —— 圆角ImageView

搞定了圆形ImageView以及对应的边框,那如何实现下面这种圆角的ImageView呢?

 

其实原理上一样,把 canvas.drawCircle 对应改成 canvas.drawRoundRect 就OK了,直接贴代码吧:

public class ImageViewPlus extends ImageView{
  /**
   * android.widget.ImageView
   */
  public static final int TYPE_NONE = 0;
  /**
   * 圆形
   */
  public static final int TYPE_CIRCLE = 1;
  /**
   * 圆角矩形
   */
  public static final int TYPE_ROUNDED_RECT = 2;  
  
  private static final int DEFAULT_TYPE = TYPE_NONE;
  private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
  private static final int DEFAULT_BORDER_WIDTH = 0;
  private static final int DEFAULT_RECT_ROUND_RADIUS = 0;
  
  private int mType;
  private int mBorderColor;
  private int mBorderWidth;
  private int mRectRoundRadius;
  
  private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
  private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
  
  private RectF mRectBorder = new RectF();
  private RectF mRectBitmap = new RectF();
  
  private Bitmap mRawBitmap;
  private BitmapShader mShader;
  private Matrix mMatrix = new Matrix();
  
  public ImageViewPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
    //取xml文件中设定的参数
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
    mType = ta.getInt(R.styleable.ImageViewPlus_type, DEFAULT_TYPE);
    mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
    mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
    mRectRoundRadius = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_rectRoundRadius, dip2px(DEFAULT_RECT_ROUND_RADIUS));
    ta.recycle();
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
    Bitmap rawBitmap = getBitmap(getDrawable());
    
    if (rawBitmap != null && mType != TYPE_NONE){
      int viewWidth = getWidth();
      int viewHeight = getHeight();
      int viewMinSize = Math.min(viewWidth, viewHeight);
      float dstWidth = mType == TYPE_CIRCLE ? viewMinSize : viewWidth;
      float dstHeight = mType == TYPE_CIRCLE ? viewMinSize : viewHeight;
      float halfBorderWidth = mBorderWidth / 2.0f;
      float doubleBorderWidth = mBorderWidth * 2;
      
      if (mShader == null || !rawBitmap.equals(mRawBitmap)){
        mRawBitmap = rawBitmap;
        mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
      }
      if (mShader != null){
        mMatrix.setScale((dstWidth - doubleBorderWidth) / rawBitmap.getWidth(), (dstHeight - doubleBorderWidth) / rawBitmap.getHeight());
        mShader.setLocalMatrix(mMatrix);
      }
      
      mPaintBitmap.setShader(mShader);
      mPaintBorder.setStyle(Paint.Style.STROKE);
      mPaintBorder.setStrokeWidth(mBorderWidth);
      mPaintBorder.setColor(mBorderWidth > 0 ? mBorderColor : Color.TRANSPARENT);
      
      if (mType == TYPE_CIRCLE){
        float radius = viewMinSize / 2.0f;
        canvas.drawCircle(radius, radius, radius - halfBorderWidth, mPaintBorder);
        canvas.translate(mBorderWidth, mBorderWidth);
        canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
      } else if (mType == TYPE_ROUNDED_RECT){
        mRectBorder.set(halfBorderWidth, halfBorderWidth, dstWidth - halfBorderWidth, dstHeight - halfBorderWidth);
        mRectBitmap.set(0.0f, 0.0f, dstWidth - doubleBorderWidth, dstHeight - doubleBorderWidth);
        float borderRadius = mRectRoundRadius - halfBorderWidth > 0.0f ? mRectRoundRadius - halfBorderWidth : 0.0f;
        float bitmapRadius = mRectRoundRadius - mBorderWidth > 0.0f ? mRectRoundRadius - mBorderWidth : 0.0f;
        canvas.drawRoundRect(mRectBorder, borderRadius, borderRadius, mPaintBorder);
        canvas.translate(mBorderWidth, mBorderWidth);
        canvas.drawRoundRect(mRectBitmap, bitmapRadius, bitmapRadius, mPaintBitmap);
      }
    } else {
      super.onDraw(canvas);
    }
  }

  private int dip2px(int dipVal)
  {
    float scale = getResources().getDisplayMetrics().density;
    return (int)(dipVal * scale + 0.5f);
  }
  
  private Bitmap getBitmap(Drawable drawable){
    if (drawable instanceof BitmapDrawable){
      return ((BitmapDrawable)drawable).getBitmap();
    } else if (drawable instanceof ColorDrawable){
      Rect rect = drawable.getBounds();
      int width = rect.right - rect.left;
      int height = rect.bottom - rect.top;
      int color = ((ColorDrawable)drawable).getColor();
      Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(bitmap);
      canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
      return bitmap;
    } else {
      return null;
    }
  }
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/wallpaper"
  android:orientation="vertical"
  tools:context="${relativePackage}.${activityClass}" >
  
  <cc.snser.imageviewplus.ImageViewPlus
    android:id="@+id/imgplus"
    android:layout_width="200dp"
    android:layout_height="300dp"
    android:layout_marginBottom="50dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:src="@drawable/img_rectangle"
    snser:type="rounded_rect"
    snser:borderColor="#FF0080FF"
    snser:borderWidth="10dp"
    snser:rectRoundRadius="30dp" />
  
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <attr name="type"> 
    <enum name="none" value="0" /> 
    <enum name="circle" value="1" /> 
    <enum name="rounded_rect" value="2" />
  </attr>
  <attr name="borderColor" format="color" />
  <attr name="borderWidth" format="dimension" />
  <attr name="rectRoundRadius" format="dimension" />

  <declare-styleable name="ImageViewPlus"> 
    <attr name="type" />
    <attr name="borderColor" />
    <attr name="borderWidth" />
    <attr name="rectRoundRadius" />
  </declare-styleable>
</resources> 

七、Demo源码

Android自定义圆形ImageView

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android自定义控件之圆形/圆角的实现代码,包括了Android自定义控件之圆形/圆角的实现代码的使用技巧和注意事项,需要的朋友参考一下 一、问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:  二、怎么搞? 机智的我,第一想法就是,切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈! 在背景纯色的前提下,这的

  • 本文向大家介绍Android自定义圆角ImageView,包括了Android自定义圆角ImageView的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了。 java类如下: 定义一个attr.xml的文件,放在values目录下面,内容如下: 使用示例如下: 先要声明属性的名字空间: 然后再写跟一般定义View一样: 效果如图: 以上代码简单介绍了Android自定义圆

  • 本文向大家介绍Android自定义控件之圆形进度条动画,包括了Android自定义控件之圆形进度条动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现圆形进度条动画的具体代码,供大家参考,具体内容如下 首先贴上图片: 额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围之内了。 下面说重点,如何来写一个这样的自定义控件。 首

  • 本文向大家介绍Android自定义控件实现圆形进度条,包括了Android自定义控件实现圆形进度条的使用技巧和注意事项,需要的朋友参考一下 项目中常用到的圆形进度条有好多个,从网上搜到的自定义进度条多是封装的比较好的代码,但是不利于初学者,现在本博客就教给大家如何一步步实现自定义进度条的效果: 先看效果如图… 代码实现过程–main布局 这个布局中就是一个简单的引用 自定义ProgressView

  • 本文向大家介绍Android自定义View圆形图片控件代码详解,包括了Android自定义View圆形图片控件代码详解的使用技巧和注意事项,需要的朋友参考一下 前言 在日常开发中,圆形的图片效果还是很常见的。可以通过给Paint设置Xfermode来实现,这里简单记录如下。 实现 实现圆形效果的核心是PorterDuffXfermode,对于PorterDuffXfermode,这里不展开,可以查