http://blog.csdn.net/baiyuliang2013/article/details/51353788
版权声明:转载请注明出处:白玉梁的专栏http://blog.csdn.net/baiyuliang2013
为了能清楚的看到这个效果,本人不惜几次花费重金给众群叼发放红包,来查看红包领取详情界面的动画效果,QQ效果如图:
图中我们可以看到,动画处的头像和文字是一起的,即同时并且是整体,注意,是整体进行缩放的,而且是随手指移动来变换大小的,如果我们按照普通的布局方法,ImageView+TextView的方式,用安卓自带的普通动画来实现是无法完成的,那好了,只能自定义View来实现了!
自定义view需要你对view的内部绘制机制有一定的了解,比如onMeasure,MeasureSpec.EXACTLY,MeasureSpec.AT_MOST,onDraw等等吧,我就不在详细讲解了,网上的介绍的文章非常多!如果你看过我之前的一篇文章:仿美团外卖,那么本篇理解起来会更加容易!
好啦,先看下本篇实现的效果图:
屡下思路,按之前仿美团外卖的动画实现思路,根据滑动监听对一个图片的缩放还是比较简单的,那又加了几行文字后该怎么办呢?上面说过,动画是整体的,所以图片和文字不能在两个View中实现,那就只能在一个view中喽,画完图片画文字呗,嗯,就是这样!
首先,为了更容易实现效果,最顶层头像所在红色区域以及头像需设置为固定高度,而宽度则可以设置固定值或match_parent!可能你会觉得如果宽高不一样,那头像是否会变形?答案是,如果你的自定义view里测量宽高并重绘时没做一些特殊操作,那变形是必然的!
先看一组代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过onMeasure方法测量宽高后,在onSizeChanged可得到测量后的宽高值,
- 1
这句话的意思是将图片的原bitmap按测量出来的宽高重新生成一个bitmap用于重绘,而
- 1
表示宽高按测量宽高中的最小值计算,比如我们在xml中设置自定义view 的宽:android:layout_width=”200dp”, 高:android:layout_height=”80dp”,那么最终画出的图片大小为80x80dp,而整个view剩余的右侧部分就留给文字了(注意,最好将view的宽度设置为match_parent比较合适)!
再看onDraw部分代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
首先图片及文字的缩放程度是根据mCurrentProgress这个值来决定的,图片是否根据向canvas的scale方法传入缩放比例mCurrentProgress而文字是根据自己设置的画笔大小*比例值mCurrentProgress;我们整个布局的外层使用ScrollView不必再说,而mCurrentProgress则是根据监听scrollview滑动距离与头像所在区高度值相比得到的:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
其次需要注意的点:
1.画图片
- 1
后两个参数表示设置一个缩放点(坐标),再进行缩放时以此点为中心!
2.画文字
文字1:
- 1
中间两个参数表示画笔起点坐标,x为图片宽度,而y为50像素;
文字2:
- 1
x仍为图片宽度,而y为图片高度-50像素(注意图片的宽高相同的),很容易理解吧!
当手指在不停的在屏幕上移动时,就会不停的调用myView.setCurrentProgress传入progress,并调用postInvalidate()进行重绘,从而使view的大小跟随手指移动缩放!
另外,大家可能要说,如果在真实项目中,头像不可能是一张固定图片,如果动态获取,又该如何呢?其实很简单了,在自定义view的init方法中有如下代码:
- 1
因此,我们在绘制前将网络获取的图片的bitmap传进去不就可以了吗?
当然,本篇文章所使用的方法只是一个思路,肯定不是最好的,大家集思广益,多发散自己的思维,将自己的更好的实现方法分享出来,共同进步!
已知缺陷:在快速上滑或下滑离手后,view的缩放效果会出现误差,待重新触摸屏幕移动后正常。(qq界面有相似问题)
目前本人并未查找原因,小伙伴们,拿出你们的聪明才智,一起来解决问题吧!
ECdemo下载地址:http://download.csdn.net/detail/baiyuliang2013/9514509
-
顶
-
踩