Android  ImageView绘制圆角效果

发布时间 - 2026-01-10 22:15:07    点击率:

前言

Android 开发中,我们经常需要实现图片的圆形/圆角的效果,我们可以使用两种方式来实现这样的效果。一种是使用Xfermode,另一种是BitmapShader来实现。下面我将分别介绍这两种用法。

使用Xfermode的方式实现
使用该方式的关键代码,如下:

  private Bitmap creataBitmap(Bitmap bitmap) {

    //用指定的一个Bitmap来构建一个画布
    Bitmap target = Bitmap.createBitmap(1000,1000, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    final Paint paint = new Paint();
    paint.setColor(Color.GREEN);
    paint.setAntiAlias(true);
    //在刚才的画布上绘制一个圆形区域
    canvas.drawCircle(500,500,500,paint);
    //设置Xfermode,使用SRC_IN模式,这样可以取到第二张图片重叠后的区域
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    //在画布上绘制第二个需要显示的bitmap
    canvas.drawBitmap(bitmap,0,0,paint);
    return target;
  }

上面代码中看出在指定的画布上绘制了两层图像,一个是半径为500像素的圆形,一个是将目标Bitmap绘制在上面。之间还调用了paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));作用是这两个绘制的效果图叠加后,取得第二个图的交集图。所以,我们先绘制一个圆形,然后绘制Bitmap,交集为圆形,取出的就是圆形区域的Bitmap了。
PorterDuff.Mode中一共有16种效果显示,如下:

可以根据不同的Mode,控制显示的效果图。

开始应用

1.自定义属性在attrs.xml中

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <attr name="borderRadius" format="dimension" />
  <attr name="type">
    <enum name="circle" value="0"/>
    <enum name="round" value="1"/>
  </attr>
  <attr name="src" format="reference"/>
  <declare-styleable name="RoundImageView">
    <attr name="borderRadius"/>
    <attr name="type"/>
    <attr name="src"/>
  </declare-styleable>

</resources>

2.自定义View

public class RoundImageView extends View {

  private int type;
  private static final int TYPE_CIRCLE = 0;
  private static final int TYPE_ROUND = 1;
  //图片
  private Bitmap mSrc;
  //圆角大小
  private int mRadius;
  //高度
  private int mWidth;
  //宽度
  private int mHeight;

  public RoundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    //获取自定义的属性
    TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.RoundImageView);
    //获取自定以属性的数目
    int count = a.getIndexCount();
    for (int i=0 ; i<count ; i++){
      int attr = a.getIndex(i);
      switch (attr){
        case R.styleable.RoundImageView_borderRadius:
          int defValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10f,getResources().getDisplayMetrics());
          mRadius = a.getDimensionPixelSize(attr, defValue);
          break;
        case R.styleable.RoundImageView_type:
          type = a.getInt(attr,0);
          break;
        case R.styleable.RoundImageView_src:
          mSrc = BitmapFactory.decodeResource(getResources(),a.getResourceId(attr,0));
          break;
      }
    }

    a.recycle();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //设置宽度
    int specMode = MeasureSpec.getMode(widthMeasureSpec);
    int specSize = MeasureSpec.getSize(widthMeasureSpec);
    if (specMode == MeasureSpec.EXACTLY){
      mWidth = specSize;
    }else {
      int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth();
      if (specMode == MeasureSpec.AT_MOST)// wrap_content
      {
        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();
      if (specMode == MeasureSpec.AT_MOST)// wrap_content
      {
        mHeight = Math.min(desire, specSize);
      } else
        mHeight = desire;
    }

    setMeasuredDimension(mWidth,mHeight);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (type){
      case TYPE_CIRCLE:
        int min = Math.min(mWidth,mHeight);
        //从当前存在的Bitmap,按一定的比例创建一个新的Bitmap。
        mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
        canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);

        break;
      case TYPE_ROUND:
        mSrc = Bitmap.createScaledBitmap(mSrc, mWidth, mHeight, false);
        canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);

        break;
    }
  }

  /**
   * 绘制圆角
   * @param source
   * @return
   */
  private Bitmap createRoundConerImage(Bitmap source) {
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    RectF rect = new RectF(0, 0, mWidth, mHeight);
    canvas.drawRoundRect(rect, mRadius, mRadius, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(source, 0, 0, paint);
    return target;
  }

  /**
   * 绘制圆形
   * @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, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    canvas.drawCircle(min/2,min/2,min/2,paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(source, 0, 0, paint);
    return target;
  }
}

3.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:roundview="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:padding="10dp"
       tools:context="mo.yumf.com.myviews.MainActivity">


  <mo.yumf.com.myviews.RoundImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="20dp"
    roundview:borderRadius="10dp"
    roundview:src="@drawable/ac_default_icon"
    roundview:type="round"/>

  <mo.yumf.com.myviews.RoundImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="20dp"
    roundview:src="@drawable/ac_default_icon"
    roundview:type="circle"/>
</LinearLayout>

上面的自定义View中,存在一个局限,那就是只能在布局中设置要加载的图片资源,不能在代码中设置图片。下面我们使用同样的方式,选择自定义ImageView来实现。

public class RoundImageView extends ImageView {

  private int type;
  private static final int TYPE_CIRCLE = 0;
  private static final int TYPE_ROUND = 1;
  //图片
  private Bitmap mSrc;
  //圆角大小
  private int mRadius;

  public RoundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    //获取自定义的属性
    TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.RoundImageView);
    //获取自定以属性的数目
    int count = a.getIndexCount();
    for (int i=0 ; i<count ; i++){
      int attr = a.getIndex(i);
      switch (attr){
        case R.styleable.RoundImageView_borderRadius:
          int defValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10f,getResources().getDisplayMetrics());
          mRadius = a.getDimensionPixelSize(attr, defValue);
          break;
        case R.styleable.RoundImageView_type:
          type = a.getInt(attr,0);
          break;
      }
    }

    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    if (getDrawable() != null){
      Bitmap bitmap = getBitmap(getDrawable());
      if (bitmap != null){
        switch (type){
          case TYPE_CIRCLE:
            //获取ImageView中的宽高,取最小值
            int min = Math.min(getMeasuredWidth(),getMeasuredHeight());
            //从当前存在的Bitmap,按一定的比例创建一个新的Bitmap。
            mSrc = Bitmap.createScaledBitmap(bitmap, min, min, false);
            canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);

            break;
          case TYPE_ROUND:
            mSrc = Bitmap.createScaledBitmap(bitmap, getMeasuredWidth(), getMeasuredHeight(), false);
            canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);

            break;
        }
      }
    }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;
    }
  }


  /**
   * 绘制圆角
   * @param source
   * @return
   */
  private Bitmap createRoundConerImage(Bitmap source) {
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    Bitmap target = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    RectF rect = new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight());
    canvas.drawRoundRect(rect, mRadius, mRadius, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(source, 0, 0, paint);
    return target;
  }

  /**
   * 绘制圆形
   * @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, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    canvas.drawCircle(min/2,min/2,min/2,paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(source, 0, 0, paint);
    return target;
  }
}

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


# ImageView绘制圆角效果  # Xfermode绘制圆角  # BitmapShader绘制圆角  # Android自定义ImageView实现圆角功能  # Android实现自定义ImageView的圆角矩形图片效果  # Android自定义圆角ImageView控件  # Android自定义控件之圆形、圆角ImageView  # Android实现圆角矩形和圆形ImageView的方式  # Android 圆角 ImageView类可设置弧度(代码简单)  # Android自定义圆角ImageView  # Android中通过反射实现圆角ImageView代码实例  # Android自定义带圆角的ImageView  # 自定义  # 圆角  # 来实现  # 第二个  # 创建一个  # 自定  # 两种  # 能在  # 这两个  # 我将  # 可以使用  # 在上面  # 可以根据  # 这两种  # 两层  # 出在  # 大家多多  # 最小值  # 那就是  # 构建一个 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 再谈Python中的字符串与字符编码(推荐)  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  如何快速搭建个人网站并优化SEO?  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  利用JavaScript实现拖拽改变元素大小  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况?  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异?  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel如何使用Service Container和依赖注入?(代码示例)  如何在阿里云虚拟服务器快速搭建网站?  想要更高端的建设网站,这些原则一定要坚持!  Laravel如何生成URL和重定向?(路由助手函数)  如何用花生壳三步快速搭建专属网站?  深圳网站制作设计招聘,关于服装设计的流行趋势,哪里的资料比较全面?  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  Laravel如何为API编写文档_Laravel API文档生成与维护方法  大连网站制作公司哪家好一点,大连买房网站哪个好?  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  如何确认建站备案号应放置的具体位置?  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册?  Bootstrap整体框架之JavaScript插件架构  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  如何登录建站主机?访问步骤全解析  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  Laravel如何保护应用免受CSRF攻击?(原理和示例)  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码?  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Laravel如何自定义错误页面(404, 500)?(代码示例)  海南网站制作公司有哪些,海口网是哪家的?  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Laravel如何使用Collections进行数据处理?(实用方法示例)  高性能网站服务器部署指南:稳定运行与安全配置优化方案  *服务器网站为何频现安全漏洞?  如何在宝塔面板中创建新站点?  EditPlus中的正则表达式实战(6)  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】