20行代码写出一个圆形的ImageView

本文介绍如何使用20行代码实现一个圆形的ImageView组件。主要通过自定义View并重写onDraw方法,利用PorterDuffXfermode设置图层交集的显示方式,最终实现圆形图像视图,并可自定义边框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

昨天在简书上看到一篇文章,写的是通过20行代码写出一个圆形的ImageView,自己也尝试了一下,效果还说得过去。

大家都知道,我们自己要写一个圆形的ImageView,先写一个类继承于ImageView。然后实现构造方法,重写onDraw(Canvas canvas)。

下面上代码:

package com.lucasey.demo0808;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
 * 20行代码写出一个圆形的imageview
 * @author Administrator
 */
public class CircleImage extends ImageView{

    public CircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获得图片的宽度
        int width=getWidth();
        //获得图片的高度
        int height=getHeight();
        //短的二分之一作为半径
        int radius=height>width?width/2:height/2;

        //重新定义的一个画布,这一步很关键
        Paint mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        Bitmap bitmap = Bitmap.createBitmap(width,height,
                Bitmap.Config.ARGB_8888);
        Canvas bitmapCanvas = new Canvas(bitmap);
        super.onDraw(bitmapCanvas);

        //圆形的框
        Bitmap cB = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas cCanv = new Canvas(cB);
        //在控件中间画一个
        cCanv.drawCircle(width/ 2, height/ 2, radius,
                mPaint);

        canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
        //dst是后画的图形
        mPaint.setXfermode(new PorterDuffXfermode(
                PorterDuff.Mode.DST_IN));
        //一定要用之前的画布,不然会出现边角是黑色
        bitmapCanvas.drawBitmap(cB, 0.0f, 0.0f, mPaint);

        //给图形加边框
        Paint paint =new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.BLACK);
        canvas.drawCircle(width/ 2, height/ 2, radius,
                paint);
    }

}

在这里面,主要是用到PoterDuffXfermode来设置两个图层交集区域的显示方式,最后的边框可根据自己的需要进行自定义修改
如此,一个圆形的ImageView就实现了

下面是xml中的引用:

<com.lucasey.demo0808.CircleImage
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/m90" />

补充下android.graphics.Paint方法setXfermode

用法:设置两张图片相交时的模式
例子:
1 mPaint = new Paint();
2 mPaint.setXfermode( new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

常见的Xfermode(SRC为原图,DST为目标图),把代码中的SRC_IN换成下图指定的模式就会出现对应的效果图。
Canvas canvas = new Canvas(Src);
paint.setXfermode( new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(Dst, 0f, 0f, paint);
具体内容如下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值