效果图：
项目结构：
QQ5.0的侧滑
和抽屉菜单的区别
简单的说就是在onScrollChanged方法中加入了缩放，偏移，渐变属性动画效果
区别1：内容1：内容区域 1.0到0.7 缩放效果
scale：1.0 到 0.0
0.7+0.3 * scale
区别2：菜单的偏移量需要修改
区别3：菜单显示是有缩放以及透明度的变化
缩放：0.7到1.0
1.0 - scale * 0.3
透明度 0.6 到 1.0
注意这个在写之前引入了一个属性动画的jar包nineoldandroids-2.4.0.jar
下载源码中找到
自定义控件 SlidingMenu
package com.zhh.app.view;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.MotionEvent;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import com.nineoldandroids.view.ViewHelper;import com.zhh.app.R;/*** QQ5.0的侧滑* 和抽屉菜单的区别* 区别1：内容1：内容区域 1.0到0.7 缩放效果* scale：1.0 到 0.0* 0.7+0.3 * scale* 区别2：菜单的偏移量需要修改* 区别3：菜单显示是有缩放以及透明度的变化* 缩放：0.7到1.0* 1.0 - scale * 0.3* 透明度 0.6 到 1.0* 0.6 + 0.4 * （1 - scale）；*/public class SlidingMenu extends HorizontalScrollView {// 里面的线性布局private LinearLayout mWapper;// 菜单布局private ViewGroup mMenu;// 内容布局private ViewGroup mContent;// 屏幕宽度private int mScreenWidth;// 菜单宽度private int mMenuWidth;// 菜单里右边的距离 dpprivate int mMenuRightPadding = 50;// 宽高只设置一次private boolean once = false;// 菜单是否打开private boolean isOpen = false;/*** 在代码中new的时候调用此构造方法** @param context*/public SlidingMenu(Context context) {//调两个参数的构造方法this(context, null);}/*** 布局文件中引用时，调用此构造方法** @param context* @param attrs*/public SlidingMenu(Context context, AttributeSet attrs) {//调三个参数的构造方法this(context, attrs, 0);}/*** 使用了自定义属性时，调用此构造方法** @param context* @param attrs* @param defStyle*/public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);// 获取我们定义的属性TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidingMenu, defStyle, 0);//拿到自定义属性的个数int n = a.getIndexCount();//循环for (int i = 0; i < n; i++) {int attr = a.getIndex(i);switch (attr) {// 判断我们自定义的属性case R.styleable.SlidingMenu_rightPadding:// 默认值，把50dp装化成pxint defaultValue = (int) TypedValue.applyDimension(PLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());mMenuRightPadding = a.getDimensionPixelSize(attr, defaultValue);break;}}a.recycle();//拿到屏幕的宽度，并赋值WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);mScreenWidth = outMetrics.widthPixels;}/*** 设置子view的宽高，和设置自己的宽高** @param widthMeasureSpec* @param heightMeasureSpec*/@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);if (!once) {//拿到水平线性布局mWapper = (LinearLayout) getChildAt(0);//拿到水平线性布局中的菜单布局mMenu = (ViewGroup) mWapper.getChildAt(0);//拿到水平线性布局中的内容布局mContent = (ViewGroup) mWapper.getChildAt(1);//设置菜单宽度mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;//设置内容布局的宽度mContent.getLayoutParams().width = mScreenWidth;once = true;}}/*** 设置子View的位置* 通过设置偏移量，将menu隐藏*/@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);if (changed) {//正值是向左滑动，负值是向右滑动this.scrollTo(mMenuWidth, 0);}}/*** 事件处理** @param event* @return*/@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {//当手指离开时case MotionEvent.ACTION_UP:// 隐藏在左边的宽度int scrollX = getScrollX();// 隐藏在左边的宽度大于菜单宽度的1/2时，让菜单隐藏if (scrollX >= mMenuWidth / 2) {// 带有动画效果this.smoothScrollTo(mMenuWidth, 0);isOpen = false;} else {// 菜单打开this.smoothScrollTo(0, 0);isOpen = true;}return true;}return super.onTouchEvent(event);}/*** 打开菜单*/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();}}/*** 监听滚动* 滚动式发生*/@Overrideprotected void onScrollChanged(int getScrollX, int t, int oldl, int oldt) {super.onScrollChanged(getScrollX, t, oldl, oldt);float scale = getScrollX * 1.0f / mMenuWidth; // 1 ~ 0/*** 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale** 区别2：菜单的偏移量需要修改** 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0* 0.6+ 0.4 * (1- scale) ;**///内容区域缩放float rightScale = 0.7f + 0.3f * scale;//菜单缩放float leftScale = 1.0f - scale * 0.3f;//菜单透明度的变化float leftAlpha = 0.6f + 0.4f * (1 - scale);// 设置菜单的动画// 设置菜单的偏移量// 调用属性动画，设置TranslationXViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);// 设置菜单的缩放ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);// 设置菜单的透明度ViewHelper.setAlpha(mMenu, leftAlpha);// 设置内容的动画// 设置content的缩放的中心点，在左边线的中心ViewHelper.setPivotX(mContent, 0);ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);// 缩放ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);}}
MainActivity
package com.zhh.app;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.Button;import com.zhh.app.view.SlidingMenu;public class MainActivity extends Activity {// 侧滑控件private SlidingMenu mLeftMenu;// 按钮private Button btnQieHuan;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLeftMenu = (SlidingMenu)findViewById(R.id.mLeftMenu);btnQieHuan = (Button)findViewById(R.id.btnQieHuan);//点击事件btnQieHuan.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 切换菜单，当打开时关闭，当关闭时，打开mLeftMenu.toggle();}});}}
activity_main.xml
<RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"xmlns:zhh="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><!--HorizontalScrollView中只有一个子类--><com.zhh.app.view.SlidingMenu android:id="@+id/mLeftMenu"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/img_frame_background"zhh:rightPadding="150dp"><!--左边是菜单，右边是内容 --><LinearLayout android:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal"><!-- 左边菜单--><include layout="@layout/left_menu" /><!-- 右边内容--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@mipmap/qq"><Buttonandroid:id="@+id/btnQieHuan"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="toggleMenu"android:text="切换菜单" /></LinearLayout></LinearLayout></com.zhh.app.view.SlidingMenu></RelativeLayout>
left_menu.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerInParent="true"android:orientation="vertical" ><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/id_img1"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@mipmap/img_1" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/id_img1"android:text="第一个Item"android:textColor="#ffffff"android:textSize="20sp" /></RelativeLayout><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/id_img2"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@mipmap/img_2" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/id_img2"android:text="第二个Item"android:textColor="#ffffff"android:textSize="20sp" /></RelativeLayout><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/id_img3"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@mipmap/img_3" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/id_img3"android:text="第三个Item"android:textColor="#ffffff"android:textSize="20sp" /></RelativeLayout><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/id_img4"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@mipmap/img_4" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/id_img4"android:text="第四个Item"android:textColor="#ffffff"android:textSize="20sp" /></RelativeLayout><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content" ><ImageViewandroid:id="@+id/id_img5"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_marginTop="20dp"android:src="@mipmap/img_5" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="20dp"android:layout_toRightOf="@id/id_img5"android:text="第五个Item"android:textColor="#ffffff"android:textSize="20sp" /></RelativeLayout></LinearLayout></RelativeLayout>
attr.xml
<?xml version="1.0" encoding="utf-8"?><resources><!-- 此文件链接SlidingMenu类和布局文件--><!--rightPadding 属性名称--><!-- format 格式支持px,dp,ps--><attr name="rightPadding" format="dimension"></attr><!-- SlidingMenu 控件名称--><!-- rightPadding 属性名称--><declare-styleable name="SlidingMenu"><attr name="rightPadding"></attr></declare-styleable></resources>
源码下载：
/download/zhaihaohao1/10671937
参考视频：
/learn/211
参考文章：
/lmj623565791/article/details/39257409
Android自带控件DrawerLayout，实现侧滑
/student9128/article/details/53247491
