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

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

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

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

好啦,先看下本篇实现的效果图:

屡下思路,按之前仿美团外卖的动画实现思路,根据滑动监听对一个图片的缩放还是比较简单的,那又加了几行文字后该怎么办呢?上面说过,动画是整体的,所以图片和文字不能在两个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);
    }

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

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

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

Math.min(measuredWidth, measuredHeight)

表示宽高按测量宽高中的最小值计算,比如我们在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);
    }

首先图片及文字的缩放程度是根据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.画图片

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

后两个参数表示设置一个缩放点(坐标),再进行缩放时以此点为中心!

2.画文字

文字1:

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

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

文字2:

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

x仍为图片宽度,而y为图片高度-50像素(注意图片的宽高相同的),很容易理解吧!

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

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

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

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

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

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

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

ECdemo下载地址:http://download.csdn.net/detail/baiyuliang2013/9514509

时间: 2024-10-14 16:37:50

安卓仿QQ红包领取详情界面动画的相关文章

动手分析安卓仿QQ联系人列表TreeView控件

因项目需要需要用到仿QQ联系人列表的控件样式,于是网上找到一个轮子(https://github.com/TealerProg/TreeView),工作完成现在简单分析一下这个源码.   一. 需要用到的知识如下: ①安卓事件分发机制:(http://blog.csdn.net/lvxiangan/article/details/9309927  或 http://gundumw100.iteye.com/blog/1052270) ②安卓View绘制:http://blog.csdn.net/

仿QQ视频全屏界面旋转实现

// 实现效果:界面支持系统自动转屏和点击转屏 // ViewController.m // rotatoTest // Copyright © 2016年 yaoyao. All rights reserved. // 1.关闭系统自动转屏 // 2.获取设备方向,设置转屏, // 3.点击按钮,设置转屏 #import "ViewController.h" #import <UIKit/UIKit.h> #import <CoreGraphics/CoreGrap

【Android自定义View实战】之仿QQ运动步数圆弧及动画,Dylan计步中的控件StepArcView

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52936609[DylanAndroid的csdn博客] 在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的. 1.先看效果图 2.效果图分析 功能说明:黄色的代表用户设置的总计划锻炼步数,红色的代表用户当前所走的步数. 初步分析:完全自定义View重写onDraw(

Android仿小米商城商品详情界面UI,ScrollView嵌套ScrollView/WebView/ListView

最近公司没事,研究了下多嵌套滚动组件的事件分发,虽然以前也接触过,但都是拿网上的用,也是特别简单的,正好朋友也需要,就研究了下 这个Demo也不是很完善,放上来也是让各位大牛给指点一下,优化优化 使用情景: 小米商城商品详情界面,界面看似ScrollView,但当正常滚动到底部时,提示继续上拉显示更多详情,上拉后直接滚动到第二屏,第二屏是个ViewPager,ViewPager里面的各个pager有的是WebView有的是ListView,有的是ScrollView,一开始想想就特别头晕,后来理

仿QQ浏览器mac版官网主页 html+css3特效

这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载 原文地址:https://www.cnblogs.com/wwhhq/p/8280750.html

安卓开发之Kotlin和java双实现仿qq空间下拉图片拉伸

先不扯淡看今天要实现的效果: 话说使用Kotlin实现安卓功能,那我们还是要做一点准备工作,so,你得加一点插件到eclipse或android studio.然并卵,你现在还在使用eclipse开发的话我只能提供地址Kotlin Plugin for Eclipse,然后我使用的还是死丢丢. 死丢丢(android studio)集成kotlin安卓开发 要使用android studio开发kotlin的安卓app,那么你必须有开发kotlin的环境: Kotlin插件.打开Android

Android项目源码界面超级华丽的仿QQ最新版本

这是一个我们比较熟悉的一款应用,高仿专仿最新QQ应用源码,也是一个高仿QQ最新版本的项目,界面超级华丽,使用了大量的自定义控件,项目里实现了部分功能,例如WIFI-FTP(把手机变成FTP服务端,可以在WEB端管理手机文件) .字母列表索引.自定义相机等,其余大多是实现了界面,没有功能.项目比较大分析起来需要一定的安卓基础,运行项目需要Android4.0以上的系统版本,默认编译版本4.4.2编码UTF-8. 源码下载:http://code.662p.com/view/9819.html 详细

高仿QQ即时聊天软件开发系列之二登录窗口界面

继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因为我没玩过WPF所以难,因为感觉做出来之后也就那样 整体布局 整体是上下分,下面是左中右分 1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="27"><!--用于放窗口右上角关闭.最

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的"经典"指这种交互经典,非本文的代