android119 侧滑菜单

MainActivity.java

package com.heima52.slidemenu;

import com.heima52.slidemenu.view.SlideMenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
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);
        //setContentView(R.layout.XXX); 前设置requestWindowFeature(XXXX)。表示软件全屏显示且没有标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

<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" >

    <!-- 自定义子View, -->
    <com.heima52.slidemenu.view.SlideMenu
        android:id="@+id/slideMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 滑动左边的菜单界面的布局 -->
        <include layout="@layout/layout_menu"/>

        <!-- 右边的主界面的布局  -->
        <include layout="@layout/layout_main"/>

    </com.heima52.slidemenu.view.SlideMenu>

</RelativeLayout>

layout_main.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:background="#55666666"    666666是灰色背景色，55是透明度
    android:orientation="vertical" >

    <LinearLayout android:layout_width="match_parent"
        android:background="@drawable/top_bar_bg"
        android:gravity="center_vertical"
        android:layout_height="60dp">

        <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="15dp"
            android:text="黑马新闻"/>

    </LinearLayout>

    <TextView android:layout_width="match_parent"
        android:text="钓鱼岛是中国的..."
        android:textColor="#000000"
        android:textSize="30sp"
        android:gravity="center"
        android:layout_height="match_parent"/>

</LinearLayout>

layout_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- ScrollView可以滚动的，ScrollView必须且只有一个子view -->

<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:paddingBottom="300dp"
        android:orientation="vertical" >
        <!-- 很多样式都是一样的则抽取出一个样式：
            <style name="MenuTabText">
                <item name="android:layout_width">match_parent</item>
                <item name="android:layout_height">wrap_content</item>
                <item name="android:textColor">#ffffff</item>
                <item name="android:gravity">center_vertical</item>
                <item name="android:drawablePadding">15dp</item>
                <item name="android:padding">15dp</item>
                <item name="android:textSize">22sp</item>
            </style>
        -->
        <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>

自定义的侧滑菜单类SlideMenu.java

package com.heima52.slidemenu.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.FrameLayout;
import android.widget.Scroller;

//自定义的侧滑菜单类
public class SlideMenu extends FrameLayout{//FrameLayout extends ViewGroup，FrameLayout所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。
    private View menuView,mainView;//里面的2个子view,
    private int menuWidth = 0;
    private Scroller scroller;//滚动动画，不真正改变view的位置，
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public SlideMenu(Context context) {
        super(context);
        init();
    }

    private void init(){
        scroller = new Scroller(getContext());
    }

    /**
     * 加载完自定义的控件SlideMenu的xml后会执行,然后执行测量和onLayout方法，
     *
     * 当1级的子view全部加载完调用，可以用初始化子view的引用
     * 注意，这里无法获取子view的宽高
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        menuView = getChildAt(0);//一级子view,layout/layout_menu
        mainView = getChildAt(1);//二级子view,layout/layout_main
        menuWidth = menuView.getLayoutParams().width;
    }

    /**自定义的控件SlideMenu要调用测量方法才能绘制，里面调用子view的测量方法。
     * <com.heima52.slidemenu.view.SlideMenu
        android:id="@+id/slideMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >因为宽和高是match_parent，
     * 所以widthMeasureSpec和heightMeasureSpec是系统根据UI的写法测量SlideMenu时传入的参数，
     * 如果<com.heima52.slidemenu.view.SlideMenu/>的宽高是充满父窗体则会计算父窗体的宽高然后传给参数widthMeasureSpec和heightMeasureSpec，
     * 如果宽高是包裹内容则系统会计算子View的宽高然后赋给widthMeasureSpec和heightMeasureSpec。
     * 这2个参数测量出的宽高能让SlideMenu充满父窗体，其实是正好等于屏幕宽高
     */
//    @Override
//    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//
    //精确计算高度
//        int measureSpec = MeasureSpec.makeMeasureSpec(menuWidth, MeasureSpec.EXACTLY);
//
//        //测量所有子view的宽高
//        //通过getLayoutParams方法可以获取到布局文件中指定宽高
//        menuView.measure(measureSpec, heightMeasureSpec);
//        宽度通过getLayoutParams方法获得，由于高度是充满父窗体所以是heightMeasureSpec
//        menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec);
//        //直接使用SlideMenu的测量参数，因为它的宽高都是充满父窗体
//        mainView.measure(widthMeasureSpec, heightMeasureSpec);
//
//    }

    @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;
        }
        return super.onInterceptTouchEvent(ev);
//        return super.onInterceptTouchEvent(ev);
    }

    /**
     * FrameLayout的方法
     * 自定义的控件SlideMenu调用测量方法方法后要调用绘制方法才能显示，里面调用子view的绘制方法。
     *
     * 如果不重写这个方法，则2个子view就会叠加在一起。
     *
     * l: 当前子view的左边在父view的坐标系中的x坐标
     * t: 当前子view的顶边在父view的坐标系中的y坐标
     * b：控件底边的坐标
     * r: 控件右边的坐标
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
//        Log.e("MAIN", "L: "+l+"   t: "+t  +"  r: "+r  + "   b: "+b);
        //初始化的时候布局menuView隐藏，
        menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight());
        //初始化的时候布局mainView显示，
        mainView.layout(0, 0, r, b);//r传进来的是屏幕的宽，b传进来的是屏幕的高，因为自定义控件SlideMenu的宽高属性是填充父窗体。
    }

    private int downX;
    @Override
    //手指滑动。手指每次移动控件都会重绘一次。
    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();//手指现在的位置
            int deltaX = (int) ( moveX- downX);//手指滑动的距离
            //getScrollX()初始化是0，由于滑动的是控件的外层边框，所以外层边框应该向左滑动控件里面的内容才能向右移动。
            int newScrollX = getScrollX() - deltaX;
            //不能滑的太远
            if(newScrollX<-menuWidth) newScrollX = -menuWidth;
            if(newScrollX>0) newScrollX = 0;

            Log.e("Main", "scrollX: "+getScrollX());
            scrollTo(newScrollX, 0);//自定义控件整体的滑动到哪里，y是0不变。
            downX = moveX;
            break;
        case MotionEvent.ACTION_UP:
            //1.使用自定义动画
//            ScrollAnimation scrollAnimation;
//            if(getScrollX()>-menuWidth/2){            滑动的过程中getScrollX()一直为负
//                //关闭菜单
////            scrollTo(0, 0); 这个是瞬间移动
//                scrollAnimation = new ScrollAnimation(this, 0);//目标位置是0
//            }else {
//                //打开菜单
////            scrollTo(-menuWidth, 0);  这个是瞬间移动
//                scrollAnimation = new ScrollAnimation(this, -menuWidth);//目标位置是-menuWidth
//            }
//            startAnimation(scrollAnimation);
            //2.使用Scroller
            if(getScrollX()>-menuWidth/2){
//                //关闭菜单
                closeMenu();
            }else {
                //打开菜单
                openMenu();
            }
            break;
        }
        return true;
    }

    private void closeMenu(){
        scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 0, 400);//0-getScrollX()是偏移量，400是执行的时间。
        invalidate();
    }

    private void openMenu(){
        scroller.startScroll(getScrollX(), 0, -menuWidth-getScrollX(), 0, 400);
        invalidate();//上面是startScroll开始滚动，invalidate()方法会调用computeScroll()方法，里面的scrollTo是真正的滑动方法，里面再调用invalidate()方法是为了递归执行computeScroll()方法。
    }

    /**
     * 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){//没有滑动则getScrollX()==0，
            //需要打开
            openMenu();
        }else {
            //需要关闭
            closeMenu();
        }
    }

}

自定义滑动动画ScrollAnimation.java

package com.heima52.slidemenu.view;

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * 让指定view在一段时间内scrollTo到指定位置
 * 自定义滑动动画
 *
 */
public class ScrollAnimation extends Animation{

    private View view;
    private int targetScrollX;//终点位置
    private int startScrollX;//起点位置
    private int totalValue;//要移动的距离

    public ScrollAnimation(View view, int targetScrollX) {//targetScrollX是终点位置
        super();
        this.view = view;
        this.targetScrollX = targetScrollX;

        startScrollX = view.getScrollX();    //getScrollX()一直为负
        totalValue = this.targetScrollX - startScrollX;

        int time = Math.abs(totalValue);
        setDuration(time);//动画执行的时间，totalValue小则执行的时间小，totalValue大则执行的时间大。
    }

    /**
     * 在指定的时间内一直执行该方法，直到动画结束
     * interpolatedTime：0-1  标识动画执行的进度或者百分比
     * time :  0   - 0.5  - 0.7  -   1
     * value:  10  -  60  -  80  -  110
     * 当前的值 = 起始值 + 总的差值*interpolatedTime
     */
    @Override
    protected void applyTransformation(float interpolatedTime,Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        int currentScrollX = (int) (startScrollX + totalValue*interpolatedTime);//关闭时currentScrollX从-menuWidth/2到0，打开时currentScrollX从-menuWidth/2到-menuWidth。
        view.scrollTo(currentScrollX, 0);
    }
}

侧滑菜单---
github-SlidingMenu(类库)
    1.在ViewGroup中，让自己内容移动有以下几个方法：
       1.1修改：menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight());
       1.2offsetTopAndBottom(offset)和offsetLeftAndRight(offset);
       1.3scrollTo和scrollBy方法;
       注意：滚动的并不是viewgroup内容本身，而是它的矩形边框
          它是瞬间移动，

    2.在自定义ViewGroup中一般不需要去实现onMeasure,
      我们去实现系统已有的ViewGroup,比如FrameLayout,
      它会帮我们区实现onMeasure方法

    3.让view在一段时间内移动到某个位置
     a.使用自定义动画ScrollAnimation
     b.使用Scroller(模拟一个执行流程，)