UI--学习模仿QQ未读提醒拖拽删除

《代码里的世界》 —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,