仿钉钉群聊头像的实现

今天是七月份的上海在周末难得的无雨天气,小编原本计划继续去周边游的。怎奈何,上海地表体感温度直接飙到37度左右,太热了。与其去被烤,还不如宅在家,看看直播看看博客来的直接来的凉爽。说起博客我早就想写篇处女作呢,可惜计划的永远赶不上变化。每每都被推迟了,所幸今天不出门干脆写篇博客得了。是的,就这样我开始了我们本篇博客的主题。钉钉群聊头像的实现~~~~


虽然可以实现的方法有多种,在这里小博只简单介绍下我的实现思路和方法:

仿钉钉群聊头像的实现_第1张图片
0

首先根据钉钉群聊头像的功能我们不难发现,当我们拉多好友进行聊天时,群聊的头像会从原来默认的一张圆形图片会变成跟随聊天人数变化的而改变图片的个数和状态,1.当群聊有两人时,每人的图片都会在原来图片的半圆里;2.当群聊变成三人时,此时的图片就分成半圆和两个四分之一圆组合起来的圆形图片效果;3.当群聊人数大于等于四时,默认取前四人的头像分配在圆的四分之一的位置;这些首先是我们直观上的感受,现在我们来看看我实现的效果吧。

1.就一人:


仿钉钉群聊头像的实现_第2张图片
1

2.两个人时:


仿钉钉群聊头像的实现_第3张图片
2

3.三个人时:


仿钉钉群聊头像的实现_第4张图片
3

4.多于或等于四个人的时候:


仿钉钉群聊头像的实现_第5张图片
4

以上是我实现后的效果,前几天因为朋友着急下班回家帮朋友作了个,虽然还有很多的地方需要完善,但是也是可以分享下。接受指导,共同学习,共同进步~~

好了,撸代码吧~

1.首先自定义ViewGroup,主要便是重写onLayout方法;再根据子View的个数更新布局状态同时改变子View的高度和宽度,具体代码如下:


仿钉钉群聊头像的实现_第6张图片
5

2.自定义ImagView实现圆形,半圆形和四分之一圆形各种形态的变化

具体代码于下:

仿钉钉群聊头像的实现_第7张图片

对以上的两个自定义应该是挺原始的,理解起来应该挺简单的。

着重关注一个Android图像辅助功能类-Xfermode,这家伙我第一次接触时着实被他坑了一把。主要是功能确实强大,使用起来还是挺模糊,具体查看博客:http://407827531.iteye.com/blog/1470519,该博客具体介绍了他的几种运行的机制和几种Mode的类型;具体的使用方法等等~

总结:小编第一次写博客,带着忐忑心情写了这篇博客。原本想把它写的更好些,写的更具体些,但是联想到自己看博客的习惯,一般都是先看效果再看代码,几乎不看博主说了什么,所以小编废话不多说直接上效果图和主类代码,不知不觉写了三小时了;好了是时候带着遗憾淡淡的收尾本篇博客的撰写,只希望下次的文章能给兄弟们带来更清晰的思路和更简洁的代码,感谢大家的支持 ~ 如果说的不对的地方还请大牛们指出,接受改善~ 如果有更好的方法和实现思路的欢迎大家一起交流~~~非常感谢大家! 稍后贴上demo分享地址~~

你可能感兴趣的:(仿钉钉群聊头像的实现)