前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一)
今天通过自定义View来实现这种功能。
代码如下:
SlideMenu.java
package com.jackie.slidemenu.view;
import android.content.Context;
import android.graphics.Canvas;
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 mMostRecentX; // 最后一次x轴的偏移量
private final int MENU_SCREEN = 0; // 菜单界面
private final int MAIN_SCREEN = 1; // 主界面
private int mCurrentScreen = MAIN_SCREEN; // 当前屏幕显示的是主界面
private Scroller mScroller;
private int touchSlop;
public SlideMenu(Context context, AttributeSet attrs) {
super(context, attrs);
mScroller = new Scroller(context);
touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureView(widthMeasureSpec, 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); // 主界面的宽和高和父控件viewgroup的宽高一样
}
@Override
protected void onLayout(boolean changed, 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);
}
@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 deltaX = mMostRecentX - moveX;
// 把最新的x轴偏移量赋值给成员变量
mMostRecentX = moveX;
// 得到x轴移动后的偏移量
int newScrollX = getScrollX() + deltaX;
if(newScrollX < -getChildAt(0).getWidth()) { // 当前屏幕x轴的偏移量超过了菜单的左边界
// 回到菜单的左边界位置
scrollTo(-getChildAt(0).getWidth(), 0);
} else if(newScrollX > 0) { // 超过了主界面的右边界
// 回到主界面的右边界
scrollTo(0, 0);
} else {
scrollBy(deltaX, 0);
}
break;
case MotionEvent.ACTION_UP:
int scrollX = getScrollX(); // x轴最新的偏移量
int menuXCenter = -getChildAt(0).getWidth() / 2; // 菜单x轴的中心点
if(scrollX > menuXCenter) { // 切换到主界面
mCurrentScreen = MAIN_SCREEN;
} else { // 切换到菜单界面
mCurrentScreen = MENU_SCREEN;
}
switchScreen();
break;
default:
break;
}
return true;
}
private void switchScreen() {
int scrollX = getScrollX(); // 当前x轴的偏移量
int dx = 0;
if(mCurrentScreen == MAIN_SCREEN) { // 切换到主界面
// scrollTo(0, 0);
dx = 0 - scrollX;
} else if(mCurrentScreen == MENU_SCREEN) { // 切换到菜单界面
// scrollTo(-getChildAt(0).getWidth(), 0);
dx = -getChildAt(0).getWidth() - scrollX;
}
mScroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx) * 5);
invalidate(); // invalidate -> drawChild -> child.draw -> computeScroll
}
@Override
public void computeScroll() {
if(mScroller.computeScrollOffset()) { // 判断是否正在模拟数据中, true 正在进行 false 数据模拟完毕
scrollTo(mScroller.getCurrX(), 0);
invalidate(); // 引起computeScroll的调用
}
}
public boolean isShowMenu() {
return mCurrentScreen == MENU_SCREEN;
}
public void hideMenu() {
mCurrentScreen = MAIN_SCREEN;
switchScreen();
}
public void showMenu() {
mCurrentScreen = MENU_SCREEN;
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);
}
}
MainActivity.java
package com.jackie.slidemenu;
import com.jackie.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.TextView;
import android.widget.Toast;
public class MainActivity extends Activity implements OnClickListener {
private SlideMenu mSlideMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 去除标题, 需要在setContentView之前调用
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mSlideMenu = (SlideMenu) findViewById(R.id.slidemenu);
findViewById(R.id.iv_slidemenu_main_back).setOnClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onClick(View v) {
if(mSlideMenu.isShowMenu()) {
mSlideMenu.hideMenu();
} else {
mSlideMenu.showMenu();
}
}
public void click(View v) {
TextView tv = (TextView) v;
Toast.makeText(this, tv.getText(), 0).show();
}
}
系列文章:
Android实现网易新闻客户端效果
Android实现网易新闻客户端侧滑菜单(1)
您可能感兴趣的文章:Android项目实战之仿网易新闻的页面(RecyclerView )Android实现仿网易新闻的顶部导航指示器Android实现仿网易新闻主界面设计Android实现网易新闻客户端首页效果Android实现类似网易新闻选项卡动态滑动效果Android 仿网易新闻客户端分类排序功能Android模拟实现网易新闻客户端Android实现网易新闻客户端侧滑菜单(1)Android组件DrawerLayout仿网易新闻v4.4侧滑菜单Android仿网易新闻图片详情下滑隐藏效果示例代码