关闭

android 手把手教你绘制圆形头像

标签: androidimageview
3265人阅读 评论(2) 收藏 举报
分类:

自从腾讯QQ中的圆形头像,火了起来后,现在我们在一些应用中都能看到圆形头像的身影,在个人主页或者个人资料面板中使用圆形头像,会使整个布局变得更加优雅

现在我们来进行第一步,创建一个继承ImageView的抽象类MakeRoundImage。让他重写onDraw方法,并且声明一个画笔


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by blue on 2016/8/19.
 */

public class MakeRoundImage extends ImageView {
     private Paint paint;

    public MakeRoundImage(Context context) {
         this(context,null);
    }

    public MakeRoundImage(Context context, AttributeSet attrs) {
         this(context, attrs,0);
    }

    public MakeRoundImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
    }


    @Override
    protected void onDraw(Canvas canvas) {

    }
}

然后就可以在onDraw 通过 getDrawable得到ImageView的drawable的属性,然后将它转换为bitmap,通过getRoundBitmap方法得到一个圆角的矩形的Bitmap,下面是getRoundRectBitmap方法

 /*
    @author :blue-zj
    获取到圆角矩形图片
     */
    private Bitmap getRoundRectBitmap(Bitmap bitmap) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int r = width > height ? height: width; //去圆角正方形的边长,取最短边做边长
        Bitmap backGround = Bitmap.createBitmap(width,
                height, Bitmap.Config.ARGB_8888); //创建一个与原图大小一样的32位ARGB位图
        Canvas canvas = new Canvas(backGround);   //new一个Canvas,在backgroundBmp上画图
        Paint paint = new Paint();
        paint.setAntiAlias(true); //设置画笔边缘光滑,去掉锯齿
        RectF rect = new RectF(0, 0, r, r); //设置宽高相等,(正方形)
        //通过制定的rect画一个圆角矩形,当圆角X轴方向的半径等于Y轴方向的半径时,
        //且都等于r/2时,画出来的圆角矩形就是圆形
        canvas.drawRoundRect(rect, r >> 1, r >> 1, paint);
        //设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //canvas将bitmap画在backgroundBmp上
        canvas.drawBitmap(bitmap, null, rect, paint);
        //返回已经绘画好的backgroundBmp
        return backGround;
    }

首先我们通过传进去的Bitmap,得到了原图的大小,创建了一个与原图一样大小的正方形圆角bitmap,然后我们在这个正方形圆角中将传进来的bitmap,与创建的位图通过画笔的

paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_IN));  //设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉

来讲bitmap进行裁剪成一个圆角矩形的bitmap,然后再返回,

最后在onDraw方法中调用getRoundRectBitmap获取到我们的圆角矩形图片,然后再在将原有的ImageView的canvas上进行裁剪

  @Override  
    protected void onDraw(Canvas canvas) {  

        Drawable drawable = getDrawable();//得到ImageView的drawable属性
        if (null != drawable) {  
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  //获取到ImageView的bitmap
            Bitmap b = toRoundBitmap(bitmap);//获取圆角图片
            /*
            Rect src: 是对图片进行裁截,若是空null则显示整个图片
             RectF dst:是图片在Canvas画布中显示的区域,
            大于src则把src的裁截区放大,
            小于src则把src的裁截区缩小。
             */
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());  
            final Rect rectDest = new Rect(0,0,getWidth(),getHeight()   );
            paint.reset();  //重置画笔
            canvas.drawBitmap(b, rectSrc, rectDest, paint);//在原有的画布中裁剪出圆形图片
        } else {  
            super.onDraw(canvas);  
        }  
    }   

这个图片裁剪的类已经写完了,最后就是在布局中调用了

<com.example.blue.makeroundimage.MakeRoundImage
    android:src="@drawable/my_head"
    android:layout_height="80dp"
    android:layout_width="80dp"

    tools:layout_editor_absoluteY="208dp"
    tools:layout_editor_absoluteX="157dp" />

下面是运行结果 :
这里写图片描述

最近越来越浮躁了,要时刻反省自己,只要能够为了当时纯粹的梦想和感动坚持努力下去,不管其它人怎么样,我也要保持自己的本色走下去。

9
1
查看评论

Android圆形头像的绘制(三)之多人头像的实现

上篇文章Android圆形图像的绘制(二)介绍了单人圆形头像的绘制
  • DylanZhuang
  • DylanZhuang
  • 2016-07-07 19:28
  • 933

Android开发之制作圆形头像自定义View,直接引用工具类,加快开发速度。带有源代码学习

作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing/Android开发之制作圆形头像自定义View,直接引用工具类,加快开发速度。带有源代码学习大...
  • qq_21376985
  • qq_21376985
  • 2016-08-09 17:50
  • 1557

【Android开源项目分析】自定义圆形头像CircleImageView的使用和源码分析

本文分为三大部分: CircleImageView的使用 CircleImageView源码分析 Android自定义View总结 CircleImageView项目源码下载: https://github.com/hdodenhof/CircleImageView 打开源码会发现主要就是一个继...
  • zhoubin1992
  • zhoubin1992
  • 2015-08-05 03:21
  • 15918

Android 两种方式实现圆形头像

方案一:继承自ImageViewpackage com.chy.widget;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.g...
  • chy555chy
  • chy555chy
  • 2017-01-31 20:23
  • 712

Android开发圆形头像,RoundedImageView

转载请注明来源: http://blog.csdn.net/kjunchen/article/details/50573326 分分钟带你搞定Android开发圆形头像 目前在应用开发中,矩形的头像基本没有了,大多是圆形或圆角矩形,本文简简单单轻轻松松帮你搞定圆形或圆角矩形...
  • u010597493
  • u010597493
  • 2017-02-17 15:43
  • 1498

分分钟带你搞定Android开发圆形头像

分分钟带你搞定Android开发圆形头像目前在应用开发中,矩形的头像基本没有了,大多是圆形或圆角矩形,本文简简单单轻轻松松帮你搞定圆形或圆角矩形的头像。 可以自定义控件实现,而本文使用的是第三方开源控件RoundedImageView,改控件支持圆形、椭圆、圆角矩形等,使用非常方便。
  • KjunChen
  • KjunChen
  • 2016-01-24 12:33
  • 9537

Android使用 CircleImageView 实现圆形头像的方法

圆形头像看起来非常美观,下文通过实例代码给大家介绍android中使用CircleImageView实现圆形头像的方法,一起看看吧 有时我们在应用中会用到圆形头像,下面是利用CircleImageView实现圆形头像的演示,下面效果和代码,效果如图 实现起来也比较简单,先在项目中建一个cir...
  • p4885056000
  • p4885056000
  • 2016-11-09 13:43
  • 3234

精简版BitmapShader实现圆形头像和圆角方形头像

一种简单明了的圆形头像实现方式import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas...
  • u014333053
  • u014333053
  • 2017-07-21 16:27
  • 281

android 圆形头像的Demo

  • 2015-01-12 09:01
  • 2.38MB
  • 下载

CircleImageView控件(圆形头像)

关于圆形头像的项目需求还是占相当多的比重的,今天讲一讲关于android studio的圆形头像的控件CircleImageView。在布局文件中添加如下代码:<de.hdodenhof.circleimageview.CircleImageView android:id=&q...
  • as_jon
  • as_jon
  • 2016-04-21 13:57
  • 1053
    个人资料
    • 访问:112491次
    • 积分:1389
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:3篇
    • 译文:0篇
    • 评论:32条
    博客专栏
    最新评论