150.自定义侧面滑动菜单

侧滑菜单通过继承ViewGroup中来实现

主布局文件activity_main.xml由2个布局文件组成，一个是侧滑一个是右边的主窗体

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.ldw.slide.SlideMenu
        android:id="@+id/slideMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 左侧菜单栏的布局 -->
        <include layout="@layout/layout_menu"/>
        <!-- 中间内容框的布局 -->
        <include layout="@layout/layout_window"/>
        </com.ldw.slide.SlideMenu>

</RelativeLayout>

layout_menu.xml菜单的页面

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:background="@drawable/menu_bg"
    android:orientation="vertical" >
    
	<LinearLayout 
	    android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:orientation="vertical"
    	android:paddingBottom="300dp"
	    >
	    <TextView 
	        style="@style/MenuTabText"
            android:background="#33aa9900"
            android:drawableLeft="@drawable/tab_news"
            android:text="新闻"/>
	    <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_read"
            android:text="订阅"/>
	    <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_ties"
            android:text="跟帖"/>
        <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_pics"
            android:text="图片"/>
        <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_ugc"
            android:text="话题"/>
        <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_vote"
            android:text="投票"/>
        <TextView 
            style="@style/MenuTabText"
            android:drawableLeft="@drawable/tab_focus"
            android:text="聚合阅读"/>
	</LinearLayout>
</ScrollView>

layout_window.xml主窗体的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
	<LinearLayout 
	    android:layout_width="match_parent"
	    android:background="@drawable/top_bar_bg"
    	android:layout_height="55dp"
    	android:gravity="center_vertical"
	    >
	    <ImageView 
	        android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_back"
            android:background="@drawable/main_back"/>
        
        <View 
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="@drawable/top_bar_divider"/>
        
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:textSize="22sp"
            android:layout_marginLeft="20dp"
            android:text="46k新闻"/>
	    
	</LinearLayout>
</LinearLayout>

主逻辑文件MainActivity.java

package com.ldw.slide;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private ImageView btn_back;
	private SlideMenu slideMenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //没有标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        btn_back = (ImageView) findViewById(R.id.btn_back);
		slideMenu = (SlideMenu) findViewById(R.id.slideMenu);
		//图标点击切换菜单的存在与否
		btn_back.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				slideMenu.switchMenu();
			}
		});
    }

}

菜单页面的逻辑文件SlideMenu.java滑动是使用继承FrameLayout实现的，FrameLayout,它会帮我们区实现onMeasure方法不用去实现onMeasure相关的业务文件

package com.ldw.slide;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.Scroller;

/*
 * 自定义布局
 */
public class SlideMenu extends FrameLayout {

	private View menuView, WindowView;
	private int menuWidth = 0;
	private Scroller scroller;
	public SlideMenu(Context context) {
		super(context);
		init();
	}

	public SlideMenu(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	
	//布局的初始化
	private void init(){
		scroller = new Scroller(getContext());
	}
	
	/**
	 * 当1级的子view全部加载完调用，可以用初始化子view的引用
	 * 注意，这里无法获取子view的宽高
	 */
	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		//获取activity_main布局中的第一个子view,layout_menu
		menuView = getChildAt(0);
		//获取activity_main布局中的第一个子view,layout_window
		WindowView = getChildAt(1);
		//menu的宽度
		menuWidth = menuView.getLayoutParams().width;
		
	}
	
	/*ViewGroup需要实现测量的方法来能布局
	//测量的方法，参数代表系统测量SlideMenu时传入的参数
	//参数测量出的宽高能让SlideMenu充满窗体，其实是正好等于屏幕宽高
	//viewGroup需要测量所有子view的宽高
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		//测量所有子view的宽高
		
		//通过getLayoutParams方法可以获取到布局文件中指定宽高,menuView中制定了宽高
		menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec);
		//直接使用SlideMenu的测量参数，因为它的宽高的布局都是充满父窗体
		WindowView.measure(widthMeasureSpec, heightMeasureSpec);
	}
	*/

	//测量完成以后需要显示，显示布局的文件
	//l: 当前子view的左边在父view的坐标系中的x坐标
	//t: 当前子view的顶边在父view的坐标系中的y坐标
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		//menu的l就是宽度的负数
		menuView.layout(-menuView.getLayoutParams().width, 0, 0, menuView.getMeasuredHeight());
		//主窗体的宽高是屏幕的宽高
		WindowView.layout(0, 0, r, b);

	}
	
	//触摸事件的传递机制，默认是不拦截的
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			downX = (int) ev.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			int deltaX = (int) ( ev.getX()- downX);
			//需要拦截
			if(Math.abs(deltaX)>8){
				return true;
			}
			break;
		}
		//派发给onTouchEvent处理
		return super.onInterceptTouchEvent(ev);
	}
	
	//获取左边menu移动的距离
	private int downX;
	//触摸事件
	public boolean onTouchEvent(MotionEvent event){
		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:
			downX = (int) event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			//记录新的坐标
			int moveX = (int) event.getX();
			//往右移动10
			int detaX = (int) (event.getX() - downX);
			//根据触摸事件，获取到滚动的x的位移
			int newScrollX = getScrollX() - detaX;
			//达到了边界
			if(newScrollX<-menuWidth) newScrollX = -menuWidth;
			if(newScrollX>0)newScrollX = 0;
			//改变位置
			scrollTo(newScrollX, 0);
			//更新x距离
			downX = moveX;
			break;
		case MotionEvent.ACTION_UP:
			if(getScrollX()>-menuWidth/2){
//				//关闭菜单
				closeMenu();
			}else {
				//打开菜单
				openMenu();
			}
			break;
		}
		return true;
	}
	
	//关闭窗体
	private void closeMenu(){
		//前两个是起始点的x,y坐标，后2个参数是结束点的坐标。最后一个参数是持续的时间
		scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 0, 400);
		invalidate();
	}
	
	//打开窗体
	private void openMenu(){
		scroller.startScroll(getScrollX(), 0, -menuWidth-getScrollX(), 0, 400);
		invalidate();
	}
	
	/**
	 * Scroller不主动去调用这个方法
	 * 而invalidate()可以掉这个方法
	 * invalidate->draw->computeScroll
	 */
	@Override
	public void computeScroll() {
		super.computeScroll();
		//动画没有结束的时候需要掉下面的方法
		if(scroller.computeScrollOffset()){//返回true,表示动画没结束
			scrollTo(scroller.getCurrX(), 0);
			invalidate();
		}
	}
	
	/**
	 * 按钮点击切换菜单的开和关
	 */
	public void switchMenu() {
		if(getScrollX()==0){
			//需要打开
			openMenu();
		}else {
			//需要关闭
			closeMenu();
		}
	}

}