安卓仿QQ红包领取详情界面动画

Bertha 。 2022-06-05 08:27 208阅读 0赞

[http://blog.csdn.net/baiyuliang2013/article/details/51353788][http_blog.csdn.net_baiyuliang2013_article_details_51353788]

为了能清楚的看到这个效果，本人不惜几次花费重金给众群叼发放红包，来查看红包领取详情界面的动画效果，QQ效果如图：

![这里写图片描述][20160509145633037]

图中我们可以看到，动画处的头像和文字是一起的，即同时并且是整体，注意，是整体进行缩放的，而且是随手指移动来变换大小的，如果我们按照普通的布局方法，ImageView+TextView的方式，用安卓自带的普通动画来实现是无法完成的，那好了，只能自定义View来实现了！

自定义view需要你对view的内部绘制机制有一定的了解，比如onMeasure，MeasureSpec.EXACTLY，MeasureSpec.AT\_MOST，onDraw等等吧，我就不在详细讲解了，网上的介绍的文章非常多！如果你看过我之前的一篇文章：[仿美团外卖][Link 1]，那么本篇理解起来会更加容易！

好啦，先看下本篇实现的效果图：

![这里写图片描述][20160509150619791]

屡下思路，按之前仿美团外卖的动画实现思路，根据滑动监听对一个图片的缩放还是比较简单的，那又加了几行文字后该怎么办呢？上面说过，动画是整体的，所以图片和文字不能在两个View中实现，那就只能在一个view中喽，画完图片画文字呗，嗯，就是这样！

首先，为了更容易实现效果，最顶层头像所在红色区域以及头像需设置为固定高度，而宽度则可以设置固定值或match\_parent！可能你会觉得如果宽高不一样，那头像是否会变形？答案是，如果你的自定义view里测量宽高并重绘时没做一些特殊操作，那变形是必然的！

先看一组代码：

@Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            measuredWidth = w;
            measuredHeight = h;
            //将bitmap按测量宽高设置，Math.min(measuredWidth, measuredHeight)取宽高最小值
            scalebitmap = Bitmap.createScaledBitmap(bitmap,Math.min(measuredWidth, measuredHeight),Math.min(measuredWidth, measuredHeight),true);
        }
       
        
         1 
         2 
         3 
         4 
         5 
         6 
         7 
         8

通过onMeasure方法测量宽高后，在onSizeChanged可得到测量后的宽高值，

scalebitmap = Bitmap.createScaledBitmap(bitmap,Math.min(measuredWidth, measuredHeight),Math.min(measuredWidth, measuredHeight),true);
       
        
         1

这句话的意思是将图片的原bitmap按测量出来的宽高重新生成一个bitmap用于重绘，而

Math.min(measuredWidth, measuredHeight)
       
        
         1

表示宽高按测量宽高中的最小值计算，比如我们在xml中设置自定义view 的宽：android:layout\_width=”200dp”, 高：android:layout\_height=”80dp”，那么最终画出的图片大小为80x80dp，而整个view剩余的右侧部分就留给文字了（注意，最好将view的宽度设置为match\_parent比较合适）！

再看onDraw部分代码：

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //画图片
            canvas.scale(mCurrentProgress, mCurrentProgress,0, measuredHeight);
            canvas.drawBitmap(scalebitmap, 0, 0, mPaint);
    
            //Math.min(measuredWidth, measuredHeight)图片宽高
    
            //画文字1，起始坐标  x：为图片宽度   y：50
            mPaintText1.setTextSize(sizeText1*mCurrentProgress);
            canvas.drawText(text1, Math.min(measuredWidth, measuredHeight), 50, mPaintText1);
            //画文字2，起始坐标  x：为图片宽度   y：图片高度-50
            mPaintText2.setTextSize(sizeText2*mCurrentProgress);
            canvas.drawText(text2, Math.min(measuredWidth, measuredHeight), Math.min(measuredWidth, measuredHeight)-50, mPaintText2);
        }
       
        
         1 
         2 
         3 
         4 
         5 
         6 
         7 
         8 
         9 
         10 
         11 
         12 
         13 
         14 
         15 
         16

首先图片及文字的缩放程度是根据mCurrentProgress这个值来决定的，图片是否根据向canvas的scale方法传入缩放比例mCurrentProgress而文字是根据自己设置的画笔大小\*比例值mCurrentProgress；我们整个布局的外层使用ScrollView不必再说，而mCurrentProgress则是根据监听scrollview滑动距离与头像所在区高度值相比得到的：

myScrollView.setScrollViewListener(new ScrollViewListener() {
                @Override
                public void onScrollChanged(MyScrollView scrollView, int x, int y,int oldx, int oldy) {
                    //1.0f相当于一个缩放系数，越大随手指缩放敏感度越低
                    if(y>0&&y<=height){
                        myView.setCurrentProgress(1-(float)(y*1.0f)/(float)height);
                        myView.postInvalidate();
                    }
                }
            });
       
        
         1 
         2 
         3 
         4 
         5 
         6 
         7 
         8 
         9 
         10

其次需要注意的点：

1.画图片

canvas.scale(mCurrentProgress, mCurrentProgress,0, measuredHeight);
       
        
         1

后两个参数表示设置一个缩放点（坐标），再进行缩放时以此点为中心！

2.画文字

文字1：

canvas.drawText(text1, Math.min(measuredWidth, measuredHeight), 50, mPaintText1);
       
        
         1

中间两个参数表示画笔起点坐标，x为图片宽度，而y为50像素；

文字2：

canvas.drawText(text2, Math.min(measuredWidth, measuredHeight), Math.min(measuredWidth, measuredHeight)-50, mPaintText2);
       
        
         1

x仍为图片宽度，而y为图片高度-50像素（注意图片的宽高相同的），很容易理解吧！

当手指在不停的在屏幕上移动时，就会不停的调用myView.setCurrentProgress传入progress，并调用postInvalidate()进行重绘，从而使view的大小跟随手指移动缩放！

另外，大家可能要说，如果在真实项目中，头像不可能是一张固定图片，如果动态获取，又该如何呢？其实很简单了，在自定义view的init方法中有如下代码：

bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.head);
       
        
         1

因此，我们在绘制前将网络获取的图片的bitmap传进去不就可以了吗？

当然，本篇文章所使用的方法只是一个思路，肯定不是最好的，大家集思广益，多发散自己的思维，将自己的更好的实现方法分享出来，共同进步！

已知缺陷：在快速上滑或下滑离手后，view的缩放效果会出现误差，待重新触摸屏幕移动后正常。（qq界面有相似问题）

目前本人并未查找原因，小伙伴们，拿出你们的聪明才智，一起来解决问题吧！

ECdemo下载地址：[http://download.csdn.net/detail/baiyuliang2013/9514509][http_download.csdn.net_detail_baiyuliang2013_9514509]

顶

踩

*  上一篇[安卓实现高斯模糊][Link 2]
 *  下一篇[开源项目——小Q聊天机器人V1.0][Q_V1.0]

[http_blog.csdn.net_baiyuliang2013_article_details_51353788]: http://blog.csdn.net/baiyuliang2013/article/details/51353788
[20160509145633037]: /images/20220605/321891868ca04650930f4123023f1143.png
[Link 1]: http://blog.csdn.net/baiyuliang2013/article/details/50253135
[20160509150619791]: /images/20220605/e20cb36e72534b3bb77aea847e86232a.png
[http_download.csdn.net_detail_baiyuliang2013_9514509]: http://download.csdn.net/detail/baiyuliang2013/9514509
[Link 2]: http://blog.csdn.net/baiyuliang2013/article/details/51333582
[Q_V1.0]: http://blog.csdn.net/baiyuliang2013/article/details/51386281