QQ5.0 侧滑栏效果

QQ5.0 侧滑栏效果

标签： Android 侧滑

我看见挺多APP采用的是这种一滑整个界面都向右移的方式。

这里采用的是 HorizontalScrollView（水平滑动视图） 布局的滑动特性。

就是两个界面放在一起，实现界面的滑动

先是布局界面

<?xml version="1.0" encoding="utf-8"?>
<com.example.myslidingmenu.MySlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns="http://schemas.android.com/tools"
xmlns:zhy="http://schemas.android.com/apk/com.example.myslidingmenu"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scrollbars="none"
zhy:rightPadding="100dp">

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

<ListView
android:id="@+id/list_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#45f78f"
android:listSelector="?attr/selectableItemBackground"
xmlns:android="http://schemas.android.com/apk/res/android">
</ListView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#123345">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="this is one "
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</com.example.myslidingmenu.MySlidingMenu>

就放了两个东西一个是ListView，另一个是TextView。

接下来是自定义MySlidingMenu的具体代码：

/**
* Created by hero on 2015/12/27.
*/
public class MySlidingMenu  extends HorizontalScrollView {
//屏幕宽度
private int mScreemWidth;
//
private int mMenuRightPending;
/**
* 菜单宽度
*/
private int mMenuWidth;
private int mHalfMenuWidth;

private boolean once ;
/**
*
* @param context
* @param attrs
*/

public MySlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);
mScreemWidth = getScreemWidth(context);        //获得屏幕宽度
}

/**
* 获取屏幕宽度的方法
* @param context
* @return
*/
private int getScreemWidth(Context context){
WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display mDisplay = manager.getDefaultDisplay();
Point mPoint = new Point();
mDisplay.getSize(mPoint);
return mPoint.x;
}
public MySlidingMenu(Context context,AttributeSet attr,int defStyle){
super(context,attr,defStyle);
mScreemWidth = getScreemWidth(context);      //获得屏幕宽度
//从布局文件中获得自定义属性（不是很懂）
TypedArray a = context.getTheme().obtainStyledAttributes(attr,R.styleable.MySlidingMenu,defStyle,0);
int n = a.getIndexCount();
for (int i =0;i<n;i++){
int mAttr = a.getIndex(i);
switch (mAttr){
case R.styleable.MySlidingMenu_rightPadding:
mMenuRightPending = a.getDimensionPixelSize(mAttr,(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50f,getResources().getDisplayMetrics()));
}
}
a.recycle();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!once){
LinearLayout wrapper = (LinearLayout) getChildAt(0);
ViewGroup menu = (ViewGroup) wrapper.getChildAt(0);         //布局中的第一个容器从左到右，即侧滑菜单是第一个
ViewGroup content = (ViewGroup) wrapper.getChildAt(1);      //布局中的第二个容器，即主界面。
//dp to px
//      mMenuRightPending = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,mMenuRightPending,content.getResources().getDisplayMetrics());
//       mMenuRightPending = 900;
mMenuRightPending = mScreemWidth*2/3;
mMenuWidth = mScreemWidth - mMenuRightPending;  //侧滑出的菜单的宽度
mHalfMenuWidth = mMenuWidth/2;                  //菜单宽度的一半用于触摸判断
menu.getLayoutParams().width = mMenuWidth;      //设置菜单宽度
content.getLayoutParams().width = mScreemWidth;//设置主界面宽度
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//初始化时调用
//onMeasure
//onLayout(再次调用了onMeasure)
//onMeasure
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//第一次建立时调用
if (changed){
//将菜单隐藏
Log.d("onLayout","scrollTo");
this.scrollTo(mMenuWidth,0);
once = true;
}
}

/**
* 触控行为时调用
* @param ev
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
//判断滑动类型
switch (action){
case MotionEvent.ACTION_UP:
/**
* scrollx 当前VIEW相对原点（母容器最左端）的距离
* 母容器全长mScreemWidth=1440，侧栏隐藏时scrollx=480，既
* mMenuRightPending = mScreemWidth*2/3;
* mMenuWidth = mScreemWidth - mMenuRightPending;  //侧滑出的菜单的宽度
*
*/
int scrollx = getScrollX();

if (scrollx>mHalfMenuWidth){
this.smoothScrollTo(mMenuWidth,0);
Log.d("onTouchEvent", mScreemWidth+"smoothScrollTo(mMenuWidth,0)"+scrollx);
}else{
/**
* smoothScrollTo(x,y)  相对原点的距离（母容器最左端）
* 0,0既从母容器最左端显示
*/
this.smoothScrollTo(0,0);       //显示侧边
Log.d("onTouchEvent", mScreemWidth+"smoothScrollTo(0,0)"+scrollx);
}
return true;
}
return super.onTouchEvent(ev);
}
}

核心部分：

smoothScrollTo(0,0);

X轴，Y轴偏移量为0，界面显示从最左边开始

偏移量相对于母容器即MySlidingMenu左上顶点

int scrollx = getScrollX();

/**

* scrollx 当前VIEW相对原点（母容器最左端）的距离

* 母容器全长mScreemWidth=1440，侧栏隐藏时scrollx=480，既

* mMenuRightPending = mScreemWidth*2/3;

* mMenuWidth = mScreemWidth - mMenuRightPending; //侧滑出的菜单的宽度

*

*/

使用app:layout_behavior属性时gradel文件要添加下面一句话

compile 'com.android.support:design:23.0.0'

侧滑时实现菜单在界面后

QQ5.0的样式并不是这么简单的一拉就出来，需要添加点动画。

在我们滑动的时候，菜单应该像是在界面的后面

那就相当于不断的改变菜单的位置，让它一直处于屏幕的左边。

就重写了一个方法

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//获得一个比例1-0
//菜单不显示是为1，显示时为0
float p = l*1.0f/menuWidth;

menu.setTranslationX((float) (0.85*menuWidth*p));
}

界面发生更改时执行。

menu.setTranslationX((float) (0.7*menuWidth*p));

不断改变菜单的位置实现效果。

同时也可以改变宽度和高度，同时实现缩放。

这里有一个重点：

HorizontalScrollView中两个VIEW发生重叠时其中一个VIEW重叠部分不显示。