Android自定义控件(五)——圆形头像最简单的实现方式

举报
择城终老 发表于 2021/07/27 00:24:26 2021/07/27
【摘要】 圆形头像最简单的实现方式 着色器着色器函数实现圆形头像绘图实现XML代码如下 着色器 今天将接着上一节的内容,讲解着色器Shader更多的用法,不知道大家关注过其他的圆形头像实现方式没有,是不是都有一个共同点,那就是代码非常的长,而博主今天实现的方式,只需要自己写13行代码就可以实现。 着色器函数 经过上一篇的讲解,我们都知道,着色器...


圆形头像实现截图

着色器

今天将接着上一节的内容,讲解着色器Shader更多的用法,不知道大家关注过其他的圆形头像实现方式没有,是不是都有一个共同点,那就是代码非常的长,而博主今天实现的方式,只需要自己写13行代码就可以实现。

着色器函数

经过上一篇的讲解,我们都知道,着色器Shader是一个基类,那么它其实也是有两个函数的,分别是:

setLocalMatrix(Matrix localM)
getLocalMatrix(Matrix localM)

  
 
  • 1
  • 2

这两个函数是用来设置坐标变换矩阵,比如你可以进行缩放,平移变换等等等等,可以说非常的方便快捷。

实现圆形头像

我们的实现方法,也就用到上面两个函数,所以我们可以直接使用起来,这样看起来也更加的形象,方便于理解,首先,我们自定义一个View:

/***
 * 原型头像自定义控件
 */
public class CircleHeadView extends View { private Paint paint;//画笔 private Bitmap bitmap;//图片 private BitmapShader bitmapShader;//图片着色器 public CircleHeadView(Context context) { super(context); } public CircleHeadView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.paint=new Paint();//初始化画笔工具 this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.head_img);//获取头像图片 this.bitmapShader=new BitmapShader(this.bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//设置着色器为边缘填充 } public CircleHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里我们初始化了一个图片着色器BitmapShader,X,Y轴填充模式都是TileMode.CLAMP,虽然没什么用,但参数还是不能少的。

绘图实现

绘图是最关键的地方,我们来理清一下思路,要怎么才能显示圆形头像呢?

首先,因为要用到上面两个函数,所以肯定会要运用矩阵运算工具Matrix类,假如我们的图片很大,或者很小,而我要设置的头像为屏幕宽度,应该怎么做?先来看下代码:

Matrix matrix=new Matrix();
float scale=(float)getWidth()/this.bitmap.getWidth();
matrix.setScale(scale,scale);

  
 
  • 1
  • 2
  • 3

因为不管图片大小,我们都需要它显示在整个头像之中,所以必须缩放到控件大小宽度,又因为它是个圆形,必须缩放成一个正方形,所以X,Y轴缩放大小一样。接着我们来看整体的OnDraw()实现:

protected void onDraw(Canvas canvas) { super.onDraw(canvas); Matrix matrix=new Matrix();//初始化矩阵运算类 float scale=(float)getWidth()/this.bitmap.getWidth();//获取图片要缩放的比例 matrix.setScale(scale,scale);//设置缩放 this.bitmapShader.setLocalMatrix(matrix);//设置变换矩阵 this.paint.setShader(this.bitmapShader);//画笔设置着色器 float half=(float) getWidth()/2;//获取圆心位置 canvas.drawCircle(half,half,half,this.paint);//画出头像
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

注释其实很详细,不过,还是解释一下,因为我们的头像宽度为整个屏幕match_parent,所以圆心坐标的横坐标肯定是宽度的一半,又因为它是个正方形,纵坐标也应该和横坐标一样,所以相同,半径同样是整个屏幕的一半,所以最后的一行代码三个参数都是half。

XML代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.liyuanjinglyj.circleheadapplication.CircleHeadView android:layout_width="match_parent" android:layout_height="wrap_content"/>

</LinearLayout>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Github下载地址:点击下载

文章来源: liyuanjinglyj.blog.csdn.net,作者:李元静,版权归原作者所有,如需转载,请联系作者。

原文链接:liyuanjinglyj.blog.csdn.net/article/details/103107352

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200