他们控制的定义：滑动菜单
滑动面板张女士现在easy找到一个成熟的第三方框架，但是，我们自己做的事，写一些核心代码，帮助我们理解
1，简单的介绍
写一个类继承ViewGroup
复写下面三个方法
onMeasure -> onLayout -> onDraw
1。測量左面板和主面板
左面板宽是指定的值240, 高度是屏幕高度
主面板宽高就是屏幕的宽高
2，摆放两个子控件
左面板的位置: 当前屏幕左边界0, 往左-240
主面板位置 : 当前控件的位置
3。处理触摸事件 (左右移动两个控件)
按下时, 获取按下的坐标downX = 20
移动时,
获取当前最新x坐标 moveX = 30计算要运行的偏移量 - (30 - 20) = -10让偏移生效scrollBy(-10, 0)moveX 赋值给 downX, 作为新的按下点抬起时, 依据当前偏移位置, 运行动画 (运行平滑动画)
二，核心代码
/**
* 側滑面板
* @author poplar
*
*/
public class SlideMenu extends ViewGroup {
private final int MAIN_CONTENT = 0; // 主面板状态
private final int MENU_CONTENT = 1; // 左菜单状态
int currentState = MAIN_CONTENT; // 当前状态
private Scroller scroller;
private int downX; // 按下的X值坐标
private int downY; // 按下的Y值坐标
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());
// startX, x轴从什么位置開始滚动 -100
// startY, y轴从什么位置開始滚动
// dx, 从開始位置 到 目标位置的 偏移量 -100 -> 50
// 偏移量 150 = (50 - (-100))
// 偏移量 = (目标位置 x) - (開始位置x)
// dy,
// duration , 动画运行时长 dx * 10
// scroller.startScroll(startX, startY, dx, dy, duration);
}
/**
* 測量子控件
* widthMeasureSpec : 当前控件的宽度属性
* heightMeasureSpec : 当前控件的高度属性
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 获取到左面板
View leftMenu = getChildAt(0);
// 宽度自身宽度, 高度屏幕的高度
leftMenu.measure(leftMenu.getLayoutParams().width, heightMeasureSpec);
// 測量主面板
View main = getChildAt(1);
main.measure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 摆放两个子控件
*
* left 控件左边界位置
* top 控件上边界位置
* right 控件右边界位置
* bottom 控件下边界位置
*
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// 摆放左面板
View leftMenu = getChildAt(0);
leftMenu.layout(0 - leftMenu.getMeasuredWidth(), 0, 0, b);
// 摆放主面板
View main = getChildAt(1);
main.layout(l, t, r, b);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 按下时的x坐标
downX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
// 移动后的x坐标
int moveX = (int) event.getX();
// 变化量
int scrollX = - (moveX - downX);
// ------------------------------------------------- 重点 ↓
// 计算变化后的位置
int newScrollX = getScrollX() + scrollX;
int leftLimit = -getChildAt(0).getMeasuredWidth();
if(newScrollX < leftLimit){
// < -240
scrollTo(leftLimit, 0);
} else if (newScrollX > 0) {
// >0 限定右边界
scrollTo(0, 0);
} else {
// 让变化量生效
scrollBy(scrollX, 0);
}
// ------------------------------------------------- 以上 ↑
//把上一个moveX赋值给downX
downX = moveX;
break;
case MotionEvent.ACTION_UP:
// 抬起时, 依据当前偏移位置, 运行动画
int leftMenuCenter = - getChildAt(0).getMeasuredWidth() / 2;
int currentScrollX = getScrollX();
System.out.println("currentScrollX: " + currentScrollX);
System.out.println("leftMenuCenter: " + leftMenuCenter);
if(currentScrollX > leftMenuCenter){
// 假设当前滚动的位置在一半的右边 , 显示主面板 , scrollX > leftMenuCenter
currentState = MAIN_CONTENT;
System.out.println("运行显示主面板动画");
updateCurrentContent();
}else {
// 假设当前滚动的位置在一半的左边 , 显示左菜单 , scrollX <= leftMenuCenter
currentState = MENU_CONTENT;
System.out.println("运行显示左菜单动画");
updateCurrentContent();
}
break;
default:
break;
}
return true;
}
private void updateCurrentContent() {
int scrollX = getScrollX();
int dx = 0;
if(currentState == MAIN_CONTENT){
// 运行动画,显示主面板
// scrollTo(0, 0);
// 目标值 - 当前值
dx = 0 - scrollX;
} else if(currentState == MENU_CONTENT){
// 运行动画,显示左菜单
// scrollTo(- getChildAt(0).getMeasuredWidth(), 0);
// 目标值 - 当前值
// - 240 -
dx = -getChildAt(0).getMeasuredWidth() - scrollX;
System.out.println("dx: " + dx + " scrollX: " + scrollX);
}
// ------------------------------------------------- 重点 ↓
// 開始模拟数据
scroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx * 10));
// -100 -> -240 >> -150
// 使scroller模拟的数据生效
invalidate(); // drawChild -> child.draw( -> computeScroll
// ------------------------------------------------- 以上 ↑
}
// ------------------------------------------------- 重点 ↓
@Override
public void computeScroll() {
if(scroller.computeScrollOffset()){
// 动画还没运行完
// 得到当前模拟的数值
int currX = scroller.getCurrX();
scrollTo(currX, 0);
// System.out.println("currX: " + currX);
// 重绘界面, 递归调用
invalidate();
}
}
// ------------------------------------------------- 以上 ↑
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// 仅仅有在用户水平滑动的时候才拦截
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) ev.getX();
downY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
int moveX = (int) ev.getX();
int moveY = (int) ev.getY();
int diffX = Math.abs(moveX - downX);
int diffY = Math.abs(moveY - downY);
if(diffX > diffY && diffX > 10){
return true;
}
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return super.onInterceptTouchEvent(ev);
}
}
版权声明：本文博主原创文章，博客，未经同意不得转载。
