Android实现3种侧滑效果（仿qq侧滑、抽屉侧滑、普通侧滑）

自己实现了一下侧滑的三种方式（注释都写代码里了）

本文Demo下载地址：Andriod侧滑

本文实现所需框架：nineoldandroids下载地址：nineoldandroids

1.普通侧滑：

主要是基于HorizontalScrollView做的：示例代码如下

主要布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 xmlns:gaoyu="http://schemas.android.com/apk/res/gaoyu.com.myapplication"

 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_qqsideslip"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="gaoyu.com.myapplication.sideslip.QQSideslipActivity">

 <!--xmlns:gaoyu自定义命名空间 原有到res+包名-->

 <gaoyu.com.myapplication.sideslip.SlidingMenu_qq
 android:id="@+id/SlMenu_sideslip"
 android:layout_width="wrap_content"
 android:layout_height="fill_parent"
 gaoyu:rightPadding="100dp">

 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:orientation="horizontal">

 <include layout="@layout/sideslip_menu" />
 <!--这个LinearLayout就是content-->
 <LinearLayout

 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/sliding">

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:onClick="onClick_sideslip_qq"
 android:text="切换菜单" />
 </LinearLayout>

 </LinearLayout>
 </gaoyu.com.myapplication.sideslip.SlidingMenu_qq>


</RelativeLayout>

菜单的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:layout_centerInParent="true">
 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/iv_sideslip1"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="20dp"
 android:src="@drawable/icon"/>
 <TextView
 android:layout_centerVertical="true"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/iv_sideslip1"
 android:layout_marginLeft="20dp"
 android:text="第一个item"/>
 </RelativeLayout>
 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/iv_sideslip2"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="20dp"
 android:src="@drawable/icon"/>
 <TextView
 android:layout_centerVertical="true"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/iv_sideslip2"
 android:layout_marginLeft="20dp"
 android:text="第二个item"/>
 </RelativeLayout><RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/iv_sideslip3"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="20dp"
 android:src="@drawable/icon"/>
 <TextView
 android:layout_centerVertical="true"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/iv_sideslip3"
 android:layout_marginLeft="20dp"
 android:text="第三个item"/>
 </RelativeLayout><RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/iv_sideslip4"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="20dp"
 android:src="@drawable/icon"/>
 <TextView
 android:layout_centerVertical="true"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/iv_sideslip4"
 android:layout_marginLeft="20dp"
 android:text="第四个item"/>
 </RelativeLayout><RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/iv_sideslip5"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:layout_marginBottom="20dp"
 android:layout_marginLeft="20dp"
 android:src="@drawable/icon"/>
 <TextView
 android:layout_centerVertical="true"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/iv_sideslip5"
 android:layout_marginLeft="20dp"
 android:text="第五个item"/>
 </RelativeLayout>
 </LinearLayout>

</RelativeLayout>

定义view类

public class SlidingMenu_qq extends HorizontalScrollView {

 private LinearLayout mWapper;
 private ViewGroup mMenu;
 private ViewGroup mContent;
 //menu的宽度
 private int mMenuWidth;
 //屏幕的宽度（内容区的宽度就是屏幕宽度）
 private int mScreenWdith;
 //菜单与右边的距离50dp
 private int mMenuRightPidding = 50;
 //调用一次
 private boolean once;
 //标识状态
 private boolean isOPen;

 /**
 * 未使用自定义属性时调用
 * 由于设置了attr所以...
 *
 * @param context
 * @param attrs
 */
 public SlidingMenu_qq(Context context, AttributeSet attrs) {
 //调用三个参数的构造方法
 this(context, attrs, 0);
 //获取屏幕宽度（窗口管理器）
 /*WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 //展示度量
 DisplayMetrics outMetrics = new DisplayMetrics();
 wm.getDefaultDisplay().getMetrics(outMetrics);
 mScreenWdith = outMetrics.widthPixels;
 //把dp转换成px
 mMenuRightPidding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
*/
 }

 /**
 * 当实现自定义属性时会执行三个参数的方法
 *
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
 public SlidingMenu_qq(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);

 //获取自定义的属性

 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu_qq, defStyleAttr, 0);
 //自定义属性个数
 int n = a.getIndexCount();
 for (int i = 0; i < n; i++) {
 int attr = a.getIndex(i);
 switch (attr) {
 case R.styleable.SlidingMenu_qq_rightPadding:
 //设置默认值是50dp
 mMenuRightPidding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));

 break;
 }

 }
 //释放一下
 a.recycle();

 //获取屏幕宽度（窗口管理器）
 WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 //展示度量
 DisplayMetrics outMetrics = new DisplayMetrics();
 wm.getDefaultDisplay().getMetrics(outMetrics);
 mScreenWdith = outMetrics.widthPixels;

 }

 /**
 * new 一个TextView时传一个上下文
 *
 * @param context
 */
 public SlidingMenu_qq(Context context) {
 //调用两个参数的构造方法
 super(context, null);
 }

 /**
 * 设置HorizontalScrollView子VIew的宽和高
 * 设置HorizontalScrollView自己的宽和高
 *
 * @param widthMeasureSpec
 * @param heightMeasureSpec
 */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 //设置循环之调用一次
 if (!once) {
 //HorizontalScrollView 内部只能有一个元素 所以直接get（0）就行就是那个Linerlayout mWapper
 mWapper = (LinearLayout) getChildAt(0);
 //获取mWapper里的第一个元素menu
 mMenu = (ViewGroup) mWapper.getChildAt(0);
 //获取mWapper里的第二个元素content
 mContent = (ViewGroup) mWapper.getChildAt(1);
 //菜单和内容宽度
 mMenuWidth = mMenu.getLayoutParams().width = mScreenWdith - mMenuRightPidding;
 mContent.getLayoutParams().width = mScreenWdith;
 //由于子对象被设置了，mWapper就先不用了
 once = true;
 }
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 /**
 * 通过设置偏移量 将menu隐藏
 * @param changed
 * @param l
 * @param t
 * @param r
 * @param b
 */
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 super.onLayout(changed, l, t, r, b);
 //限制多次调用
 if (changed) {
 //x为正滚动条向右 内容向左（移动mMenuWidth 正好将菜单隐藏）
 this.scrollTo(mMenuWidth, 0);
 }
 }

 /**
 * 判断将菜单滑出来多少了
 *
 * @param ev
 * @return
 */
 @Override
 public boolean onTouchEvent(MotionEvent ev) {
 int action = ev.getAction();
 switch (action) {
 case MotionEvent.ACTION_UP:
 //隐藏在左边的宽度
 int scrollX = getScrollX();
 if (scrollX >= mMenuWidth / 2) {
 //scrollTo也行但是动画效果不好 （隐藏）
 this.smoothScrollTo(mMenuWidth, 0);
 //代表菜单隐藏
 isOPen = false;
 } else {
 this.smoothScrollTo(0, 0);
 //表菜单打开
 isOPen = true;
 }
 return true;
 }
 return super.onTouchEvent(ev);
 }

 /**
 * 打开菜单
 */
 public void openMenu() {
 //已经打开
 if (isOPen) return;
 this.smoothScrollTo(0, 0);
 isOPen = true;
 }

 /**
 * 关闭菜单
 */
 public void closeMenu() {
 //正在打开
 if (!isOPen) return;
 this.smoothScrollTo(mMenuWidth, 0);
 isOPen = false;
 }

 /**
 * 切换菜单
 */
 public void toggle(){
 if (isOPen){
 closeMenu();
 }else {
 openMenu();
 }
 }
}

2.抽屉侧滑（添加此方法）

/**
 * 实现抽屉滑动
 * l隐藏在左边的宽度
 * 后边是变化梯度
 */

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
 super.onScrollChanged(l, t, oldl, oldt);
 float scale = l*1.0f/mMenuWidth;//1~0梯度的值
 //调用属性动画
 ViewHelper.setTranslationX(mMenu,mMenuWidth*scale);
 }

3.qq5.0侧滑，实现这个方法

 /**
 * 实现仿qq5.0
 * l等于隐藏在左边的宽度（越来越小）
 * 后边是变化梯度
 */

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
 super.onScrollChanged(l, t, oldl, oldt);
 float scale = l * 1.0f / mMenuWidth;//1~0梯度的值

 //调用属性动画

 //菜单的缩放操作
 float leftScale = 1.0f-scale*0.3f;
 //透明度
 float leftAlpha = 0.6f + 0.4f*(1-scale);
 ViewHelper.setTranslationX(mMenu, mMenuWidth * scale*0.8f);
 ViewHelper.setScaleX(mMenu,leftScale);
 ViewHelper.setScaleY(mMenu,leftScale);
 ViewHelper.setAlpha(mMenu,leftAlpha);

 //内容区域不断缩小
 float rightScale = 0.7f+0.3f*scale;
 //横向纵向缩放（不更改缩放中心点就全隐藏了）
 ViewHelper.setPivotX(mContent,0);
 ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
 ViewHelper.setScaleX(mContent,rightScale);
 ViewHelper.setScaleY(mContent,rightScale);

 }

更多学习内容，可以点击《Android侧滑效果汇总》学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android仿qq侧滑  # Android抽屉侧滑  # Android侧滑效果  # Android解决viewpager嵌套滑动冲突并保留侧滑菜单功能  # Android仿微信联系人列表字母侧滑控件  # Android_UI 仿QQ侧滑菜单效果的实现  # Android 仿京东侧滑筛选实例代码  # android RecyclerView侧滑菜单  # 滑动删除  # 长按拖拽  # 下拉刷新上拉加载  # Android recyclerview实现拖拽排序和侧滑删除  # android的RecyclerView实现拖拽排序和侧滑删除示例  # Android侧滑导航栏的实例代码  # Android 侧滑关闭Activity的实例  # 自定义  # 第一个  # 下载地址  # 第二个  # 管理器  # 自己的  # 中心点  # 所需  # 就行  # 用了  # 三种  # 第三个  # 转换成  # 就先  # 也行  # 里了  # 大家多多  # 就全  # 都写  # 有一个 

相关文章： 建站之星代理费用多少？最新价格详情介绍  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  建站之星北京办公室：智能建站系统与小程序生成方案解析  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  公众号网站制作网页,微信公众号怎么制作？  建站之星伪静态规则如何设置？  如何在IIS中配置站点IP、端口及主机头？  ,怎么用自己头像做动态表情包？  小程序网站制作需要准备什么资料,如何制作小程序？  代刷网站制作软件,别人代刷火车票靠谱吗？  定制建站如何定义？其核心优势是什么？  中山网站推广排名,中山信息港登录入口？  北京网站制作网页,网站升级改版需要多久？  如何彻底删除建站之星生成的Banner？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  贸易公司网站制作流程,出口贸易网站设计怎么做？  建站中国官网：模板定制+SEO优化+建站流程一站式指南  如何用腾讯建站主机快速创建免费网站？  如何高效配置IIS服务器搭建网站？  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何登录建站主机？访问步骤全解析  简历在线制作网站免费,免费下载个人简历的网站是哪些？  建站主机选哪种环境更利于SEO优化？  实惠建站价格推荐：2025年高性价比自助建站套餐解析  如何在万网开始建站？分步指南解析  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  建站之星后台搭建步骤解析：模板选择与产品管理实操指南  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  如何通过建站之星自助学习解决操作问题？  深圳 网站制作,深圳招聘网站哪个比较好一点啊？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  如何在景安服务器上快速搭建个人网站？  制作网站的软件免费下载,免费制作app哪个平台好？  制作网站公司那家好,网络公司是做什么的？  如何在Golang中引入测试模块_Golang测试包导入与使用实践  建站之星后台密码遗忘？如何快速找回？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  宝塔建站助手安装配置与建站模板使用全流程解析  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  *服务器网站为何频现安全漏洞？  如何在阿里云ECS服务器部署织梦CMS网站？  香港服务器租用费用高吗？如何避免常见误区？  网站按钮制作软件,如何实现网页中按钮的自动点击？  黑客入侵网站服务器的常见手法有哪些？  如何使用Golang table-driven基准测试_多组数据测量函数效率