Android滑动优化高仿QQ6.0侧滑菜单(滑动优化)

 推荐阅读:Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)

但是之前的实现,只是简单的可以显示和隐藏左侧的菜单,但是特别生硬,而且没有任何平滑的趋势,那么今天就来优化一下吧,加上平滑效果,而且可以根据手势滑动的方向来判断是否是显示和隐藏。

首先先来实现手势判断是否隐藏和显示

这里就要用到了一个方法了,如下:

这个是ViewDradHelper里面的方法:

/**
* 当view被释放的时候处理的事情(松手)
*
* @param releasedChild 被释放的子view
* @param xvel 水平方向的速度 帧每秒 向右为 +
* @param yvel 竖直方向的速度 向下为 +
*/
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
Log.d("DragLayout", "xvel : " + xvel + " yvel :" + yvel);
super.onViewReleased(releasedChild, xvel, yvel);
//判断关闭和打开
//在这里我们首先判断什么时候打开,然后剩下的都是关闭状态
//首先是我的主面板的左侧具体屏幕左侧已经大于mRange/2的距离并且右滑的速度大于0,此时打开
if (xvel >= 0 && mMainContent.getLeft() > mRange / 2.0f) {
open();
} else if (xvel > 0) {
//第二种就是我右滑的速度大于0(这里的速度自己定义哈,根据自己想要实现的敏感度)
open();
} else {
//剩余的所有情况都是关闭
close();
}
}

close()方法(DragLayout里面的方法):

/**
* 关闭
*/
public void close() {
int finalLeft = 0;
//调用layout方法,摆放主布局
/**
* @param l Left position, relative to parent
* @param t Top position, relative to parent
* @param r Right position, relative to parent
* @param b Bottom position, relative to parent
*/
mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);
}

open()方法(DragLayout里面的方法):

/**
* 打开
*/
public void open() {
int finalLeft = mRange;
mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);
}

这个是否就可以实现根据手势来判断是否打开和关闭了。

接下来我们就来实现如何平滑的关闭和打开,话不多说,代码说话(这里对上面的open和close做了一些处理):

public void close() {
close(true);
}
/**
* 关闭
*
* @param isSmooth 是否平滑的关闭
*/
public void close(boolean isSmooth) {
int finalLeft = 0;
if (isSmooth) {
/**
* public boolean smoothSlideViewTo(View child, int finalLeft, int finalTop)方法的解释
*
* Animate the view <code>child</code> to the given (left, top) position.
* If this method returns true, the caller should invoke {@link #continueSettling(boolean)}
* on each subsequent frame to continue the motion until it returns false. If this method
* returns false there is no further work to do to complete the movement.
*
* 返回true 代表还没有移动到指定的位置,需要刷新界面,继续移动
* 返回false 就停止工作哈
*/
//1、触发动画
if (mDragHelper.smoothSlideViewTo(mMainContent, finalLeft, 0)) {
//参数传this,也就是child所在的viewgroup
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
//调用layout方法,摆放主布局
/**
* @param l Left position, relative to parent
* @param t Top position, relative to parent
* @param r Right position, relative to parent
* @param b Bottom position, relative to parent
*/
mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);
}
}
/**
* 打开
*/
public void open(boolean isSmooth) {
int finalLeft = mRange;
if (isSmooth && mDragHelper.smoothSlideViewTo(mMainContent, finalLeft, 0)) {
//参数传this,也就是child所在的viewgroup
ViewCompat.postInvalidateOnAnimation(this);
} else {
mMainContent.layout(finalLeft, 0, finalLeft + mWidth, finalLeft + mHeight);
}
}
public void open() {
open(true);
}

来看下效果图吧(里面的白道问题是录屏导致,运行的没有这个哈):

这个时候,基本上差不多了,剩下的,我们就来添加一些状态和设置listener的方法,留给外面的调用吧。,代码很简单:

/**
* 定义当前状态 默认是关闭状态
*/
private Status mStatus = Status.CLOSE;
/**
* 状态枚举
* 关闭 CLOSE
* 打开 OPEN
* 拖拽 DRAGING
*/
public enum Status {
CLOSE, OPEN, DRAGING;
}
private OnDragStatusListener mListener;
public void setDragStateListener(OnDragStatusListener listener) {
mListener = listener;
}
public interface OnDragStatusListener {
/**
* 关闭逻辑
*/
void onClose();
/**
* 打开逻辑
*/
void onOpen();
/**
* 拖拽逻辑
*
* @param percent
*/
void onDraging(float percent);
}

状态更新,方法调用,这个dispatchDragEvent()在onViewPositionChanged()这个方法中调用一下就行,因为拖拽的时候状态时刻在变化,所以我们在这个方法中调用:

/**
* 状态更新方法执行
*
* @param newLeft
*/
private void dispatchDragEvent(int newLeft) {
//得到的一个百分比
float percent = newLeft * 1.0f / mRange;
//0.0f--->1.0f
Log.d("DragLayout", "percent : " + percent);
if (mListener != null) {
mListener.onDraging(percent);
}
//跟新状态执行回调
Status lastStatus = mStatus;
mStatus = updateStatus(percent);
if (mStatus != lastStatus) {
//状态发生变化
if (mStatus == Status.CLOSE) {
//当前状态是关闭
if (mListener != null) {
mListener.onClose();
}
} else if (mStatus == Status.OPEN) {
if (mListener != null) {
mListener.onOpen();
}
}
}
}
/**
* 状态更新方法
*
* @param percent
* @return
*/
private Status updateStatus(float percent) {
if (percent == 0) {
return Status.CLOSE;
} else if (percent == 1) {
return Status.OPEN;
}
return Status.DRAGING;
}

好了,到此为止,高仿QQ6.0侧滑基本完成,下面我们来看下效果吧。

好了,这个侧滑就这样完成了,后期会加在主页中加入listview(尝试用RecycleView)实现左滑删除效果,现在附上该demo的地址,后期添加的也会更新至此。

(0)

相关推荐

  • Android UI系列-----ScrollView和HorizontalScrollView的详解

    本篇随笔将讲解一下Android当中比较常用的两个布局容器--ScrollView和HorizontalScrollView,从字面意义上来看也是非常的简单的,ScrollView就是一个可以滚动的View,这个滚动的方向是垂直方向的,而HorizontalScrollView则是一个水平方向的可以滚动的View.本篇随笔可能描述性的知识比较少,最主要还是通过代码来看看如何使用这两个View. 一.ScrollView的简单介绍 首先来看看ScrollView和HorizontalScrollV

  • Android程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用方法很简单,只需要添加一句依赖 compile 'com.android

  • Android HorizontalScrollView左右滑动效果

    本文实例为大家分享了Android HorizontalScrollView左右滑动的具体代码,供大家参考,具体内容如下 效果图 一.什么是HorizontalScrollView HorizontalScrollView实际上是一个FrameLayout ,这意味着你只能在它下面放置一个子控件 ,这个子控件可以包含很多数据内容.有可能这个子控件本身就是一个布局控件,可以包含非常多的其他用来展示数据的控件.这个布局控件一般使用的是一个水平布局的LinearLayout.TextView也是一个可

  • Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android中HorizontalScrollView使用方法详解

    由于移动设备物理显示空间一般有限,不可能一次性的把所有要显示的内容都显示在屏幕上.所以各大平台一般会提供一些可滚动的视图来向用户展示数据.Android平台框架中为我们提供了诸如ListView.GirdView.ScrollView等滚动视图控件,这几个视图控件也是我们平常使用最多的.下面介绍一下HorizontalScrollView的使用和需要注意的点:  HorizontalScrollView是一个FrameLayout  ,这意味着你只能在它下面放置一个子控件,这个子控件可以包含很多

  • Android利用HorizontalScrollView仿ViewPager设计简单相册

    最近学习了一个视频公开课,讲到了利用HorizontalScrollView仿ViewPager设计的一个简单相册,其实主要用了ViewPager缓存的思想.此篇文章参考:Android自定义HorizontalScrollView打造超强Gallery效果(这篇文章与公开课的讲的大致一样) 这里简单说一下ViewPager的缓存机制 1.进入ViewPager时,加载当前页和后一页: 2.当滑动ViewPager至下一页时,加载后一页,此时第一页是不会销毁的,同时加载当前页的下一页. 其实就是

  • Android自定义HorizontalScrollView实现qq侧滑菜单

    今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单.学了不少的知识,同时也佩服鸿洋_大神思路的清晰. 看了教程课下也自己实现了一下.代码几乎完全相同  别喷我啊..没办法 o(︶︿︶)o 唉 像素不好 没办法 找不到好的制作gif的软件. 我们暂且称侧滑左边界面的为menu,右边为content 首先是menu的布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi

  • Android HorizontalScrollView内子控件横向拖拽实例代码

    前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 正文 截图 实现代码: public class HoDragActivity extends Activity { private LinearLayout main; private GestureDetector mGestureDetector; @Override public void onCreate(Bundle savedInst

  • Android自定义HorizontalScrollView打造超强Gallery效果

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • Android使用DrawerLayout实现仿QQ双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家. 首先看看效果图: DrawerLayout用起来真的很方便,下面一起看看用法~ 2.DrawerLayout的使用 直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧

随机推荐