高仿QQ的手机管家的小火箭加速

1、前言

相信很多人都用过腾讯的手机管家，用过这个App的人都应该知道桌面的火箭一键加速这个功能，当然这里我不是推荐大家去使用手机管家，相反这个功能大家还是小心为妙，我的U8800加完速之后快是快了，但这家伙把我手机的任务栏的进程都给搞蹦死了，去年买了个表啊。。。

吐槽不多说，来正题，最近刚好在学UI设计就去研究一下这个小火箭是怎么做出来的。先来了解一下小火箭有神马动作先，首先在没有触碰它时，就是一个电源的显示或是

一个图标依附在屏幕的两侧，点击变成小火箭，可以跟随拖动，当没有放到指定位置就在次回去屏幕两侧。当放到了指定位置就会出现一个火箭发射的动画。了解完效果，我

们继续说。

2、完成的效果图

3、简单设计过程

自定义一个View完成火箭的拖动、显示，然后拖动到指定位置后就回调一个接口播放火箭发射动画。自定义View里面的关键就是动态的改变matrix，以达到火箭移动的效果

4、核心代码

自定义View的代码

package com.spring.lettel;import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Point;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 火箭主体类 * @author wissea * */public class Rocket extends View {private Bitmap bitmap;private Bitmap rocket;//文字栏的三种状态private Bitmap[] stand = {BitmapFactory.decodeResource(getResources(),R.drawable.desktop_bg_tips_1),BitmapFactory.decodeResource(getResources(),R.drawable.desktop_bg_tips_2),BitmapFactory.decodeResource(getResources(),R.drawable.desktop_bg_tips_3) };private Matrix matrix = new Matrix();private Paint paint = new Paint();// 是否触摸private boolean isTouch = false;private Point point = new Point();private LocationChangeListener changeListener=null;//记录屏幕的大小private int screenW;private int screenH;//灰机和提示是否重合了private boolean isFly = false;public Rocket(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public Rocket(Context context, AttributeSet attrs) {super(context, attrs);bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.floating_desktop_bg_danger);rocket = BitmapFactory.decodeResource(getResources(),R.drawable.desktop_rocket_launch_1);screenW = ((Activity) context).getWindowManager().getDefaultDisplay().getWidth();screenH = ((Activity) context).getWindowManager().getDefaultDisplay().getHeight();}public Rocket(Context context) {super(context);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//判断Touchif (!isTouch) {matrix.reset();if (isFly) {if(changeListener!=null)changeListener.onchange();} else {if (point.x < screenW / 2) {matrix.postTranslate(0, point.y);} else {matrix.postTranslate(screenW - bitmap.getWidth(), point.y);}canvas.drawBitmap(bitmap, matrix, paint);}} else {matrix.reset();int c = point.x % 2;matrix.postTranslate(screenW / 2 - stand[c].getWidth() / 2, screenH- stand[c].getHeight() - 100);//判断重合if (Math.abs(screenW / 2 - (point.x - rocket.getWidth()/2)) < stand[c].getWidth() / 2&& Math.abs(screenH - stand[c].getHeight() - 100- (point.y - rocket.getHeight())) < stand[c].getHeight()) {canvas.drawBitmap(stand[2], matrix, paint);isFly = true;} else {isFly=false;canvas.drawBitmap(stand[c], matrix, paint);}matrix.reset();matrix.postTranslate(point.x - rocket.getWidth()/2,point.y - rocket.getHeight());canvas.drawBitmap(rocket, matrix, paint);}}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN://过滤无效点击if ((event.getX() < screenW - bitmap.getWidth() && event.getX() > bitmap.getWidth())|| Math.abs(point.y - event.getY()) > bitmap.getHeight()) {return false;}isTouch = true;break;case MotionEvent.ACTION_MOVE://更新坐标point.x = (int) event.getX();point.y = (int) event.getY();break;case MotionEvent.ACTION_CANCEL:isTouch = false;break;case MotionEvent.ACTION_UP:isTouch = false;break;}invalidate();return true;}//重置状态public void reset(){isFly=false;point.y=screenH/2;invalidate();}//监听重合public void setOnChangeListener(LocationChangeListener changeListener){this.changeListener=changeListener;}}

这个UI制作的时候老是纠结于，在View里面播放动画，找了老半天没有找到解决方法，最后就把动画放到了外面回调一下，虽然大体的效果出来了，但个人觉得还是有

不完善的地方，比如发射动画不是很平滑，没有加入电量显示，没有控制边界，小火箭拉到屏幕外后就看不到控制的小圆点了。最后欢迎大家的讨论，和指点。

项目源码

5楼weidi1989前天 16:20

求一个gif截图工具，谢谢！nway.ping.li@gmail.com

Re: hxc2008q昨天 17:49

回复weidi1989n这个还真没有，纯手工打造

4楼u011908543前天 11:53

http://pp.163.com/sfzyfd/pp/10771140.htmlnhttp://pp.163.com/sfzyfd/pp/10771141.htmlnhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474759220nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474788840nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474788836nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474798601nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474798600nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474808629nhttp://photo.163.com/2907819113@qq.com/#m=2&aid=257662720&pid=8474768975nhttp://t.163.com/event/info/eventId/-5955234399273042569nhttp://zhan.renren.com/lysfzy?gid=3602888498042794817nhttp://www.docin.com/p-695529349.htmlnhttp://ishare.iask.sina.com.cn/f/61219729.htmlnhttp://t.home.news.cn/interview/lysfzy

3楼suannai0314前天 11:36

您的文章已被推荐到博客首页和个人页侧边栏推荐文章，感谢您的分享。

2楼Perley3天前 13:35

工程可以运行，效果还不错，顶一个！nPS：楼主可以去腾讯面试了

Re: hxc2008q前天 10:46

回复Perleyn哎，去年腾讯的笔试题都没有趟过去

1楼qq5231152374天前 17:42

我敲代码的时候也老是纠结怎么设计类，感觉时mvc没弄熟悉。

Re: hxc2008q4天前 18:11

回复qq523115237n个人觉得熟能生巧吧，写多了一点，总结一下，就不纠结了

Re: qq5231152373天前 12:15

回复hxc2008qn嗯，大学的时候主要是写短代码没涉及到这些，现在多写点就习惯了。n楼主不用回复了，免得我心里觉得不回复你过意不去。就永远都终止不了了。