高仿QQ6.0之側滑删除
前两天已经完毕了高仿QQ6.0側滑和优化,今天来看下側滑删除的实现吧,假设有兴趣,能够去看下之前的两篇,仿QQ6.0側滑之ViewDragHelper的使用(一)和高仿QQ6.0側滑菜单之滑动优化(二),好了不多说,開始今天的内容了。
假设看过之前的两篇的话,想必今天的非常好实现的。我们来分析一下哈,側滑删除,布局也就是前面一个item。然后有两个隐藏的button(TextView也能够),然后我们能够向左側滑动,然后显示出来,然后对delete(删除键)实现监听。就能够了哈。好了那就来看看代码怎么实现的吧。
首先和之前一样
自己定义View。初始化ViewDragHelper:
package com.example.removesidepull;
import android.content.Context;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
/**
* Created by 若兰 on 2016/2/2.
* 一个懂得了编程乐趣的小白,希望自己
* 能够在这个道路上走的非常远。也希望自己学习到的
* 知识能够帮助很多其它的人,分享就是学习的一种乐趣
* QQ:1069584784
* csdn:http://blog.csdn.net/wuyinlei
*/
public class SwipeLayout extends FrameLayout {
private ViewDragHelper mDragHelper;
public SwipeLayout(Context context) {
this(context, null);
}
public SwipeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//第一步 初始化ViewDragHelper
mDragHelper = ViewDragHelper.create(this, mCallback);
}
ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {
@Override
public boolean tryCaptureView(View child, int pointerId) {
//返回true
return true;
}
};
}
然后我们就要去处理拦截事件也就是重写一些onInterceptTouchEvent和onTouchEvent方法,默认是不拦截的:
/**
* 传递触摸事件
*
* @param ev
* @return
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//交给ViewDragHelper推断是否去拦截事件
return mDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
try {
mDragHelper.processTouchEvent(event);
} catch (Exception e) {
e.printStackTrace();
}
//返回true,这里表示去拦截事件
return true;
}
然后我们去重写一下ViewDragHelper里面的clampViewPositionHorizontal方法:
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return left;
}
好了这个时候,就已经能够实现滑动了,我们先来看下结果:
这里我们能够看到,已经能够滑动了,好了接下来的就是要处理滑动事件。去放置到正确的地方(call me 和删除刚開始不能见。还有仅仅能左滑显示,右滑隐藏)。
好了。我们先获取两个View吧:
/**
* 当xml填充完毕的时候
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
/**
* 后view
*/
mBackView = getChildAt(0);
/**
* 前view
*/
mFrontView = getChildAt(1);
}
获取想要的宽和高:
/**
* 在这里获取宽和高
*
* @param w
* @param h
* @param oldw
* @param oldh
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
/**
* 高度
*/
mHeight = mFrontView.getMeasuredHeight();
/**
* 宽度
*/
mWidth = mFrontView.getMeasuredWidth();
/**
* 移动距离
*/
mRange = mBackView.getMeasuredWidth();
}
摆放这两个view的位置:
/**
* 摆放位置
* @param changed
* @param left
* @param top
* @param right
* @param bottom
*/
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
layoutContent(false);
}
private void layoutContent(boolean isOpen) {
//摆放前view
Rect frontRect = computeFrontViewRect(isOpen);
mFrontView.layout(frontRect.left, frontRect.top, frontRect.right, frontRect.bottom);
//摆放后view
Rect backRect = computeBackViewRect(frontRect);
mBackView.layout(backRect.left,backRect.top,backRect.right,backRect.bottom);
//前置前view
bringChildToFront(mFrontView);
}
/**
* 我们能够把前view相当于一个矩形
*
* @param frontRect
* @return
*/
private Rect computeBackViewRect(Rect frontRect) {
int left = frontRect.right;
return new Rect(left, 0, left + mRange, 0 + mHeight);
}
private Rect computeFrontViewRect(boolean isOpen) {
int left = 0;
if (isOpen) {
left = -mRange;
}
return new Rect(left, 0, left + mWidth, 0 + mHeight);
}
当然这个实现。仅仅是能够拖拽了前view。由于我们没有把改变的dx传递下去,好了来实现拖拽前view的时候。后view也跟着出来(ViewDragHelper里面的方法):
/**
* 当view位置改变的时候
* @param changedView 改变的view
* @param left
* @param top
* @param dx x轴偏移量
* @param dy
*/
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
//传递事件。假设是拖拽的前view,
if (changedView == mFrontView){
//Offset this view's horizontal location by the specified amount of pixels.
//也就是说我的我的前view左滑了dx。那么我的后view也是左滑dx。右滑同理
mBackView.offsetLeftAndRight(dx);
} else if (changedView == mBackView){
//拖拽的是后view的话,前View的处理方式一样
mFrontView.offsetLeftAndRight(dx);
}
//兼容老版本号
invalidate();
}
好了这个时候我们来看下效果:
是不是发现了问题,就是我的前view想要的结果是不能右滑的(仅仅同意左滑和返回)。那么接下来就实现这个想要的结果吧。
下面的代码是在clampViewPositionHorizontal()方法里面:
//在这里处理放置的逻辑拖拽的前view
if (child == mFrontView) {
if (left > 0) {
return 0;
} else if (left < -mRange) {
return -mRange;
}
}//拖拽的后view
else if (child == mBackView) {
if (left > mWidth) {
return mWidth;
} else if (left < mWidth - mRange) {
return mWidth - mRange;
}
}
看下效果图:
好了,这个时候已经基本实现了,接下来实现下面滑动的距离和速度【推断是否打开和关闭:
/**
* 拖拽的view释放的时候
*
* @param releasedChild
* @param xvel
* @param yvel
*/
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
if (xvel == 0 && mFrontView.getLeft() < -mRange / 2.0f) {
open();
} else if (xvel < 0) {
open();
} else {
close();
}
}
/**
* 关闭
*/
public void close() {
Utils.showToast(getContext(), "close");
layoutContent(false);
}
//打开
public void open() {
//Utils.showToast(getContext(), "open");
layoutContent(true);
}
好了,接下来实现下面平滑的关闭和打开:
public void close() {
close(true);
}
/**
* 关闭
*
* @param isSmooth
*/
public void close(boolean isSmooth) {
int finalLeft = 0;
if (isSmooth) {
//開始动画 假设返回true表示没有完毕动画
if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
layoutContent(false);
}
}
public void open() {
open(true);
}
/**
* 打开
*
* @param isSmooth
*/
public void open(boolean isSmooth) {
int finalLeft = -mRange;
if (isSmooth) {
//開始动画
if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
layoutContent(true);
}
}
/**
* 持续动画
*/
@Override
public void computeScroll() {
super.computeScroll();
//这个是固定的
if (mDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
我们看下终于的效果吧:
好了,在这里我们加上一些回调,以方便外部使用的时候能够回调:
/**
* 默认状态是关闭
*/
private Status status = Status.Close;
private OnSwipeLayoutListener swipeLayoutListener;
public Status getStatus() {
return status;
}
public void setStatus(Status status) {
this.status = status;
}
public OnSwipeLayoutListener getSwipeLayoutListener() {
return swipeLayoutListener;
}
public void setSwipeLayoutListener(OnSwipeLayoutListener swipeLayoutListener) {
this.swipeLayoutListener = swipeLayoutListener;
}
/**
* 定义三种状态
*/
public enum Status {
Close, Open, Draging
}
/**
* 定义回调接口 这个在我们
*/
public interface OnSwipeLayoutListener {
/**
* 关闭
*
* @param mSwipeLayout
*/
void onClose(SwipeLayout mSwipeLayout);
/**
* 打开
*
* @param mSwipeLayout
*/
void onOpen(SwipeLayout mSwipeLayout);
/**
* 绘制
*
* @param mSwipeLayout
*/
void onDraging(SwipeLayout mSwipeLayout);
/**
* 要去关闭
*/
void onStartClose(SwipeLayout mSwipeLayout);
/**
* 要去开启
*/
void onStartOpen(SwipeLayout mSwipeLayout);
}
dispatchSwipeEvent()方法(在onViewPositionChanged()方法中调用)
protected void dispatchSwipeEvent() {
//推断是否为空
if (swipeLayoutListener != null) {
swipeLayoutListener.onDraging(this);
}
// 记录上一次的状态
Status preStatus = status;
// 更新当前状态
status = updateStatus();
if (preStatus != status && swipeLayoutListener != null) {
if (status == Status.Close) {
swipeLayoutListener.onClose(this);
} else if (status == Status.Open) {
swipeLayoutListener.onOpen(this);
} else if (status == Status.Draging) {
if (preStatus == Status.Close) {
swipeLayoutListener.onStartOpen(this);
} else if (preStatus == Status.Open) {
swipeLayoutListener.onStartClose(this);
}
}
}
}
updateStatus()方法:
/**
* 更新状态
*
* @return
*/
private Status updateStatus() {
//得到前view的左边位置
int left = mFrontView.getLeft();
if (left == 0) {
//假设位置是0,就是关闭状态
return Status.Close;
} else if (left == -mRange) {
//假设左側边距是后view的宽度的负值,状态为开
return Status.Open;
}
//其它状态就是拖拽
return Status.Draging;
}
好了,事件基本上已经实现完毕了,这个側拉删除的我会更新至我的项目中。
项目地址:高仿QQ6.0界面 https://github.com/wuyinlei/QQ6.0,github上面的终于如今效果:
假设有疑问或者能够交流的,QQ:1069584784
高仿QQ6.0之側滑删除的更多相关文章
- 高仿QQ6.0側滑菜单之滑动优化(二)
好了,昨天已经实现了高仿QQ6.0的側滑大致框架.如有兴趣.能够去看下仿QQ6.0側滑之ViewDragHelper的使用(一) 可是之前的实现.仅仅是简单的能够显示和隐藏左側的菜单,可是特别生硬,并 ...
- Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码
Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码 左右側滑效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a ...
- Android 高仿微信(QQ)滑动弹出编辑、删除菜单效果,增加下拉刷新功能
不可否认,微信.QQ列表的滑动删除.编辑功能着实很经典(从IOS那边模仿过来的),然.Android这边,对列表的操作,其实大多还停留上下文菜单来实现. Android如何实现list item的滑动 ...
- js高仿QQ消息列表左滑功能
该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...
- Android学习之仿QQ側滑功能的实现
如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...
- Android 高仿QQ滑动弹出菜单标记已读、未读消息
在上一篇博客<Android 高仿微信(QQ)滑动弹出编辑.删除菜单效果,增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接 ...
- 仿QQ列表左滑删除
一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...
- Android 高仿微信6.0主界面 带你玩转切换图标变色
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述 学习Android少不了模仿 ...
- Android 实现形态各异的双向側滑菜单 自己定义控件来袭
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935.本文出自:[张鸿洋的博客] 1.概述 关于自己定义控件側滑已经写了 ...
随机推荐
- 【洛谷2982】[Usaco2010 Feb]慢下来Slowdown(dfs序+线段树)
题目: 洛谷2982 分析: 这道题最重要的是想明白一点:牛\(i\)走到以后只对\(P_i\)的子树产生影响 知道这个以后,就可以想到在线维护每个牧场已经被"影响"了多少次(也就 ...
- ORCLE 服务器下 in、instr、like的速度比较
情景一(百万级数据):有一个表 (JG_COLLECT_FORM_QGZYXFPHFWJGJC1 ) 有数据条数 :1177472 条 结果:330542条 1.in: SELECT count( ...
- ACM_巧克力
Chocolate,Chocolate Time Limit: 2000/1000ms (Java/Others) Problem Description: 都说发神喜欢吃巧克力,有一次发神徒弟买了一 ...
- 题解报告:hihoCoder #1174:拓扑排序·一
题目链接:https://hihocoder.com/problemset/problem/1174 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲 ...
- WPF PasswordBox MVVM 实现
由于PasswordBox.Password属性非依赖属性,所以不能作为绑定的目标,以下是本人的MVVM实现方法. PasswordBox.Password与TextBox.Text同步,TextBo ...
- C#学习-程序集和反射
准备项目 1.新建一个空的解决方案MyProj.sln 2.在该解决方案下,建一个控制台项目P01.csproj 3.在该项目下,自己新建一个类MyFirstClass.cs 查看解决方案MyProj ...
- PHP流程控制语句(if,foreach,break......)
背景:PHP程序中,必不可少的要用到流程控制语句.这次对于流程控制语句进行一些总结. 条件控制语句和循环控制语句是两种基本的语法结构,它们都是用来控制程序执行流程.也是构成程序的主要语法基础. 一.程 ...
- 背包系列 hdu3449 有依赖背包
这道题真正困扰了笔者3,4天,冥思苦想几日无果之后,只能去找大牛的解法.结合网上的大牛解法与自己的理解,笔者终于解决了这个坑了,在此小庆幸一下. 原题如下: Consumer Time Limit: ...
- C# 调用win32API 获取进程句柄 有毛用???
private void button2_Click(object sender, EventArgs e) { Process[] ProceddingCon = Process.GetProces ...
- C# Winform 最大化后 任务栏还显示解决
//最大化 this.WindowState = FormWindowState.Maximized; //窗体最大化时 非全屏 不会遮盖任务栏 //去掉标题栏 this.FormBorderStyl ...