首先来看效果图:
主界面的qq界面是我截得图。并不是实际画了一个布局。滑出的菜单是手写的布局。
整体思路:
整体是一个HorizontalScrollView。当滑动的距离大于大于屏幕的三分之一时。侧边栏展开。否则再滑回去。
来看布局:
<com.yeliang.sliding_menu.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="@layout/menu"></include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"></LinearLayout>
</LinearLayout>
</com.yeliang.sliding_menu.SlidingMenu>
最外层是继承自HorizontalScrollView的自定义控件。没啥可说的一目了然。可以看到我的主界面就是一个qq的主界面的截图。并引入了滑动菜单的布局。
下面是自定义控件的完整代码:
public class SlidingMenu extends HorizontalScrollView {
//屏幕宽度
private int mScreenWidth;
//划出的菜单
private ViewGroup mMenu;
//主界面
private ViewGroup mMain;
private int mMenuRightPadding = 100;
private int mMenuWidth;
private boolean isInit = true;
public SlidingMenu(Context context, AttributeSet attrs) {
super(context, attrs);
WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
setHorizontalScrollBarEnabled(false);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (isInit) {
LinearLayout wrapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) wrapper.getChildAt(0);
mMain = (ViewGroup) wrapper.getChildAt(1);
mMenuWidth = mScreenWidth - mMenuRightPadding;
mMenu.getLayoutParams().width = mMenuWidth;
mMain.getLayoutParams().width = mScreenWidth;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
isInit = false;
}
scrollTo(mMenuWidth, 0);
super.onLayout(changed, l, t, r, b);
}
private float downX;
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();
break;
case MotionEvent.ACTION_UP:
//抬起时 滑动的距离
float dx = ev.getX() - downX;
//如果滑动的距离小于屏幕宽度的1/3
if (dx < mScreenWidth / 3) {
smoothScrollTo(mMenuWidth, 0);
} else {
smoothScrollTo(0, 0);
}
return true;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//滑动的百分比
float factor = (float) l / mMenuWidth;
//平移
mMenu.setTranslationX(mMenuWidth * factor * 0.6f);
//缩放
float menuScale = 1 - 0.4f * factor;
mMenu.setScaleX(menuScale);
mMenu.setScaleY(menuScale);
//透明度
mMenu.setAlpha(1 - factor);
}
}
1 首先来确定主界面和侧边栏的宽度。
在构造方法中获得屏幕的宽度
WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
去除滚动条
setHorizontalScrollBarEnabled(false);
然后在onMeasure()方法中,根据屏幕的宽度,来给侧边栏和主界面宽度赋值
if (isInit) {
LinearLayout wrapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) wrapper.getChildAt(0);
mMain = (ViewGroup) wrapper.getChildAt(1);
mMenuWidth = mScreenWidth - mMenuRightPadding;
mMenu.getLayoutParams().width = mMenuWidth;
mMain.getLayoutParams().width = mScreenWidth;
}
因为onMeasure()会多次调用。所以这里用isInit标记了。并在onLayout()执行后把isInit置为false。这样就不会重复执行这段赋值的代码。
从这段代码中可以看出,主界面的设定为屏幕的宽度,侧边栏的宽度为自身宽度减去100dp。这样侧边栏的右边就会被切去100dp。
2 初始化时,让此自定义控件滑动到主界面正好显示的位置
if (changed) {
isInit = false;
}
scrollTo(mMenuWidth, 0);
整个自定义控件的宽度即为侧边栏的宽度和主界面的宽度。所以如果要让此自定义控件初始化时就正好显示主界面,那就必须要让此自定义控件向左滑动侧边栏的宽度。
3 当滑动侧边栏时,计算滑动的宽度。
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();
break;
case MotionEvent.ACTION_UP:
//抬起时 滑动的距离
float dx = ev.getX() - downX;
//如果滑动的距离小于屏幕宽度的1/3
if (dx < mScreenWidth / 3) {
smoothScrollTo(mMenuWidth, 0);
} else {
smoothScrollTo(0, 0);
}
return true;
default:
break;
}
return super.onTouchEvent(ev);
}
因为此自定义控件本来就是默认可以滑动的,所以不用处理ACTION_MOVE的事件。只是在ACTION_DOWN和ACTION_UP事件中判断滑动的距离即可。当滑动的距离大于屏幕的1/3时,则把侧边栏滑出来。这里的smoothScrooTo()方法并不会立即滑动到指定位置。而是稍微缓慢的滑动。
4 滑动过程中改变侧边栏的透明度和大小和平移效果
自定义控件在滑动过程中会多次回调onScrollchanged方法。
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//滑动的百分比
float factor = (float) l / mMenuWidth;
//平移
mMenu.setTranslationX(mMenuWidth * factor * 0.6f);
//缩放
float menuScale = 1 - 0.4f * factor;
mMenu.setScaleX(menuScale);
mMenu.setScaleY(menuScale);
//透明度
mMenu.setAlpha(1 - factor);
}
此方法中的l表示x方向滑动的距离。所以根据l/侧边栏的宽度。就能计算出滑动的百分比。再根据滑动进度的百分比来计算平移,缩放,透明度的效果的值。在缩放过程中,侧边栏的宽度会变小,所以要不断地向右平移。不然在侧边栏和主界面之间会还有一个逐渐见效的缝隙。如下
向右平移后就不会有这个缝隙。