侧滑菜单在项目中大量应用,我们一般会用SlidingMenu或者DrawLayout,今天就让我们走进自定义侧滑的世界,仿照酷狗音乐的侧滑来做。
1.类的创建和自定义属性
类继承HorizontalScrollView,自定义属性都会,就直接上代码
<resources>
<declare-styleable name="KGSlidingMenu">
<attr name="menuRightMargin" format="dimension"/>
</declare-styleable>
</resources>
public class KGSlidingMenu extends HorizontalScrollView {
private Context mContext;
private int mMenuWidth;
public KGSlidingMenu(Context context) {
this(context, null);
}
public KGSlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public KGSlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext=context;
//初始化自定义属性
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.KGSlidingMenu);
float rightMargin = typedArray.getDimension(R.styleable.KGSlidingMenu_menuRightMargin, ScreenUtils.dip2px(mContext, 50));
//菜单页的宽度 是 屏幕的宽度减右边一部分的距离
mMenuWidth= (int) (ScreenUtils.getScreenWidth(mContext)-rightMargin);
typedArray.recycle();
} }
2.onFinishInflate() 方法调用,来设置宽度问题
onFinishInflate();方法是在xml解析之后调用,在Activity的onCreate()中调用,获取子view,设置宽度
//获取子view 相当于LinearLayout
ViewGroup viewGroup=(ViewGroup) getChildAt(0);
int childCount = viewGroup.getChildCount();
//只能有两个子view
if (childCount!=2){
throw new RuntimeException("只能放置两个子View");
}
//菜单页的宽度 是 屏幕的宽度减右边一部分的距离
mMenuView= viewGroup.getChildAt(0);
ViewGroup.LayoutParams menuParams = mMenuView.getLayoutParams();
menuParams.width=mMenuWidth;
//7.0以下手机 必须添加这句
mMenuView.setLayoutParams(menuParams);
//内容页的宽度 屏幕的宽度
mContentView= viewGroup.getChildAt(1);
ViewGroup.LayoutParams contentParams = mContentView.getLayoutParams();
contentParams.width=ScreenUtils.getScreenWidth(getContext());
mContentView.setLayoutParams(contentParams);
}
3.onLayout()方法,初始化设置
onLayout()方法是在Activity的onResume()中调用
/**
* 初始化是关闭的
* @param changed
* @param l
* @param t
* @param r
* @param b
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
// 用来排放子布局的 等子View全部拜访完才能去滚动
scrollTo(mMenuWidth,0);
}
4.触摸事件onTouchEvent(),设置打开和关闭
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_UP:
int currentScrollX= getScrollX();
if (currentScrollX>mMenuWidth/2){
//关闭
closeMenu();
}else {
//打开
openMenu();
}
break;
}
return true;
}
/**
* 打开菜单
*
* smoothScrollTo() 有动画的滚动
*/
private void openMenu() {
smoothScrollTo(0,0);
}
/**
* 关闭菜单
*/
private void closeMenu() {
smoothScrollTo(mMenuWidth,0);
}
5.onScrollChanged()可以实时获取坐标位置,来完成缩放和透明度变化
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
float scale=1f*l/mMenuWidth;
//右边的缩放
float rightScale=0.7f+0.3f*scale;
//设置右边的缩放
ViewCompat.setPivotX(mContentView,0);
ViewCompat.setScaleY(mContentView,mContentView.getMeasuredHeight()/2);
ViewCompat.setScaleX(mContentView,rightScale);
ViewCompat.setScaleY(mContentView,rightScale);
//菜单的缩放和透明度
//透明度 半透明到完全透明
float alpha=0.7f+(1-scale)*0.3f;
ViewCompat.setAlpha(mMenuView,alpha);
//缩放 0.7f -1.0f
float leftScale=0.7f+(1-scale)*0.3f;
ViewCompat.setScaleX(mMenuView,leftScale);
ViewCompat.setScaleY(mMenuView,leftScale);
//退出按钮刚 开始在右边,划出时出字的变化
//设置平移 平移l*0.1f
ViewCompat.setTranslationX(mMenuView,0.25f*l);
}
6.手势处理类GestureDetector,解决快速滑动
创建对象
mGestureDetector=new GestureDetector(mContext,mGestureListener);
监听的实现
private class GestureDetectorListener implements GestureDetector.OnGestureListener {
@Override
public boolean onDown(MotionEvent e) {
// 按下
return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;// 单击
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return false;// 滚动
}
@Override
public void onLongPress(MotionEvent e) {
// 长安
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// 快速滑动
return false;
}
}
我们只需要快速滑动方法,所以可以实现下面监听
private GestureDetector.OnGestureListener mGestureListener=new GestureDetector.SimpleOnGestureListener(
){
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//只关注 快速滑动
//打开时往右边快速滑动 关闭的时候往左边快速滑动
if (mMenuIsOpen){
//打开时往右边快速滑动(关闭)
if (velocityX<0){
closeMenu();
return true;
}
}else {
// 关闭的时候往左边快速滑动(打开)
if (velocityX>0){
openMenu();
return true;
}
}
return super.onFling(e1, e2, velocityX, velocityY);
}
};
定义字段标记是否是打开
private boolean mMenuIsOpen=false;
在openMenu() 和closeMenu()中设置标记值
因为onTouchEvent()和onFling()方法不能重复走所以,在onTouchEvent()中
if (mGestureDetector.onTouchEvent(ev)){
//快速滑动触发了,下面就不要走
return true;
};
6.onInterceptTouchEvent()拦截事件的处理,菜单打开时点击右边关闭菜单
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
mIsIntercept=false;
if (mMenuIsOpen){
float currentX=ev.getX();
if (currentX>mMenuWidth){
//关闭菜单
closeMenu();
//子view不需要相应任何事件,拦截子view的事件
mIsIntercept=true;
return true;
}
}
return super.onInterceptTouchEvent(ev);
}
在onTouchEvent()中也要做相应处理
if (mIsIntercept){
return true;
}