Android侧拉菜单实现

本文采用自定义控件实现Android侧拉效果，首先建一个工程名字就叫做Sliding。

修改MainActivity

public class MainActivity extends Activity implements OnClickListener{

private SlideMenu sm;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

sm = (SlideMenu) findViewById(R.id.sm);
findViewById(R.id.ib_back).setOnClickListener(this);

}

public void onTabClick(View view){

}

@Override
public void onClick(View v) {
sm.switchState();
}

}

建一个SlideMenu

/**
* 侧滑面板控件, 抽屉面板.
* @author poplar
*
*   测量             摆放     绘制
measure   ->  layout  ->  draw
|           |          |
onMeasure -> onLayout -> onDraw 重写这些方法, 实现自定义控件

View流程
onMeasure() (在这个方法里指定自己的宽高) -> onDraw() (绘制自己的内容)

ViewGroup流程
onMeasure() (指定自己的宽高, 所有子View的宽高)-> onLayout() (摆放所有子View) -> onDraw() (绘制内容)
*
*/
public class SlideMenu extends ViewGroup {

private float downX; // 按下的x坐标
private float downY; // 按下的y坐标
private float moveX;
public static final int MAIN_STATE = 0;
public static final int MENU_STATE = 1;
private int currentState = MAIN_STATE; // 当前模式
private Scroller scroller;

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

public SlideMenu(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public SlideMenu(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
// 初始化滚动器, 数值模拟器
scroller = new Scroller(getContext());
}

/**
* 测量并设置 所有子View的宽高
* widthMeasureSpec: 当前控件的宽度测量规则
* heightMeasureSpec: 当前控件的高度测量规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

// 指定左面板的宽高
View leftMenu = getChildAt(0);
leftMenu.measure(leftMenu.getLayoutParams().width, heightMeasureSpec);

// 指定主面板的宽高
View mainContent = getChildAt(1);
mainContent.measure(widthMeasureSpec, heightMeasureSpec);

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
* changed: 当前控件的尺寸大小, 位置 是否发生了变化
* left:当前控件 左边距
* top:当前控件 顶边距
* right:当前控件 右边界
* bottom:当前控件 下边界
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

// 摆放内容, 左面板
View leftMenu = getChildAt(0);
leftMenu.layout(-leftMenu.getMeasuredWidth(), 0, 0, b);

// 主面板
getChildAt(1).layout(l, t, r, b);
}

/**
* 处理触摸事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
moveX = event.getX();

// 将要发生的偏移量/变化量
int scrollX = (int) (downX - moveX);

// 计算将要滚动到的位置, 判断是否会超出去, 超出去了.不执行scrollBy
// getScrollX() 当前滚动到的位置
int newScrollPosition = getScrollX() + scrollX;

if (newScrollPosition < -getChildAt(0).getMeasuredWidth()){ // 限定左边界
// < -240
scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
} else if (newScrollPosition > 0){ // 限定右边界
// > 0
scrollTo(0, 0);
} else {
// 让变化量生效
scrollBy(scrollX, 0);
}

downX = moveX;

break;
case MotionEvent.ACTION_UP:
// 根据当前滚动到的位置, 和左面板的一半进行比较
int leftCenter = (int) (- getChildAt(0).getMeasuredWidth() / 2.0f);

if(getScrollX() < leftCenter){
// 打开, 切换成菜单面板
currentState = MENU_STATE;
updateCurrentContent();
}else {
// 关闭, 切换成主面板
currentState = MAIN_STATE;
updateCurrentContent();
}

break;
default:
break;
}

return true; // 消费事件
}

/**
* 根据当前的状态, 执行 关闭/开启 的动画
*/
private void updateCurrentContent() {
int startX = getScrollX();
int dx = 0;
// 平滑滚动
if(currentState == MENU_STATE){
// 打开菜单
//          scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
//          dx = 结束位置(-240) - 开始位置(-200) = -40
//          dx = 0 - (-10) = 10

dx = -getChildAt(0).getMeasuredWidth() - startX;

} else {
// 恢复主界面
//          scrollTo(0, 0);

dx = 0 - startX;
}

// startX: 开始的x值
// startY: 开始的y值
// dx: 将要发生的水平变化量. 移动的x距离
// dy: 将要发生的竖直变化量. 移动的y距离
// duration : 数据模拟持续的时长

// 1. 开始平滑的数据模拟
int duration = Math.abs(dx * 2); // 0 -> 1200
scroller.startScroll(startX, 0, dx, 0, duration);

//      - 200 -> -240
//      - 201 -> -202 -> -203 .... -236 -> -240

invalidate();// 重绘界面 -> drawChild() -> computeScroll();
}

//2. 维持动画的继续
@Override
public void computeScroll() {
super.computeScroll();
if(scroller.computeScrollOffset()){ // 直到duration事件以后, 结束
// true, 动画还没有结束
// 获取当前模拟的数据, 也就是要滚动到的位置
int currX = scroller.getCurrX();
System.out.println("currX: " + currX);
scrollTo(currX, 0); // 滚过去

invalidate(); // 重绘界面-> drawChild() -> computeScroll();循环
}
}

public void open(){
currentState = MENU_STATE;
updateCurrentContent();
}
public void close(){
currentState = MAIN_STATE;
updateCurrentContent();
}

public void switchState(){
if(currentState == MAIN_STATE){
open();
}else {
close();
}
}

public int getCurrentState(){
return currentState;
}

/**
* 拦截判断
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {

switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();
downY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:

float xOffset = Math.abs(ev.getX() - downX);
float yOffset = Math.abs(ev.getY() - downY);

if(xOffset > yOffset && xOffset > 5){ // 水平方向超出一定距离时,才拦截
return true; // 拦截此次触摸事件, 界面的滚动
}

break;
case MotionEvent.ACTION_UP:

break;

default:
break;
}
return super.onInterceptTouchEvent(ev);
}

}

然后是几个布局，修改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" >

<com.mengxin.sliding.ui.SlideMenu
android:id="@+id/sm"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<include layout="@layout/layout_left_menu"/>

<include layout="@layout/layout_main_content"/>"

</com.mengxin.sliding.ui.SlideMenu>

</RelativeLayout>

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

<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:background="@drawable/menu_bg"
android:orientation="vertical" >

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_news"
android:text="新闻" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_read"
android:text="订阅" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_local"
android:text="本地" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_ties"
android:text="跟帖" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_pics"
android:text="图片" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_ugc"
android:text="话题" />

<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_vote"
android:text="投票" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_focus"
android:text="聚合阅读" />

</LinearLayout>

</ScrollView>

layout_main_content.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="#FFF"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/top_bar_bg"
android:orientation="horizontal" >

<ImageButton
android:id="@+id/ib_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:src="@drawable/main_back" />

<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@drawable/top_bar_divider" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:text="黑马新闻"
android:textColor="#FFF"
android:textSize="24sp" />
</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="钓鱼岛是中国的! 苍老师才是世界的."
android:textSize="26dp" />

</LinearLayout>

在drawable下建一个选择器selector_menu_bt_bg.xml

<?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/bt_bg_pressed"></item>

<item android:drawable="@android:color/transparent"/>

</selector>

再改下样式，color，具体看源代码