自定义View之带边框的圆形头像

久违了,我又回来了!今天带来了简单圆形头像的绘画思路及代码,开始……

注:这里所谓的边框是外圆套内圆,一个实心的内圆,一个空心的外圆。

效果图:

自定义View之带边框的圆形头像_第1张图片

1、想要在控件中直接设置图片,形成圆形头像,就必须获取图片并进行绘画,最简单的就是继承imageView,利用getDrawable()方法获取到控件设置的的图片(注:控件中必须是src属性,否者获取不到图片)。

2、接下来我们看看需要哪些工具:

自定义View之带边框的圆形头像_第2张图片

其中 mbitmap,是从控件上获取的图片,而matrix,是矩阵,对于矩阵本人也不是很熟悉,但在这里我用到了他的缩放方法,设置圆形的头像边框的阴影,而其阴影就会根据view的size设置图片的size(注:具体的矩阵的使用要大佬们自己学习了)。这里的mwidthmRadio是根据你view的大小而变换的,strockWidth和strockColor属于自定义属性,可以在控件中设置(注:不懂自定义控件属性的猴子们,我在这里就简单的说一下,想要详细的学习,还是自学吧),

自定义View之带边框的圆形头像_第3张图片

在values文件夹在新建一个attrs文件,作为自定义属性文件集合。

3、开始写代码,初始化上述工具,画笔不要忘记打开抗锯齿,那其中如何获取属性值呢,自定义View之带边框的圆形头像_第4张图片

这就和sha似的,可以设置默认值,回收方法也就相当于提交方法,这样初始化上述工具就完成了。

4、接下来就是测量部分,设置view的大小和头像的半径。设置方法有很多,我这用的是正方形的画布,在onMeasure()方法中,取长宽值小的一个作为正方形画布的边长,其的一半作为圆形头像的半径,別忘了減去边框的宽度,这样就很饱满了,不会出现设置大小时出现偏离的现象。

5、设置画笔画出的view有阴影,最主要的就是矩阵的缩放值,要根据图片的变化而变化,so float scale=view的宽度*1.0f/图片的size,还有一个就是 着色器(bitmapShader、阴影)的两个参数x、y分别代表缩放的模式,这里是选择拉伸模式(Shader.TileMode.CLAMP),利用着色器的方法setLocalMatrix(matrix),这样就将矩阵的变化融入到了bitmapShader中,最后将画笔装上有阴影的模式即可( mpaint.setShader(bitmapShader))……

6、这样我们就有两根画笔,一根画圆,一根画边框,而画圆的笔是带有阴影的,这样东西齐全,开始着手画画了……当然画的时候别忘了边框画笔还有宽度和颜色以及一些相关需要设置。(注:  this.setLayerType(LAYER_TYPE_SOFTWARE, mstrockpaint);别忘了还有这样一句话,虽然我也不知道这是干什么的,感觉告诉我加上会更好!)



觉得还行的就点赞哦,最后老规矩……圆形边框头像源码

你可能感兴趣的:(自定义View学习)