Android自定义ViewGroup打造各种风格的SlidingMenu

public class MySlidingMenu extends ViewGroup {
public MySlidingMenu(Context context) {
this(context, null, 0);
}
public MySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
DisplayMetrics metrics = new DisplayMetrics();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(metrics);
//获取屏幕的宽和高
mScreenWidth = metrics.widthPixels;
mScreenHeight = metrics.heightPixels; 
//设置Menu距离屏幕右侧的距离，convertToDp是将代码中的100转换成100dp
mMenuRightPadding = convertToDp(context,100); 
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//拿到Menu，Menu是第0个孩子
mMenu = (ViewGroup) getChildAt(0);
//拿到Content，Content是第1个孩子
mContent = (ViewGroup) getChildAt(1);
//设置Menu的宽为屏幕的宽度减去Menu距离屏幕右侧的距离
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
//设置Content的宽为屏幕的宽度
mContentWidth = mContent.getLayoutParams().width = mScreenWidth;
//测量Menu
measureChild(mMenu,widthMeasureSpec,heightMeasureSpec);
//测量Content
measureChild(mContent, widthMeasureSpec, heightMeasureSpec);
//测量自己，自己的宽度为Menu宽度加上Content宽度，高度为屏幕高度
setMeasuredDimension(mMenuWidth + mContentWidth, mScreenHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//摆放Menu的位置，根据上面图可以确定上下左右的坐标
mMenu.layout(-mMenuWidth, 0, 0, mScreenHeight);
//摆放Content的位置
mContent.layout(0, 0, mScreenWidth, mScreenHeight);
}

/**
* 将传进来的数转化为dp
*/
private int convertToDp(Context context , int num){
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,num,context.getResources().getDisplayMetrics());
}
}

<?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">
<ListView
android:id="@+id/menu_listview"
android:layout_width="wrap_content"
android:divider="@null"
android:dividerHeight="0dp"
android:scrollbars="none"
android:layout_height="wrap_content">
</ListView>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:id="@+id/menu_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu_1"
android:padding="20dp"
/>
<TextView
android:id="@+id/menu_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="菜单1"
android:textColor="#000000"
android:textSize="20sp"
/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="#000000"
android:gravity="center_vertical"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/menu_toggle"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/toggle"
android:paddingLeft="10dp"
/>
</LinearLayout>
<ListView
android:id="@+id/content_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="0dp"
android:divider="@null"
android:scrollbars="none"
/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="center_vertical"
android:background="#ffffff"
android:layout_height="match_parent">
<ImageView
android:id="@+id/content_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/content_1"
android:layout_margin="20dp"
/>
<TextView
android:id="@+id/content_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content - 1"
android:textColor="#000000"
android:textSize="20sp"/>
</LinearLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#aaaaaa"
>
<com.example.user.slidingmenu.MySlidingMenu
android:id="@+id/slidingmenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<include
android:id="@+id/menu"
layout="@layout/left_menu"
/>
<include
android:id="@+id/content"
layout="@layout/content"
/>
</com.example.user.slidingmenu.MySlidingMenu>
</RelativeLayout>

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action){
case MotionEvent.ACTION_DOWN:
mLastX = (int) event.getX();
mLastY = (int) event.getY();
break;
case MotionEvent.ACTION_MOVE:
int currentX = (int) event.getX();
int currentY = (int) event.getY();
//拿到x方向的偏移量
int dx = currentX - mLastX;
if (dx < 0){//向左滑动
//边界控制，如果Menu已经完全显示，再滑动的话
//Menu左侧就会出现白边了,进行边界控制
if (getScrollX() + Math.abs(dx) >= 0) {
//直接移动到（0，0）位置，不会出现白边
scrollTo(0, 0);
} else {//Menu没有完全显示呢
//其实这里dx还是-dx，大家不用刻意去记
//大家可以先使用dx，然后运行一下，发现
//移动的方向是相反的，那么果断这里加个负号就可以了
scrollBy(-dx, 0);
}
}else{//向右滑动
//边界控制，如果Content已经完全显示，再滑动的话
//Content右侧就会出现白边了，进行边界控制
if (getScrollX() - dx <= -mMenuWidth) {
//直接移动到（-mMenuWidth,0）位置，不会出现白边
scrollTo(-mMenuWidth, 0);
} else {//Content没有完全显示呢
//根据手指移动
scrollBy(-dx, 0);
}
}
mLastX = currentX;
mLastY = currentY;
break;
}
return true;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return true;
}

public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
...
mScroller = new Scroller(context);
...
}

@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()){
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}

case MotionEvent.ACTION_UP:
if (getScrollX() < -mMenuWidth / 2){//打开Menu
//调用startScroll方法，第一个参数是起始X坐标，第二个参数
//是起始Y坐标，第三个参数是X方向偏移量，第四个参数是Y方向偏移量
mScroller.startScroll(getScrollX(), 0, -mMenuWidth - getScrollX(), 0, 300);
//设置一个已经打开的标识，当实现点击开关自动打开关闭功能时会用到
isOpen = true;
//一定不要忘了调用这个方法重绘，否则没有动画效果
invalidate();
}else{//关闭Menu
//同上
mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0, 300);
isOpen = false;
invalidate();
}
break;

/**
* 点击开关，开闭Menu，如果当前menu已经打开，则关闭，如果当前menu已经关闭，则打开
*/
public void toggleMenu(){
if (isOpen){
closeMenu();
}else{
openMenu();
}
}
/**
* 关闭menu
*/
private void closeMenu() {
//也是使用startScroll方法，dx和dy的计算方法一样
mScroller.startScroll(getScrollX(),0,-getScrollX(),0,500);
invalidate();
isOpen = false;
}
/**
* 打开menu
*/
private void openMenu() {
mScroller.startScroll(getScrollX(),0,-mMenuWidth-getScrollX(),0,500);
invalidate();
isOpen = true;
}

mMenuToggle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mSlidingMenu.toggleMenu();
}
});

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean intercept = false;
int x = (int) ev.getX();
int y = (int) ev.getY();
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
intercept = false;
break;
case MotionEvent.ACTION_MOVE:
int deltaX = (int) ev.getX() - mLastXIntercept;
int deltaY = (int) ev.getY() - mLastYIntercept;
if (Math.abs(deltaX) > Math.abs(deltaY)){//横向滑动
intercept = true;
}else{//纵向滑动
intercept = false;
}
break;
case MotionEvent.ACTION_UP:
intercept = false;
break;
}
mLastX = x;
mLastY = y;
mLastXIntercept = x;
mLastYIntercept = y;
return intercept;
}

mMenu.setTranslationX(2*(mMenuWidth+getScrollX())/3);

scale = Math.abs((float)getScrollX()) / (float) mMenuWidth;

mMenu.setScaleX(0.7f + 0.3f*scale);
mMenu.setScaleY(0.7f + 0.3f*scale);

mMenu.setAlpha(scale);

mMenu.setTranslationX(mMenuWidth + getScrollX() - (mMenuWidth/2)*(1.0f-scale));

mContent.setScaleX(1 - 0.3f*scale);
mContent.setPivotX(0);
mContent.setScaleY(1.0f - 0.3f * scale);

private void slidingMode3(){
mMenu.setTranslationX(mMenuWidth + getScrollX() - (mMenuWidth/2)*(1.0f-scale));
mMenu.setScaleX(0.7f + 0.3f*scale);
mMenu.setScaleY(0.7f + 0.3f*scale);
mMenu.setAlpha(scale);

mContent.setScaleX(1 - 0.3f*scale);
mContent.setPivotX(0);
mContent.setScaleY(1.0f - 0.3f * scale);
}