记一次androidd登陆页面的实现

背景

先说个事：最近我准备做个开源的博客园android客户端！符合Google最新的material design设计风格的！不知道有没有小伙伴愿意和我一起做呢？如果有愿意的，请私信我哦！！！！我还打算每天直播我们工作的进度,代码，以及BUG等！！

最近在做公司的一个项目！在登陆页面那儿有几个小知识点！虽然不是很难，但我猜想还是会有很多童鞋不会！所以我觉得我有必要写一篇博客来说明一下！下面呢我就先上一下效果动态图

看效果

1.用户头像是原形，另外周围有白色光圈！

2.用户名和密码输入框在空的时候点击登陆为抖动！

原理

1.用户头像是自定义ImageView,另外读者要注意画笔的模式，下面我先给个谷歌官方的截图

这里我就不过多介绍当设置了这些模式之后会有哪些效果，在下面的代码中我也只是说明我们要用的模式！！其他的读者自己去谷歌吧！！

2.第二个就是个简单的动画！！很简单！！

代码实现

一.我们先来看那个动画效果吧！我是直接写的xml文件 看代码：

这边我是用的移动x轴方向，动画只执行一次，另外，请读者注意一下，我设置了了个动画插值器（控制动画的变化的），我是用的cycleInterpolator这个，用来控制动画循环的

这个就是动画插值器了！！执行两次！

好了动画xml写完了,我们来看看怎么执行的？

很简单，看代码就行了！我就不过多解释了！！

二.自定义ImageView的实现

1.首先我得先确定ImageView的大小

在这里我的先对上面的代码中的MeasureSpec.getMode(int size)这个方法解释下？
这个方法是得到宽高大小模式的？他有三个返回值：



MeasureSpec.EXACTLY:这个是指当你的view的大小设置成fill_parent或者固定的大小 就是大小确定的

MeasureSpec.AT_MOST:这个是指当你的view的大小设置成wrap_parent的时候，不确定 自适应

MeasureSpec.UNSPECIFIED:这个是指当你的view的大小未指定的时候，这种情况不太可能出现 我们一般不考虑！


当我们了解这个的时候，就可以确定该view的宽高了！当MeasureSpec.EXACTLY的时候，就用设置的！当是 MeasureSpec.AT_MOST的时候，就是内部图片大小加padding值！
2.开始绘制 先看代码，在解释

首先我们得获取宽高的最小值，之后再把图片缩小/放大 到这个大小，之后就是得到圆形的图片！



我们直接看getRoundBitMap(Bitmap map,int min)方法，要传两个参数，一个原图还有大小！



首先我们得绘制一个和原图一样大小的画布之后绘制圆形在绘制图片，至此就得到了圆形图片了！另外，请读者注意下，就是在我们在画布上绘制了圆形之后，为画笔paint设置了Xfermode，对就是PorterDuff.Mode.SRC_IN！那这个是什么意思呢？还记得我们在文章开头现实的那个mode的所有类型吗？他已经很好的展示了当设置了这个写mode之后的效果！首先我得先说明下 dst是先绘制的,src是后绘制的?那现在就很好理解PorterDuff.Mode.SRC_IN这个的意思了！取dst和src的交集，但是是显示src(后绘制的)！现在，大家应该能明白我先画圆形在在绘制bitmap了吧！！


现在我们再来看ondraw()这个方法，当我们得到了圆形的bitmap之后，按理说直接绘制就行了，但是问题在于外面还有层白圈！其实很简单--就是同心圆而已，只不过半径不一样罢了。只要绘制个半径比bitmap大的圆就行啦！！！




至此，本篇文章结束！！

最后还得在说下：最近我准备做个开源的博客园android客户端！符合Google最新的material design设计风格的！不知道有没有小伙伴愿意和我一起做呢？如果有愿意的，请私信我哦！！！！我还打算每天直播我们工作的进度,代码，以及BUG等！！求联系哦！！！！！！！！