仿网易菜单 实现侧滑 SlidingMenu

　　不知不觉已经工作一个月了，时间过的真快，提早一年步入社会，心里感触还是挺大了，所有的一切都没有了在学校的那种感觉  .....

　　废话不多说，在公司做android的时候用到这个侧滑，公司里用的是开源框架，SlidingMenu,自己也尝试着去引用，感觉自己基础不好，实现起来十分费劲。

无意之中，发现黑马老师的视频里有这个就听了下，基本照写了一遍，代码就放在这里，方便自己查看，复习，也方便像我这样的android小白，来研究学习。

主界面：

package com.tai.dandelion;

import com.tai.dandelion.view.SlideMenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener
{
    private SlideMenu viewGroup;//这就是下面自定义ViewGroup
    private ImageView slidingmenu;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //去除标题 一定要在setContentView之前
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        viewGroup = (SlideMenu) findViewById(R.id.slidmenu);
        slidingmenu = (ImageView) findViewById(R.id.iv_slidmenu_back);
        slidingmenu.setOnClickListener(this);
    }
    @Override
    public void onClick(View v)
    {
        switch (v.getId())
        {
        case R.id.iv_slidmenu_back:
            if(viewGroup.isShow())
            {
                viewGroup.showMenu();
            }
            else
            {
                viewGroup.hideMenu();
            }
            break;
        default:
            break;
        }
    }
@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
    
    if (keyCode == KeyEvent.KEYCODE_MENU)
    {
        if(viewGroup.isShow())
        {
            viewGroup.showMenu();
        }
        else
        {
            viewGroup.hideMenu();
        }
        return true;
    }
    return super.onKeyDown(keyCode, event);
}
//菜单的点击事件，在与布局文件中对应，这里的方法名与xml中的方法名对应。
public void click(View v)
{
    TextView tv = (TextView) v;
    Toast.makeText(this, tv.getText(), Toast.LENGTH_SHORT).show();
}


}

侧滑菜单:ViewGroup

package com.tai.dandelion.view;

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

public class SlideMenu extends ViewGroup
{
    private int touchSlop;
    public SlideMenu(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mScroller = new Scroller(context);
        //startX, startY, dx, dy,duration
        //滑动间距的距离 默认为8
        touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }
    
    //测量出所有子布局的宽和高
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            //这个super必须要重写的
            measureView(widthMeasureSpec,heightMeasureSpec);
        }
    /**
     * int widthMeasureSpec, int heightMeasureSpec
     * @param widthMeasureSpec 父布局的测量
     * @param heightMeasureSpec
     */
    private void measureView(int widthMeasureSpec, int heightMeasureSpec)
    {
        //测量菜单布局
        View menuView = getChildAt(0);
        menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec);
        //测量主界面的布局
        View mainView  = getChildAt(1);
        mainView.measure(widthMeasureSpec, heightMeasureSpec);
                
    }
    //设置菜单和主界面的布局
    @Override
    protected void onLayout(boolean chenged, int l, int t, int r, int b)
    {
        //布置菜单的位置
        View menuView = getChildAt(0);
        //得到测量之后的边长
        menuView.layout(-menuView.getMeasuredWidth(), 0, 0, b);
        //布置主界面的位置
        View mainView =getChildAt(1);
        
        mainView.layout(0, 0, r, b);
        
    }
    private int mMostRecentX;//最后一次的X轴偏移量
    private int MenuScreen = 0;//菜单页面
    private int MainScreen = 1;//主界面
    private int mCurrentScreen = MainScreen;//当前屏幕的主界面
    //定义数据模拟器 来动态模拟数据的增量
    private Scroller mScroller;
    
    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        switch (event.getAction())
        {
        case MotionEvent.ACTION_DOWN:
            mMostRecentX = (int) event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            //最新的X轴偏移量
            int moveX = (int) event.getX();
            //增量值
            int detaX  = mMostRecentX - moveX;
            //把最新的X轴偏移量赋值给最后一次的X轴偏移量
            mMostRecentX = moveX;
            
            //得到X轴移动后的偏移量
            int newScrolLX = (int) (getScrollX() + detaX);
            //当前X轴的偏移量超过了菜单的边界
            if(newScrolLX<-getChildAt(0).getWidth())
            {
                //回到菜单的左边界
                scrollTo(-getChildAt(0).getWidth(), 0);
            }
            else if(newScrolLX>0)
            {
                //回到主界面的左边界
                scrollTo(0, 0);
            }
            else
            {
                scrollBy(detaX, 0);
            }
            break;
        case MotionEvent.ACTION_UP :
            //最新的X轴偏移量
            int scrollX = (int) getScrollX();
            //菜单的中心X轴
            int menuXCenter = -getChildAt(0).getWidth()/2;
            if(scrollX>menuXCenter)
            {//切换到主界面
                mCurrentScreen = MainScreen;
            }
            else
            {//切换到菜单界面
                mCurrentScreen = MenuScreen;
            }
            switchScreen();
            break;
        default:
            break;
        }
        
        return true;
    }
    
    private void switchScreen()
    {
        int scrollX = getScrollX();
        int dx = 0;
        if(mCurrentScreen == MainScreen)
        {//切换到主界面
//            scrollTo(0, 0);
            dx = 0-scrollX;
        }
        else if(mCurrentScreen == MenuScreen)
        {//切换到菜单界面
//            scrollTo(-getChildAt(0).getWidth(), 0);
            dx = -getChildAt(0).getWidth()-scrollX;
        }
        mScroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx)*3);
        
        invalidate();//invalidate --> drawChild -->chlid.draw -->computerScroll
    }
    @Override
    public void computeScroll()
    {
        //invaliadate调用此方法，更新X轴的偏移量
        if(mScroller.computeScrollOffset()) //判断是否正在模拟数据中，true 正在进行
        {
            scrollTo(mScroller.getCurrX(), 0);
            
            invalidate();//引起computeScroll的调用
        }
    }
    //时候显示菜单
    public boolean isShow()
    {
        return mCurrentScreen == MainScreen;
    }
    
    public void hideMenu()
    {
        mCurrentScreen = MainScreen;
        switchScreen();
    }
    
    public void showMenu()
    {
        mCurrentScreen = MenuScreen;
        switchScreen();
    }
    /**
     * 拦截事件的方法
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev)
    {
        switch (ev.getAction())
        {
        case MotionEvent.ACTION_DOWN:
            mMostRecentX = (int) ev.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            int diffX = (int) (ev.getX() - mMostRecentX);
            if(Math.abs(diffX)>touchSlop)
            {
                return true;
            }
            break;
        default:
            break;
        }
        return super.onInterceptTouchEvent(ev);
    }
}

主要的核心方法：Scrollto、ScrollBy  

invalidate();//invalidate --> drawChild -->chlid.draw -->computerScroll 这里比较复杂，大家可以查阅一下有关资料

布局文件：

<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.tai.dandelion.view.SlideMenu
        android:id="@+id/slidmenu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
       <include layout="@layout/slidemenu_menu"/>
       <include layout="@layout/mian"/> 
    </com.tai.dandelion.view.SlideMenu>
        

</RelativeLayout>

非android原生控件定义的时候要写上自定义类的全名  

 com.tai.dandelion.view.SlideMenu

 侧滑主界面

<?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="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/top_bar_bg">
        <ImageView 
            android:id="@+id/iv_slidmenu_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/main_back"
            />
        <View android:layout_width="1dip"
            android:layout_height="fill_parent"
            android:background="@drawable/top_bar_divider"
            android:layout_margin="5dip"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="55dip"
            android:text="title"
            android:textSize="26sp"
            android:textColor="@android:color/white"/>
    </LinearLayout>

    
    
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="内容"
        android:gravity="center"
        android:textColor="#ff0000"
        android:textSize="26sp"/>
    
    
    
    
</LinearLayout>

侧滑隐藏菜单

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dip"
    android:layout_height="match_parent" >
<!-- ScrollView只允许有一个子控件 -->
    <LinearLayout
        android:layout_width="240dip"
        android:background="@drawable/menu_bg"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <TextView 
            style="@style/menu_style"
            android:text="新闻"
            android:drawableLeft="@drawable/tab_news"
            />
         <TextView 
            style="@style/menu_style"
            android:text="订阅"
            android:drawableLeft="@drawable/tab_read"
            />
         <TextView 
            style="@style/menu_style"
            android:text="菜单"
            android:drawableLeft="@drawable/tab_pics"
            />
         <TextView 
            style="@style/menu_style"
            android:text="本地"
            android:drawableLeft="@drawable/tab_local"
            />
         <TextView 
            style="@style/menu_style"
            android:text="跟帖"
            android:drawableLeft="@drawable/tab_ties"
            />
         <TextView 
            style="@style/menu_style"
            android:text="投票"
            android:drawableLeft="@drawable/tab_vote"
            />
         <TextView 
            style="@style/menu_style"
            android:text="聚合阅读"
            android:drawableLeft="@drawable/tab_focus"
            />
    </LinearLayout>
    

</ScrollView>

style中的菜单的样式：

 <style name="menu_style">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:paddingTop">10dip</item>
        <item name="android:paddingBottom">10dip</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:background">@drawable/text_bg</item>
        <item name="android:textSize">23sp</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingLeft">15dip</item>
        <item name="android:drawablePadding">30dip</item>
        <item name="android:clickable">true</item>
        <item name="android:onClick">click</item>
    </style>

菜单项的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@color/press"></item>
    <item android:state_pressed="false" android:drawable="@color/pressed"></item>
</selector>

Manifast中Activity的声明就这里就不贴了。别的基本没什么。代码就在这里，有用的到的朋友可以研究一下。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　整理By      android小白。

最终效果：