专栏首页腾讯Bugly的专栏Android之实现妙趣横生的粘连布局

Android之实现妙趣横生的粘连布局

1概述

在手机QQ中,有一个功能叫“一键下班”,无论界面有多少信息,只要你不想看,就可以手指一滑,将他们全部消灭。据说这个功能专为红点恐惧症、信息阅读强迫症以及处女座暖心打造。这个功能已经上线许久,除了设计本身比较贴心外,其呈现效果也十分惊艳:

这个功能深受广大用户喜爱,那么这样一个场景到底是怎样的实现的呢?面对各位开发哥哥的疑问,小编决定玩个大的,既然要写,不如就写一个拓展性强大一点的、不仅仅只适用于“一键下班”场景的吧,干脆叫它粘连布局 —— AdherentLayout。

2AdherentLayout

AdherentLayout是一个适用于粘连场景的的开源组件,它有以下特性:

1、除了可实现类似手Q“一键下班”场景,还可以实现其他你能想到的其他场景。

2、支持设置粘连长度、粘连头部大小、粘连颜色、是否可以扯断的设置。

3、支持用户自定义粘连尾部的视图定制。

4、支持扯断时候的监听事件。

3使用方法

<AdherentLayout>

<!-- 在这里可以添加用户的视图(可选) -->  
< />

</AdherentLayout>

4接口说明

setColor(int color)

设置粘连颜色

setDismissedEnable(boolean isDismissed)

设置是否可以扯断

setMaxAdherentLength(int maxAdherentLength)

设置粘连的最大长度

setMinHeaderCircleRadius(int minHeaderCircleRadius)

设置粘连头部圆的最小半径

setOnAdherentListener(OnAdherentListener onAdherentListener)

设置粘连事件的监听器

5核心技术

要实现粘连效果,最重要的是掌握贝塞尔曲线的绘制。

6贝塞尔曲线

通俗的讲,贝塞尔曲线就是用来精确画出曲线的,通过若干个控制点来控制曲线的形状与绘制。因为Android本身自带支持二阶、三阶的贝塞尔曲线绘制的API,所以下面就只引出二阶、三阶的动态图好了,具体的知识点可移步贝塞尔曲线初探。

二阶:

三阶:

从上图可知,

二阶是只有一个控制点,对应quadTo(float x1, float y1, float x2, float y2),其中(x1,y1)是控制点,(x2,y2)是结束点。

三阶有两个控制点,对应cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) ,其中(x1,y1)是第一控制点,(x2,y2)是第二控制点,(x3,y3)是结束点。

7具体实现

借用ISUX的一张图,该粘连布局的具体流程分以下两种情况:

1、未超出粘连范围:边拖拽边绘制粘连头部圆、粘连尾部圆和粘连体。其中头部圆和尾部圆都是用drawCircle进行绘制,粘连体通过p1、p2、p3、p4、控制点采用quadTo绘制两条二阶贝塞尔曲线并分别连接p1p3、p2p4闭合起来,取两圆心距离的中点为控制点,通过拖拽过程中两圆心的距离之比来控制头部圆的放大缩小即可。松开手势,开启回弹动画。

2、超出粘连范围:只绘制粘连尾部圆即可。松开手势,绘制结束。

其中,绘制粘连体的核心代码如下:

private void drawBezier(Canvas canvas) {


/* 求三角函数 */
float atan = (float) Math.atan((mFooterCircle.y - mHeaderCircle.y) / (mFooterCircle.x - mHeaderCircle.x));
float sin = (float) Math.sin(atan);
float cos = (float) Math.cos(atan);


/* 四个点 */
float headerX1 = mHeaderCircle.x - mCurrentRadius * sin;
float headerY1 = mHeaderCircle.y + mCurrentRadius * cos;


float headerX2 = mHeaderCircle.x + mCurrentRadius * sin;
float headerY2 = mHeaderCircle.y - mCurrentRadius * cos;


float footerX1 = mFooterCircle.x - mFooterCircle.radius * sin;
float footerY1 = mFooterCircle.y + mFooterCircle.radius * cos;


float footerX2 = mFooterCircle.x + mFooterCircle.radius * sin;
float footerY2 = mFooterCircle.y - mFooterCircle.radius * cos;


/* 控制点 */
float anchorX = ( mHeaderCircle.x + mFooterCircle.x ) / 2;
float anchorY = ( mHeaderCircle.y + mFooterCircle.y ) / 2;


/* 画贝塞尔曲线 */
mPath.reset();
mPath.moveTo(headerX1, headerY1);
mPath.quadTo(anchorX, anchorY, footerX1, footerY1);
mPath.lineTo(footerX2, footerY2);
mPath.quadTo(anchorX, anchorY, headerX2, headerY2);
mPath.lineTo(headerX1, headerY1);
canvas.drawPath(mPath, mPaint);
}

8运行示例

9结语

听说这个功能的效果实现,经过了开发与产品多次脑暴与打磨。之所以受用户喜爱,除了实用外,更重要的是实现效果让用户觉得更有趣,更灵动,也更软性。而且这个效果其实可以适用于多种场景。

腾讯Bugly 最专业的质量跟踪平台

精神哥、小萝莉,为您定期分享应用崩溃解决方案

本文分享自微信公众号 - 腾讯Bugly(weixinBugly),作者:黄宝权

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全站 HTTPS 来了

    阅读提示:全文较长,预计阅读时长:20分钟 各位使用百度、谷歌或淘宝的时候,有没有注意浏览器左上角已经全部出现了一把绿色锁,这把锁表明该网站已经使用了 HTTP...

    腾讯Bugly
  • 程序员,这个双十一,对自己好一点…

    安静,大桌子,舒适的椅子,机械键盘,宽屏显示器,高配电脑,还有快速的网络,程序员们梦想的生活环境。 这个双十一,我们为您带来了程序员专属装备清单, 一起来打造一...

    腾讯Bugly
  • 腾讯Bugly Unity3D Plugin使用指南

    概述 Bugly Unity Plugin是专为基于Unity引擎开发的跨移动平台(iOS/Android)游戏APP而开发的异常监控插件,它能够自动捕...

    腾讯Bugly
  • PCL中可用的PointT类型

    PointXYZ是使用最常见的一个点数据类型,因为他之包含三维XYZ坐标信息,这三个浮点数附加一个浮点数来满足存储对齐,可以通过points[i].d...

    点云PCL博主
  • Android多媒体之GLES2战记第四集--移形换影

    这也就是m12,m13,m14,m15为什么特别,m0,m1,m2,m3为什么和x息息相关

    张风捷特烈
  • OpenGL ES(四) 变换

    用户2215591
  • python入门教程Python 浮点数数据类型详解 [学习 Python 必备基础知识][看此一篇就够了]

    1 Python 浮点数数据类型概述 浮点数数据类型,可以简称为浮点类型。 小数通常以浮点数的形式存储,在 Python 中用 float 表示。 可以理...

    汤贤
  • AutoML 是否被过度炒作?

    汤姆和杰瑞,第70集(译者注:直到暑假去了上海Disney,我才知道它和兔八哥、啄木鸟伍迪都和迪士尼木有关系=-=)--按键猫(1952)

    AI科技评论
  • 【AutoML】当前有哪些可用的AutoML平台?

    大家好,欢迎来到专栏《AutoML》,在这个专栏中我们会讲述AutoML技术在深度学习中的应用,这一期讲述现有可用的AutoML平台。

    用户1508658
  • AutoML是算法工程师的末日吗?

    2012年,一份关于 Auto-WEKA 的 arXiv 报告发布,描述了一种自动选择机器学习算法、特征和超参数的方法,期望是它能够“帮助该领域的非专家用户”。

    McGL

扫码关注云+社区

领取腾讯云代金券