1. QQ侧滑原理(第一种)：
HorizontalScorllView
如图，
中间黑色的是手机屏幕，左边绿色的是手机的Menu，右边紫色的是手机的Content，在HorizontalScorllView中，当一开始是可以是手机的Menu在手机屏幕中，也就是黑色区域，如果向左滑动手机屏幕则紫色区域被拖进手机屏幕，
用HorizontalScorllView的好处是当有ListView时不用判断滑动的方向，我们只需要判断滑动的偏移量，如果偏移量足够大则另一半区域拖入，否则不拖入。
而滑动的监听为：OnTouchEvent
蓝色的是手机屏幕即我们看到的区域，而Menu，Content都在绿色的区域，我们的滑动其实就是将绿色的区域左右移动
1. 代码区域：
1. res/left_menu.xml
android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/img_frame_background" > android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > android:layout_width="match_parent" android:layout_height="wrap_content" > android:id="@+id/img01" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:src="@drawable/img_1" /> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/img01" android:text="first item" android:textColor="#fff" android:textSize="20sp" />
android:layout_width="match_parent" android:layout_height="wrap_content" > android:id="@+id/img02" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:src="@drawable/img_2" /> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/img02" android:text="second item" android:textColor="#fff" android:textSize="20sp" /> android:layout_width="match_parent" android:layout_height="wrap_content" > android:id="@+id/img03" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:src="@drawable/img_3" /> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/img03" android:text="third item" android:textColor="#fff" android:textSize="20sp" /> android:layout_width="match_parent" android:layout_height="wrap_content" > android:id="@+id/img04" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:src="@drawable/img_4" /> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/img04" android:text="forth item" android:textColor="#fff" android:textSize="20sp" /> android:layout_width="match_parent" android:layout_height="wrap_content" > android:id="@+id/img05" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:src="@drawable/img_5" /> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/img05" android:text="fifth item" android:textColor="#fff" android:textSize="20sp" /> 界面效果如下所示： 1. res/activity_main.xml xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="match_parent" > android:layout_width="match_parent" android:layout_height="match_parent" > android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal" > android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/qq" > 1. 自定义的HorizontalScrollView： package com.example.customview; import android.app.Notification.Action; import android.content.Context; 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; public class CustomHorizontalView extends HorizontalScrollView { private int mScreenWidth; private int mRightPadding = 50;// 单位为dp private int mMenuWidth;// 菜单的宽度 private LinearLayout mWrapper = null; private ViewGroup mMenu = null; private ViewGroup mContent = null; private boolean once = false;// 指标，设置onMeasure方法中的设置宽高只设置一次 public CustomHorizontalView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); this.mScreenWidth = metrics.widthPixels; // 将dp转化为px的单位 this.mRightPadding = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources() .getDisplayMetrics()); } /** * 设置子View的宽高 设置自己的宽高 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub if (!once) { this.mWrapper = (LinearLayout) getChildAt(0);// 得到XML中HorizontalScrollView中的第一个LinearLayout this.mMenu = (ViewGroup) this.mWrapper.getChildAt(0);// 到到上面LinearLayout中的第一个布局即include的那个 this.mContent = (ViewGroup) this.mWrapper.getChildAt(1);// 得到上面的第二个布局也就是XML中的LinearLayout那个 this.mMenuWidth = this.mMenu.getLayoutParams().width = this.mScreenWidth - this.mRightPadding; this.mContent.getLayoutParams().width = this.mScreenWidth; once = true; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /** * 通过设置偏移量使Menu隐藏或出现 */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub super.onLayout(changed, l, t, r, b); if(changed) { this.scrollTo(this.mMenuWidth, 0);//通过此方法(滚动到mMenuWidth，0 这个坐标)使Menu隐藏 } } @Override public boolean onTouchEvent(MotionEvent ev) { // TODO Auto-generated method stub int action = ev.getAction();//通过这个得知用户的动作 switch(action) { case MotionEvent.ACTION_UP: int scrollX = getScrollX();//此处为Menu隐藏的在手机屏幕可见区域外的区域,即隐藏在左边的区域 if(scrollX>=this.mMenuWidth/2) { this.smoothScrollTo(this.mMenuWidth, 0);//继续隐藏左边的Menu区域 } else { this.smoothScrollTo(0, 0); } return true; } return super.onTouchEvent(ev); } } 1. 用户可调滑动边距的设置（ViewGroup支持自定义属性） 1. 编写values/attr.xml文件： 1. 在activity_main.xml文件中自定义命名空间：红色部分 xmlns:tools="http://schemas.android.com/tools" xmlns:padding=http://schemas.android.com/apk/res/com.example.qqslidmenu 其中padding是随便写的，而com.example.qqslidmenu是应用所在的包名即MainActivity的包名 android:layout_width="match_parent" android:layout_height="match_parent" padding:rightPadding="100">此处是使用上面自定义属性时的 1. 在CustomHorizontalView中： 我们前面编写的构造函数 ： public CustomHorizontalView(Contextcontext, AttributeSetattrs)这是在未自定义属性时调用的，现在我们自定义了属性，所以就不会调用了 2. CustomHorizontalScrollView类的改动如下： /** * 未自定义属性时调用 * * @param context * @param attrs */ public CustomHorizontalView(Context context, AttributeSet attrs) { this(context, attrs, 0); // TODO Auto-generated constructor stub } /** * 当使用自定义属性时会调用此构造方法 * * @param context * @param attrs * @param defStyle */ public CustomHorizontalView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomHorizontalView, defStyle, 0);此处是获取自定义XML文件的数组，得到用户自定义的所有属性 int n = a.getIndexCount();//得到属性（数组）的数目 for(int i=0;i { int attr = a.getIndex(i); switch(attr) { case R.styleable.CustomHorizontalView_rightPadding: this.mRightPadding = 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 metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); this.mScreenWidth = metrics.widthPixels; // // 将dp转化为px的单位 // this.mRightPadding = (int) TypedValue.applyDimension( // TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources() // .getDisplayMetrics());由于在此之前已经设置了默认值所以此处不需要再设置一次了 } /** * 在代码中new一个对象时调用 * * @param context */ public CustomHorizontalView(Context context) { this(context, null, 0); // TODO Auto-generated constructor stub } 在滑动的Content中添加一个切换屏幕的点击按钮 avtivity_main.xml中： android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/qq" > android:id="@+id/chang_menu_button" android:onClick="toggleMenu"—>Button的按钮事件 android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="change menu"/> 在MainActivity类中： public class MainActivity extends ActionBarActivity { private CustomHorizontalView customview = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.requestWindowFeature(Window.FEATURE_NO_TITLE); super.setContentView(R.layout.activity_main); this.customview = (CustomHorizontalView) super .findViewById(R.id.customHorizontalView);这个是自定义组件的在avtivity_main.xml中的id } /** * 此处是Button的监听的事件 */ public void toggleMenu(View view) { this.customview.toggle(); } } 1. 抽屉式侧滑: 原理：通过菜单的偏移量来改变菜单显示的多少 mMenuWidth-偏移量 需要用到属性动画TranslationX getScrollX中：一开始Menu隐藏中：所以它的值最大为mMenuWidth 当Menu滑出时它的值变小直到为0 2. 步骤： 在CustomHorizontalView类中加入如下代码用于监听滚动事件：同时为了设置属性动画需要引入nineoldandroids-2.4.0.jar这个包，这是为了兼容Android3.0一下的版本（如果是Android3.0以上的版本则不用这个包） /** * 当滚动发生时用于监听滚动的，在滚动的全过程中都监听 */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); // 这里l的初始值为mMenuWidth，越右拖l越小 float scale = l * 1.0f / this.mMenuWidth;// 此scale的值从1~0变化 // 调用属性动画，设置TranslationX ViewHelper.setTranslationX(mMenu, this.mMenuWidth * scale); } 个人理解如下： 首先是初始化当scale的值为1的时候： 这个绿色的矩形就是： 这个界面。 蓝色是 这个界面，初始时，我们设定（ViewHelper.setTranslationX(mMenu,this.mMenuWidth *scale); ），此时设置的是偏移量，mMenuWidth是屏幕的宽度，则此时绿色的矩形就会由原本的在手机屏幕外面偏移到手机屏幕内，效果就是在蓝色界面的下方。但是随着滑动蓝色的界面会往屏幕右边滑去，绿色的界面本来也会随着蓝色界面往右边滑去，但是我们此时设定绿色界面的偏移量慢慢的变小，效果便是绿色的界面慢慢的在原地不动，而蓝色的界面慢慢的从屏幕中离开露出底部的绿色界面 下面黑色的代表手机屏幕，绿色的是那个界面） 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） 2. 添加代码如下： /** * 当滚动发生时用于监听滚动的，在滚动的全过程中都监听 */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); // 这里l的初始值为mMenuWidth，越右拖l越小 float scale = l * 1.0f / this.mMenuWidth;// 此scale的值从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); // 调用属性动画，设置TranslationX ViewHelper.setTranslationX(mMenu, this.mMenuWidth * scale);// mMenu是偏移的对象，后面的是偏移的值 ViewHelper.setScaleX(this.mMenu, leftscale); ViewHelper.setScaleY(this.mMenu, leftscale); ViewHelper.setAlpha(this.mMenu, leftAlpha); // 设置右侧界面的缩放中心点，设置为在左边边框的中点 ViewHelper.setPivotX(this.mContent, 0); ViewHelper.setPivotY(this.mContent, this.mContent.getHeight() / 2); ViewHelper.setScaleX(this.mContent, rightscale); ViewHelper.setScaleY(this.mContent, rightscale); } 注：以上笔记是通过观看慕课网视频所做