ImageView 绘制圆角效果_Xfermode

最新推荐文章于 2024-05-17 17:32:28 发布
最新推荐文章于 2024-05-17 17:32:28 发布
阅读量730 收藏
点赞数 1
分类专栏： Android UI开发 文章标签： android imageview 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuminfeng728/article/details/53977289
版权

前言

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;
    }
}
yuminfeng728
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android使用Xfermode实现圆角矩形、椭圆ImageView实例.rar
07-10
使用Xfermode渲染方案实现圆角矩形、椭圆自定义ImageView（源代码）。实现的类型主要是：圆形、圆角或椭圆，对这几种类型分别进行了定义，使用缓存技术，避免每次都执行onDraw。 　　如果ImageView类型是圆形，则强制设置view的宽高一致，取宽高的较小值，按照bitmap的宽高，以及view的宽高，计算缩放比例；因为设置的src宽高，比例可能和imageview的宽高比例不同，这里我们不希望图片失真；如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；根据缩放比例，设置bounds，即相当于做缩放图片 。 　　因此本源码实例展示的是绘制不同的图形Bitmap，因编写时采用了缓存技术，别忘了最后需要在invalidate中做些回收释放资源的处理。
Android ImageView绘制圆角效果
08-31
// 绘制圆角矩形 } } } } ``` 在onDraw方法中，我们可以根据type属性来决定是绘制圆形还是圆角矩形。如果是圆形，我们可以使用canvas.clipPath()配合Path.addCircle()来实现；如果是圆角矩形，则可以使用RectF...
圆角imageview android,Android ImageView绘制圆角效果_Android_脚本之家
weixin_39804523的博客
05-27 249
前言Android 开发中，我们经常需要实现图片的圆形/圆角的效果，我们可以使用两种方式来实现这样的效果。一种是使用Xfermode，另一种是BitmapShader来实现。下面我将分别介绍这两种用法。使用Xfermode的方式实现使用该方式的关键代码，如下：private Bitmap creataBitmap(Bitmap bitmap) {//用指定的一个Bitmap来构建一个画布Bitma...
ImageView 圆角
最新发布
m0_46977769的博客
05-17 146
设置imageview圆角或者圆形
实现圆角imageview
承諾、許卟哋
02-27 1972
效果如图，圆角imageview 只需重新imageview，然后在布局中引入该imageview：           android:id="@+id/iv"           android:layout_width="wrap_content"           android:layout_height="wrap_content"      
Android ImageView 圆角实现
Misdirection_XG的博客
07-09 6627
Android开发过程中，ImageView是必不可少的几种控件之一，通常为了美观，图标等内容会设置为圆角，以下简单总结了几种设置圆角的方法。RoundImageView为第三方库，在build.gradle(:app)中使用以下语句导入： 该控件使用起来也非常方便，圆角设置为10dp示例如下： 效果如下： 2. CardView CardView为Android系统自带控件，使用CardView包裹ImageView也可以实现圆角效果，需要注意的是，CardView有可能会影响到控件层级，可以通过设置避
Android自定义ImageView圆角
涛的博客
08-07 2976
在Android项目中经常遇见圆角的图片的展示问题，但是很可惜，Android中的imageView并不是原生就支持圆角的，那么在Android中实现展示圆角图片的方式有几种呢？这里笔者大致总结一下分为以下几种以上，其中2/3是借助其他图片加载库实现，1是需要自行实现ImageView中圆角的绘制函数，4需要布局多一层嵌套。 按照最简单的做法这里推荐使用CardView的方式实现圆角。但是有时候UI设计师的设计图总是不是很如开发的口味，会出现上边需要圆角，底部无圆角的设计需求，那么这是时候，直接使用自定义I
Lsn5_Paint_Xfermode_SRC.rar
03-19
标题中的“Lsn5_Paint_Xfermode_SRC”暗示了这个压缩包可能包含一个关于使用Android的Paint类和Xfermode模式的编程示例。在Android开发中，Paint对象是用于绘制图形的基本工具，而Xfermode则允许我们定义如何将一个...
Android自定义圆角ImageView
09-02
总结，自定义圆角ImageView是通过创建一个新的`Bitmap`，在上面绘制图像，并利用`Paint`对象的`Xfermode`属性来剪切图像的直角部分，达到圆角效果。这种方法允许开发者灵活地控制图片显示的样式，增强应用的界面设计...
Android中通过反射实现圆角ImageView代码实例
09-03
在这里，我们先保存canvas的状态，然后设置`roundRect`的大小为ImageView的宽度和高度，接着用`drawRoundRect()`方法绘制圆角矩形。`reflectSetXfermod()`方法用于设置Drawable的Paint对象，之后调用`super.onDraw...
圆角Imageview
گ 我就是我我只为自己代言 گ
08-01 381
001.也是项目需求，我们的UI妹子设计了圆角图片，我开始准备自定义结果自己能力有限废了好大劲还没达到效果，之后就去搜索，开源强大，还真简单实现图片圆角            002.cardview简单实现图片圆角处理：cardview是Android5.0出的一个新控件，直接包裹一个Imageview实现圆角                    添加依赖：               
圆形、圆角ImageView
11-10
圆形，圆角自定义ImageView 。将传入的图片变成圆形的，或者带圆角的。加入功能就能使用
ImageView圆角
全干工程师
05-27 1581
activity_main.xml <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:CustomImageView="http://schemas.android.com/apk/res/com.example.customview05imageview" xmlns:too
圆角ImageView
weixin_34081595的博客
10-09 396
最近想在github上找个圆角带边框的ImageView，找了几个或者不支持Color、或者不支持gif、或者不支持Glide，所以干脆自己用 Kotlin 写一个，实现原理是BitmapShader。github地址：RoundCornerImageView 效果图： Gradle dependencies { implementation 'com.howshea:roundCorn...
重写ImageView使用Xfermode遮罩实现圆角和圆形
Ataraxia的专栏
03-07 2353
重写ImageView，并且在画布上绘制出四个角，使用DST_OUT取图模式对图片取出； 网上各种案例都有给出上面的实现方法，那么就来说说怎么实现 首先绘制出4个角，然后叠加而成，叠加的时候使用DST_OUT取图模式把图片取出即可； 看一下布局： <LinearLayout xmlns:android="http://schemas.android.com
使用XferMode绘制圆角图片
lyzirving的博客
05-07 426
前言在项目遇到了使用圆角图片的需求，之前的代码是使用XferMode实现的，但在不同的机型中出现了问题。于是我想在原代码基础上进行修改，却没有成功，于是使用裁剪的方式实现了圆角。下来后，借鉴了大牛的文章，发现了XferMode中的坑，总结后，完成的圆角的实现。XferMode中的坑原文链接奉上，非常感谢博主！https://blog.csdn.net/u013085697/article/deta...
圆角ImageView/圆形ImageView
snow_lyGirl
06-29 315
Kotlin实现圆角ImageView
圆形ImageView系列（一）-----Xfermode+View
金克丝的美好初衷
02-02 851
前言看标题就知道，这是一个系列，因为实现圆形ImageView的方法有很多种，所以接下来准备将这几种方法都实现一遍，最后总结对比下各种方法。虽然网上已经有很多现成的分析文章以及源代码，但是毕竟是别人总结的，还是没有自己实践来的真实。纸上得来终觉浅，绝知此事要躬行哈。下面就开始来说最简单常用的一种方法：自定义View+设置Xfermode的方式。先给大家看效果图： 提莫萌萌哒~ 主要原理关于X
imageview设置圆角
07-16
可以通过以下步骤设置 Android ImageView 的圆角： 1. 创建一个 xml 文件，例如 "rounded_corner.xml"，并将以下代码复制到文件中： ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="10dp" /> </shape> ``` 2. 在布局文件中，将 ImageView 的背景设置为刚才创建的 xml 文件： ``` <ImageView android:id="@+id/my_image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/rounded_corner" android:src="@drawable/my_image" /> ``` 3. 如果需要在代码中设置圆角，可以使用以下代码： ``` ImageView imageView = findViewById(R.id.my_image_view); GradientDrawable drawable = (GradientDrawable) imageView.getBackground(); drawable.setCornerRadius(10f); ``` 其中，10f 是圆角的半径，可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值