《代码里的世界》 —UI篇
用文字札记描绘自己 android学习之路
转载请保留出处 by Qiao
http://blog.csdn.net/qiaoidea/article/details/46608385
【导航】
- 弹出式对话框各种方案 从仿QQ消息提示框来谈弹出式对话框的实现方式 (Dialog,PopupWind,自定义View,Activity,FragmentDialog)
- Dialog源码解析 从源码上看Dialog与DialogFragment
- 仿IOS ActionSheet 两种方式实现ActionSheet底部弹出菜单效果
- QQ未读提醒拖拽删除 触摸事件监听与控件位置变换
1.概述
作为一款优秀的社交聊天软件,QQ始终保持着优秀的交互与设计,同时引领不少新时尚与标准规范,而它同时也有一些人性化的设计颇值得为人称道。今天要提到的是QQ消息未读拖拽清除(一键退朝”,“一键清除未读”,“一键下班”)的功能。具体细节参考 知乎:一键消除红点功能是怎么想出来的?当然,得益于诸位大大的各种尝试,小弟也稍加模仿修改了一个类似的Demo.这里展示下我们最后实现的各种样式及效果图:
(注:部分设计思想借鉴 chenupt的博文,不过其部分细节和实用性不够友善,拖动区域小,移除效果不随手指移动等原因,特作修缮并加一个人理解稍作补充。)
示例源码 已更新上传,包涵了滑动切换fragment和底部tab变色效果。具体实现方案鸿神已经提过,有兴趣的点个赞我后边再另开一篇仔细啰嗦下。
2.设计实现
具体原理分析请看前边贴的知乎原文,实现的话稍作讲解下吧。
先贴老图:
1.以未读消息原图中心为原点,计算p1~p4四点坐标,根据未读红点和手势拖动点间的距离来判断红点的消除与回弹。
2.初始化消除动画view,关联到指定未读view并绑定拖动事件,根据手势位置更新图片坐标。
3.判断是否超出最大距离,并根据连接/断开状态来处理手势释放事件,看是否需要消除view。
4.在上述各状态时绑定相应事件。
貌似很多同学更关注如何使用,因此从本篇开始优先讲引入与使用。
2.1如何使用
导入 示例源码
1.直接导入tipsview至项目作为库/(或直接引入到自己项目)
(1)Android Studio 在项目 build.gradle 中配置compile project(“:tipsview”)
(2)eclipse 直接 add library(或在 project.properties 配置)
android.library.reference.1=../tipsview
使用
1.将TipsView添加至layout.xml 布局最顶层
<code.qiao.com.tipsview.TipsView
android:id="@+id/tip"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
或者
rootView.addView(tipview, LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
2.关联至指定可拖动view,并实现拖动响应事件
tipsView.attach(targetView, new TipsView.Listener(){
@Override
public void onStart() {
targetView.setVisibility(View.INVISIBLE);
}
@Override
public void onComplete() {
}
@Override
public void onCancel() {
targetView.setVisibility(View.VISIBLE);
}
});
如果是添加在listView等有触摸事件处理作为子view的地方,记得在onStart()方法中调用
//当requestDisallowInterceptTouchEvent 参数为true的时候 它不会拦截其子控件的 触摸事件
listView.requestDisallowInterceptTouchEvent(true);
方法说明
//缺省方法
attach(final View attachView, Listener listener)
attach(final View attachView,