android-自定义ImageView-圆形图片绘制代码详解

最新推荐文章于 2024-02-06 16:09:54 发布

龙吟在天

最新推荐文章于 2024-02-06 16:09:54 发布

阅读量4.6k

点赞数 7

分类专栏： android开发文章标签： android 圆形头像图片圆形图 PorterDuff

本文链接：https://blog.csdn.net/u010156024/article/details/49229771

版权

android开发专栏收录该内容

51 篇文章 3 订阅

订阅专栏

andorid中圆形图片很早就有啦，今天算是搞了一把，自己写了出来，并且可以实际使用的代码。
先看效果图：
这里写图片描述

图片的原图是：
这里写图片描述

先看看xml的布局文件是怎么样的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.husy.surfaceviewexample.PorterDuffViewImage
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@mipmap/zly"
    android:visibility="visible"
    />
</LinearLayout>

布局文件很简单，只要是ImageView的属性都可以在自定义的圆形图片组件中使用。
由于布局文件中规定了图片大小60dp，所以你看到效果图中，相对于原图来说，是由缩放效果的，但是整体的图片是居中进行缩放显示。

好了，说到这里，首先补充一些基础知识。
代码中使用到了PorterDuffXfermode 类：

PorterDuffXfermode 这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。
该类的用法如下：

//创建PorterDuffXfermode
PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
//设置mode画笔风格
paintnew.setXfermode(mode);

这样设置画笔，到底什么效果，看看Google的效果图：
这里写图片描述

1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
取两图层全部区域，交集部分变为透明色
（以上内容参考我的博友的文章内容：原文链接请猛戳这里是个妹子呦~~~哈哈）

看了上面的内容，我觉得对于刚开始接触这个类的同学来说，太过抽象啦。
下面我给解释一下，希望能达到解惑的目的吧。

首先看上面的16副图中的第二幅和第三幅图，里面都是一幅图片，Src代表原图，是一个正方形，Dst代表目的图，是一个圆形。
下面接着看第四幅图，SrcOver模式，你会发现正方形放在了圆形的上面，并且正方形显示完全，圆形被正方形覆盖了一部分。这就是SrcOver模式的效果。
下面再看第五幅图，PorterDuff.Mode.DST_OVER，你会发现圆形放在了正方形的上面，圆形显示完全，正方形被覆盖了，这就是这种模式达到的效果。

我们看了这几幅图之后，就可以做一个总结啦。
也就是说上面的PorterDuffXfermode 类完成的效果，应该是两幅图或者说两个位图完成的效果。
这个时候，你在看下面的11中模式，会发现都是在两幅图或者两幅位图的基础上进行显示的效果。

下面我们就有了画圆形图头像的思路了。
利用的就是上面的PorterDuff.Mode.SRC_IN或者是PorterDuff.Mode.DST_IN这两种模式达到的效果。

首先说说PorterDuff.Mode.SRC_IN这种模式的思路：
这里写图片描述
这种效果如上图。正方形在圆形图上面的部分显示出来，正方形的其他部分不显示。并且圆形图也不显示。

我们可以把正方形的部分设置我们要显示的头像图片，把圆形部分设置为我们的圆形的位图，并且这两个图都居中显示，这样达到的效果就是圆形头像图片的效果！！

再说说PorterDuff.Mode.DST_IN这种模式的思路：
这里写图片描述
这种效果图上，正方形部分不显示，只显示圆形图在正方形重合的部分，圆形图的其他部分不显示。

这个模式下，我们把圆形图设置为我们想要显示的头像图片，把正方形设置为圆形的位图，并且这两个图都居中显示，这样达到的效果就是圆形头像的效果。

对比上面两种模式下的思路，会发现我们只是把图片调换了以下就可以啦。

好了，下面给出两种模式下的代码，首先给出PorterDuff.Mode.SRC_IN模式下的代码：

public class MyXfermode extends View{
    private int width;
    private int height;
    private Paint mpaint;
    private Bitmap mbitmap;
    private Bitmap moutbitmap;
    public MyXfermode(Context context) {
        super(context);

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

        initBitmap();
    }
    public void initBitmap(){
    //禁用硬件加速器，因为有些硬件加速器不支持
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        //设置抗锯齿
        mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mpaint.setColor(Color.YELLOW);      
        mbitmap=BitmapFactory.decodeResource(getResources(),R.drawable.yourimg);
        //以后的绘制都将显示在moutbitmap上面
       moutbitmap=Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), Config.ARGB_8888);
       Log.d("图片信息", mbitmap.getWidth()+ "高"+mbitmap.getHeight());
        Canvas canvas_outbitmap=new Canvas(moutbitmap);

        //Dst
        canvas_outbitmap.drawCircle(mbitmap.getWidth()/2, mbitmap.getHeight()/2,mbitmap.getWidth()/2,mpaint);
        PorterDuffXfermode mode=new PorterDuffXfermode(Mode.SRC_IN); 
        mpaint.setXfermode(mode);
        //Src
        canvas_outbitmap.drawBitmap(mbitmap, 0, 0, mpaint);

    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(moutbitmap,0,0,null);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
    }
}

布局文件就很简单啦：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

  <com.example.myview.MyXfermode

        android:id="@+id/myarcprogress"
                android:layout_width="400dp"
        android:layout_height="400dp" />
</LinearLayout>

（这里实例代码是我从妹子的博客里面搞过来的，你会发现这里代码不通用，使用的资源文件图片，我们先要实现的是xml布局文件中进行的设置的图片或者代码中设置的图片，请看下面的另一种方式）

第二种方式，PorterDuff.Mode.DST_IN
代码如下：

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

/**
 * Created by husy on 2015/10/18.
 * @link http://blog.csdn.net/u010156024
 * @description：
 */
public class PorterDuffViewImage extends ImageView {
    private Paint mpaint;
    private static Xfermode xfermode;
    private static Bitmap bitmap;
    private RectF rect;
    public PorterDuffViewImage(Context context) {
        super(context);
        init();
    }

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

    public PorterDuffViewImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init(){
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        mpaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Bitmap.Config config = Bitmap.Config.ARGB_8888;
        Canvas canvas1=null;
        BitmapDrawable drawable = (BitmapDrawable)getDrawable();
        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);
        if (bitmap == null){
            Log.i("porterduffviewimage","bitmap==null");
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            rect = new RectF(0,0,width,height);
            bitmap = Bitmap.createBitmap(width, height, config);
            canvas1 = new Canvas(bitmap);
            canvas1.drawOval(rect, paint);
        }
        mpaint.setXfermode(xfermode);
        canvas.drawBitmap(bitmap,0,0,mpaint);
    }

}

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <com.husy.surfaceviewexample.PorterDuffViewImage
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@mipmap/zly"
    android:visibility="visible"
    />

</LinearLayout>

显示效果就是文章开头实现的效果图。

下面我对第二种方式的代码一一进行解释：

首先是三个构造器。这个是实现自定义view中必须的，当然，你也会看到只实现前两个构造器的，但是标准来说，应该是实现这两个构造器。并且从API 21开始增加了下面一种构造器：

public PorterDuffViewImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

不过，不影响，不实现这第四个构造器也没有问题的。

接着是初始化的方法init(),在这里面进行初始化对象，利用绘制过程中使用到的画笔、模式等等。
下面是重写onDraw()方法。这个是该类的重点。

int width = getWidth();
int height = getHeight();

这两行代码是获取组件的大小宽高。

BitmapDrawable drawable = (BitmapDrawable)getDrawable();
 drawable.setBounds(0, 0, width, height);
 drawable.draw(canvas);

这几行代码是绘制目标图片，也就是头像图片在这几行代码中完成，绘制到画板上面，此时是矩形的图片，为什么是矩形图片呢？因为在布局文件中使用android:src=”@drawable/zly”或者是在代码中设置：((PorterDuffViewImage)findViewById(R.id.porter))
.setImageResource(R.mipmap.zly);
这样通过getDrawable()获取的就是原始图片。
需要注意的是：画板中绘制PorterDuff.Mode类型的图片，需要先绘制目的DST图片！！在回事SRC图片！ 请理解这句话！！

然后的代码请看：

if (bitmap == null){
            Log.i("porterduffviewimage","bitmap==null");
            Bitmap.Config config = Bitmap.Config.ARGB_8888;
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            rect = new RectF(0,0,width,height);
            bitmap = Bitmap.createBitmap(width, height, config);
            canvas1 = new Canvas(bitmap);
            canvas1.drawOval(rect, paint);
        }

这个代码中绘制一个位图bitmap的圆形位图，这就是SRC图！！为什么是圆形呢？因为我们想要的效果就是圆形头像！而这个bitmap位图没有图像，只是一个圆形区域，那么头像图片从何而来呢？就是从上面绘制的DST图中而来！！
要知道，我们此时采用的模式是：PorterDuff.Mode.DST_IN
这种模式是DST图在SRC图中重合的部分显示出来，DST图的重合区域外部不显示，并且SRC图整个不显示。
这里的代码使用了if判断，是因为为了复用！利用static修饰，当重复使用圆形图的时候，只用创建一个类变量！！！
不过我们上面只是利用canvas1画板得到一个圆形位图，要显示圆形头像图片，还要把圆形位图画在原来的画板上，所以有了以下的代码：

 mpaint.setXfermode(xfermode);
 canvas.drawBitmap(bitmap,0,0,mpaint);

设置画笔的模式，同时把位图显示在canvas上！！
这样，我们就得到了圆形头像！！效果就是刚开始展示的图像！！

既然有了自定义view，我们可能不在布局中定义android：src=”@drawable/zly”,我们可能在代码中定义：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ((PorterDuffViewImage)findViewById(R.id.porter))
                .setImageResource(R.mipmap.zly);
    }
}

这样也是OK的，布局中就简单了：

<com.husy.surfaceviewexample.PorterDuffViewImage
        android:id="@+id/porter"
        android:layout_width="60dp"
    android:layout_height="60dp"
    />

显示效果和文章开始的图像一样：
这里写图片描述

到此，具有实际应用价值的自定义的圆形头像代码完成！！！
有点小感慨啊，看着挺简单的东西，自己一步步搞出来，遇到各种问题。建议大家好好敲一遍代码！

龙吟在天

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
android-自定义ImageView-圆形图片绘制代码详解

andorid中圆形图片很早就有啦，今天算是搞了一把，自己写了出来，并且可以实际使用的代码。先看效果图：图片的原图是：先看看xml的布局文件是怎么样的：<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
复制链接

扫一扫