猎豹快切App中用到的Android开发技巧探索[附源码]
本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发
原文链接：http://blog.csdn.net/u013045971/article/details/52119117
前景提要：
什么是块切？
快切是从猎豹的Clear Master中分离出来的一个悬浮窗小工具。因为对这个比较感兴趣，博主断断续续花了2个月时间完成了一个类似块切的版本，起了个名字叫“Well Swipe”，中文名叫“Well 划划”。本文会针对Well 划划开发中遇到的一些坑和和技巧做一个分享。来给大家揭密块切开发过程中用到的自定义控件技术细节。在这里还有一个叫“单手划划”的app不得不说，也做的很好。
块切长啥样子？
酷安下载地址：http://www.coolapk.com/apk/com.well.swipe
效果图:http://blog.csdn.net/u013045971/article/details/50217903
Well 划划的gif效果图：https://github.com/gumingwei/WellSwipe/blob/master/app/wellswipe5.gif
问题：
- 如何触发菜单
- 如何通过手势控制菜单的旋转，打开，关闭
- 旋转的过程中如何做到item循环展示
- 拖动item效果
- 拖动item时的排序效果
- item的过渡动画（删除一个item之后，剩余的item会自动平移到目标位置。拖动排序时item自动平移到排序之后的位置）
- 控件之间如何交互（旋转菜单的时候指示器跟着转，拖动的时候角落菜单变化状态，拖动到垃圾箱）
- 重写的onItemClick，onItemLongClick事件
打开：打开这个手势在底部L型的触发区域进行。设计的时候分左右。所以写的时候也要分左右，当手指划过一定距离之后就开始打开菜单，手指这个时候还没停，手指继续滑动的时候计算一个0－1的值用来控制菜单从小到大展开的效果。我设计了这样的一个接口，把需要的scale值回传到菜单view来使用
/*** Created by mingwei on 3/12/16.*** 微博： 明伟小学生(http://weibo.com/u/2382477985)* Github: https://github.com/gumingwei* CSDN: http://blog.csdn.net/u013045971* QQ&WX： 721881283***/
public interface OnScaleChangeListener {/*** 当scale发生变化的时候回传这个值* <p/>* 1.用于在手指拖动时: CatchView.OnEdgeSlidingListener* 2.松开手指时自动打开和关闭的过程中: AngleLayout.OnOffListener* 3.点击Back键关闭动画的过程中* <改变背景SwipeBackgroundLayout的透明度>** @param scale*/void change(float scale);
}public interface OnEdgeSlidingListener extends OnScaleChangeListener {/*** 打开*/void openLeft();//左边打开void openRight();//右边打开/*** true速度满足自动打开* false速度不满足根据抬手时的状态来判断是否打开* @param view* @param flag*/void cancel(View view, boolean flag);}滑动的过程中持续不断的回传一个scale值。
@Override
public void change(float scale) {if (mSwipeLayout.hasView()) {if (mSwipeLayout.isSwipeOff()) {mSwipeLayout.getAngleLayout().setAngleLayoutScale(scale);mSwipeLayout.setSwipeBackgroundViewAlpha(scale);}}
}旋转：菜单打开之后，介个时候，手指在菜单的父容器中滑动，回传一个角度值，角度值通过三角函数就可以获得到，菜单跟着旋转。旋转的处理要考虑菜单的打开方式是左边还是右边。后面还加了一个功能，手指往角落方向滑动时关闭菜单，所以还要处理华东时的角度问题。在滑动的过程中回传角度值angle来旋转菜单，松开手指后自动转到目标角度。
public interface OnAngleChangeListener {/*** 角度发生变化时传递当前的所显示的数据索引值&当前的百分比* 用于改变Indicator的选中状态，百分比则用来渲染过渡效果** @param cur 正在显示的是数据index* @param p 百分比*/void onAngleChanged(int cur, float p);}回传的角度用来旋转菜单
@Override
public void onAngleChanged(int cur, float p) {mIndicator.onAngleChanged2(cur, p);mIndicatorTheme.changeStartAngle(cur, p);
}关闭：关闭有点击菜单外时，点击角落X时，往角落滑动手指时分别都可以关闭菜单
1).点击角落XX按钮域时
@Overridepublic void cornerEvent() {if (mEditState == STATE_EDIT) {setEditState(AngleLayout.STATE_NORMAL);return;}if (mEditState == STATE_NORMAL) {off();//点击外部空白区域的时候关闭}}2).点击外部区域
if (mAngleView.isLeft()) {float upDistance = (float) Math.sqrt(Math.pow((upX - 0), 2) + Math.pow((upY - mHeight), 2));if (Math.abs(upX - mLastMotionX) < 8 && Math.abs(upY - mLastMotionY) < 8 &&(upTime - mLastTime) < 200 && (upDistance > mAngleView.getMeasuredHeight())) {if (mEditState == STATE_EDIT) {setEditState(AngleLayout.STATE_NORMAL);} else {off();}}} else if (mAngleView.isRight()) {float upDistance = (float) Math.sqrt(Math.pow((upX - mWidth), 2) + Math.pow((upY - mHeight), 2));if (Math.abs(upX - mLastMotionX) < 8 && Math.abs(upY - mLastMotionY) < 8 &&(upTime - mLastTime) < 200 && (upDistance > mAngleView.getMeasuredHeight())) {if (mEditState == STATE_EDIT) {setEditState(AngleLayout.STATE_NORMAL);} else {off();}}}3).快速滑动结束后
if (MOVE_TYPE == TYPE_OFF && upTime - mLastTime < 400) {off();
}3.旋转的过程中如何做到item循环展示
如何做好循环展示？很简单，每次转90度之后刷新界面，把item重新排序。如初始值是1 2 3
第一次旋转后 2 3 1
第二次旋转后 3 1 2
第三次旋转后 1 2 3 这时又回到了原位，每四次是一个循环，这样规律久很容易总结出来了。
当前的数据索引index
/*** 根据index获取当先index所需要的数据索引* 比如: 11->1,10->2,9->0,8->1,7->2,6->0 像这样一直循环** @param index 转动结束后根据BaseAngle的值除以90得出的范围0-11* 3,4的最小公倍数的是12* @return*/private int getViewsIndex(int index) {return (COUNT_12 - index) % COUNT_3;}上一组的索引
/*** 上一个数据索引** @param index 传入的是getViews()的返回值* @return*/public int getPreViewsIndex(int index) {return index == 0 ? 2 : (index - 1);}下一组索引
/*** 下一个数据索引** @param index 传入的是getViews()的返回值* @return*/public int getNextViewsIndex(int index) {return index == 2 ? 0 : (index + 1);}求出因该取那一组数据之后，还要求出哪个限象，即，把第X组数据放在第Y限象。然后一只重复起来就造成了循环的感觉
当前限象currentQua
/*** 根据当前的index获取当前显示限象index* 比如11->1,10->2,9->3,8->0** @param index 转动结束后根据BaseAngle的值除以90得出的范围0-11* 3,4的最小公倍数的是12* @return*/public int getQuaIndex(int index) {return index == 0 ? 0 : (COUNT_12 - index) % COUNT_4;}上一个限象preQua
/*** 获取当前index的上一个index** @param index 传入的是getIndex()的返回值* @return 得到上一个index*/public int getPreQuaIndex(int index) {return index == 0 ? COUNT_3 : (index - 1);}下一个限象nextQua
/*** 获取当前index的下一个index** @param index 传入的是getIndex()的返回值* @return 得到下一个index*/private int getNextQuaIndex(int index) {return index == COUNT_3 ? 0 : (index + 1);}最后拿求得的数据喝限象来布局item
布局子item的位置
/*** 布局子控件* 通过一个当前值，计算上一个，下一个值** @param index*/private void itemLayout(int index) {mCurrentIndex = getRealIndex(index);itemLayout(mMap.get(getPreViewsIndex(getViewsIndex(index))), getPreQuaIndex(getQuaIndex(index)));//上一组itemLayout(mMap.get(getViewsIndex(index)), getQuaIndex(index));//当前组itemLayout(mMap.get(getNextViewsIndex(getViewsIndex(index))), getNextQuaIndex(getQuaIndex(index)));//下一组}4.拖动item效果
拖动Item这个其实也没啥难的，就是长按的时候根据按下的位置和item布局的时候求得位置来得到一个Item的对象，拿到item的数据，在父容器中创建一个view跟着手指移动就可以了。有人就问了，直接onItemLongClick不就可以了，为啥还要求啊，这个还真是要求的，控件角度发生变化后的onClick，onItem等事件触发是有问题的，因为画布发生了变化，点击能找到子Item，但是找的不对，item已经转走了，事件还可以触发，这样就不合适了不是，所以我们要重写一系列事件。
拖拽的时候传递item的数据信息，包括视图view，坐标信息，offsetLeft,offsetTop
public interface OnEditModeChangeListener {/*** 进入编辑模式** @param view*/void onEnterEditMode(View view);/*** 退出编辑模式*/void onExitEditMode();/*** 进入拖拽模式** @param view 判定进行拖拽的当前view* @param left 在父控件中的left值* @param top 在父控件中的top值* @param offsetLeft 触摸点在当前进行拖拽的view的left距离* @param offsetTop 触摸点在当前进行拖拽的view的top距离*/void onStartDrag(AngleItemCommon view, float left, float top, float offsetLeft, float offsetTop);/*** 拖拽取消*/void onCancelDrag();}拖拽结束的时候调用
public interface OnItemDragListener {/*** 拖拽结束时调用** @param index 返回当前的数据索引index*/void onDragEnd(int index);}5.拖动item时的排序效果
6.item的过渡动画（删除一个item之后，剩余的item会自动平移到目标位置。拖动排序时item自动平移到排序之后的位置）
5和6可以放在一起说，不管是删除还是排序，基本上就是数据发生变化之后再做视图View变换效果的过程，计算位置的算法即全面已经写好的，在这里取掉限象的计算就可以使用了。
例如：123456 这几个数据初始化完成之后会有一个自身的位置。然后把位置信息保存在一个list中。
比如现在删除掉3，就剩下12456，这时候快速的用位置计算算法再算出只有5个item时的新的一个位置信息list，计算完成后遍历12456，遍历平移对应的位置信息（这里用属性动画就可以），位置没有发生变化的就不会动，位置信息变化的就有平移效果。
位置平移在排序和删除的时候的应用时一样的。
平移动画
/*** 移除item之后的过渡动画* 从原始坐标移动到新坐标** @param resource 移除控件之后计算产生的新的item坐标* @param targetView 原始坐标*/public void transAnimator(final ArrayList<Coordinate> resource, final ArrayList<AngleItemCommon> targetView) {ValueAnimator translation = ValueAnimator.ofFloat(0f, 1f);translation.setDuration(250);translation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float values = (float) animation.getAnimatedValue();for (int i = 0; i < targetView.size(); i++) {float x = (float) (resource.get(i).x - targetView.get(i).getParentX()) * values;float y = (float) (resource.get(i).y - targetView.get(i).getParentY()) * values;targetView.get(i).setTranslationX(x);targetView.get(i).setTranslationY(y);requestLayout();}}});translation.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {for (int i = 0; i < targetView.size(); i++) {targetView.get(i).setTranslationX(0);targetView.get(i).setTranslationY(0);}getData().remove(mTargetItem);/*** 判断最后一个Item，也就是只剩加号的时候退出编辑状态*/if (getData().size() == 1) {mOnEditModeChangeListener.onExitEditMode();}isRemoveFinish = true;}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});translation.start();}交换动画
/*** 交换动画** @param resource 源坐标，也就是动画的起始坐标* @param targetView 目标坐标，也就是动画的终点坐标* @param index 当前view交换之后的目标位置的index索引，主要用来屏蔽动画，因为松手之后有动画，不需要这这里再加动画了*/public void exchangeAnimator(final Coordinate resource, final ArrayList<AngleItemCommon> targetView, final int index) {ValueAnimator translation = ValueAnimator.ofFloat(0f, 1f);translation.setDuration(250);translation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float values = (float) animation.getAnimatedValue();float x = (float) (resource.x - targetView.get(index).getParentX()) * values;float y = (float) (resource.y - targetView.get(index).getParentY()) * values;targetView.get(index).setTranslationX(x);targetView.get(index).setTranslationY(y);requestLayout();}});translation.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {for (int i = 0; i < targetView.size(); i++) {targetView.get(i).setTranslationX(0);targetView.get(i).setTranslationY(0);}putData(targetView);isExChangeFinish = true;}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});translation.start();}7.控件之间如何交互
AngleView 菜单 （关键代码近2000行）
AngleLayout 菜单容器
AngleViewTheme 菜单主题
AngleIndicatorView 菜单指示器
AnglrIndicatorTheme 菜单指示器主题
CornerView 角落控制按钮
CornerThemeView 角落控制按钮主题
LoadingView 进度条
各个控件都定义了接口和其他接口进行值的传递和交互
<?xml version="1.0" encoding="utf-8"?>
<com.well.swipe.view.AngleLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/anglelayout"android:layout_width="match_parent"android:layout_height="match_parent"><com.well.swipe.view.AngleViewThemeandroid:id="@id/angleview_theme"android:layout_width="@dimen/angleview_size"android:layout_height="@dimen/angleview_size" /><com.well.swipe.view.AngleIndicatorViewThemeandroid:id="@id/indicator_theme"android:layout_width="@dimen/angleindicator_theme_size"android:layout_height="@dimen/angleindicator_theme_size" /><com.well.swipe.view.AngleIndicatorViewandroid:id="@id/indicator"android:layout_width="@dimen/angleindicator_size"android:layout_height="@dimen/angleindicator_size" /><com.well.swipe.view.AngleViewandroid:id="@id/angleview"android:layout_width="@dimen/angleview_size"android:layout_height="@dimen/angleview_size" /><com.well.swipe.view.CornerThemeViewandroid:id="@+id/corner_theme"android:layout_width="@dimen/anglelogo_size"android:layout_height="@dimen/anglelogo_size" /><com.well.swipe.view.CornerViewandroid:id="@+id/corner_view"android:layout_width="@dimen/anglelogo_size"android:layout_height="@dimen/anglelogo_size" /><com.well.swipe.view.LoadingView xmlns:loading="http://schemas.android.com/apk/res-auto"android:id="@+id/recent_loading"android:layout_width="20dp"android:layout_height="20dp"android:padding="10dp"loading:inner_color="@color/preference_title_enable_color"loading:inner_rotating_speed="5"loading:inner_width="2dip"loading:outer_color="@color/check_item_enable"loading:outer_width="2dip"/></com.well.swipe.view.AngleLayout>8.重写的onItemClick，onItemLongClick事件
为什么要重写onClick,onItemClick,onItemLongClick呢？原生的好好的为什么不用？
这个问题其实前面已经给出了答案，当控件的画布发生变化之后，这些“on事件”是可以触发的，但是看不到实际的item控件，因为这些控件已经跟着画布转走了，再使用肯定不是办法，所以要重写，重写的时候根据子item布局时候的位置加上onTouch的位置信息即可计算出来点击的是哪个item。所以自定义这些"on事件"也不是什么难事。
如果你还想进一步了解Well划划的更多代码细节，请移步到Github，上面有完整的源码 源码链接。
如何支持开发者？
可以这样->进入酷安或者Play下载安装，送上5星好评
酷安：http://www.coolapk.com/apk/com.well.swipe
Play：https://play.google.com/store/apps/details?id=com.well.swipe&hl=zh
也可以这样->如果觉得该文章还不错的话，回复我，我看你有多帅。:)
关于我：
/** * Created by mingwei on 2/25/16. * * 微博： 明伟小学生(http://weibo.com/u/2382477985) * Github: https://github.com/gumingwei * CSDN: http://blog.csdn.net/u013045971 * QQ&WX： 721881283 * */
猎豹快切App中用到的Android开发技巧探索[附源码]相关推荐
- linux 浏览器源码下载,Android开发：图片浏览器源码
Android 图片浏览器源码,是你学习Android很好的例子,希望对你的学习有帮助. main.xml android:layout_width="fill_parent" a ...
- Android富文本编辑器附源码
Android富文本编辑器附源码 1,源码分析 本软件是Android端创建富文本数据,向服务器发送;安卓端创建数据可以是文字,图片,语音,文件,还可以录音,可以拍照.录音完毕保存的时候应该提交给服务 ...
- 简单实现 Android M 指纹识别(附源码)
众所周知, Android阵营里的指纹兼容真可谓是一团糟, 每个厂家几乎都有一套自己的API, 直到Android M的出现, 才慢慢地走上正途. 那么今天我们就一起来探讨一下, Android M里 ...
- scrapy爬虫之爬取百度手机助手app信息并保存至mongodb数据库（附源码）
声明: 本文内容仅供学习python爬虫的同学用作学习参考!!! 如有错误,请评论指出,非常感谢!!! 1.使用环境 python 3.8 scrapy 2.5 mongodb pycharm ...
- Android开发之android与JS互调 | Android与H5互调(附源码)
我们先看下JS代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- android分贝仪界面,android声音检测仪---分贝仪 (附源码)
android声音检测仪---分贝仪 文章出处:大黑个人博客--android声音检测仪---分贝仪 源码下载地址:https://github.com/halibobo/SoundMeter 背景 ...
- Android 图片裁剪 （附源码）
Android 图片裁剪 前言 正文 一.创建并配置项目 二.权限申请 三.获取图片Uri 四.图片裁剪 五.源码 尾声 运行效果图 前言 图片裁剪是对图片进行区域选定,然后裁剪选定的区域,形成一 ...
- ubuntu配置android开发环境和编译源码遇到的一些问题
---------------------------------------------环境变量设置--------------------------------------------- 1.设 ...
- 【数据分析与可视化】使用pyecharts对App下载量数据进行可视化分析（附源码）
需要源码请点赞关注收藏后评论区留言私信~~~ 下面针对一些App的下载量数据,使用pyecharts进行可视化分析,各类App某段时间的下载次数如下 App ...
最新文章
- supervisor 守护多个进程_supervisor守护进程管理实操笔记
- 软件开发工程师证书有用吗_bim工程师证书有用吗 含金量怎么样？
- thinkphp模版调用函数方法
- 负载均衡设备oracle,Oracle RAC 服务器端联接负载均衡(Load Balance)
- echarts formatter_vue使用echarts的方法
- win7自带远程应用
- 无人机图像处理工具-亮度、对比度、饱和度调整/匀光匀色/图像去雾
- 渴望 英语_渴望订阅– RxJava常见问题解答
- 现代软件工程 作业 文本文件中英语单词的频率
- 用elastic stack来分析下你的redis slowlog
- 微信小程序——通过百度API查询天气情况
- Helm安装和项目使用
- 如何给multisim中导入9012/9013/8050/8550三极管
- 一文足矣：Unity行为树
- git实用技巧：将多次commit合并为一次
- 打造立体文案矩阵库之二：直复式营销文案
- 请别再使用 SimpleDateFormat 格式化时间了，DateTimeFormatter 更出色！
- 线性代数学习笔记——第四十讲——n维向量空间的概念
- linux 目录权限上下文,谢烟客---------Linux之文件安全上下文及特殊权限位
- Jmeter监控之PerfMon Metrics Collector