Android仿酷狗音乐自定义侧滑菜单控件简单实现

随着Android的不断成熟,许多绚丽的效果也在不断的被大家开发出来,其中侧滑的效果用到的项目很多,用的好的更是给吸引了很多用户。国内像QQ和酷狗App的侧滑就很给力,所以查了一些资料,并结合ViewDragHelper辅助类,做了一种比较简单的侧滑实现方式。

学习Android的同学注意了!!!

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Android学习交流群,群号码:364595326  我们一起学Android!

一、实现效果图

实现的效果基本跟酷狗App差不多,因为就是仿造酷狗的~~

二、实现原理

SlideLayout控件使用的是ViewDragHelper辅助类来实现的。ViewDragHelper是一个实现View的拖拽的神器,它把View的拖拽操作变得特别的简单,不熟悉ViewDragHelper的同学请先上传送门

要实现拖拽,首先需要将SlideLayout和ViewDragHelper关联起来,然后将SlideLayout的事件交给ViewDragHelper来处理,然后在ViewDragHelper提供的回调里就可以对View进行各种操作。不过拖拽的原理都是差不多的,通过水平或者竖直的移动ViewGroup,然后不断的layout和invalidate进行重绘显示。

在滑动的过程中,除了要不断的计算滑动的位置和重绘界面,还需要对子容器进行不同的动画操作,这里使用的是ViewHelper类对View做平移缩放和渐变等动画。

另外还使用枚举来记录SlideLayout侧滑的状态,包括关闭,打开和正在滑动。并且提供PanelSlideListener监听滑动的状态。这样就可以根据不同的状态做不同的操作。比如手动打开侧滑,关闭侧滑等等。

三、逻辑分析

这个项目实现的逻辑其实并不难,只需要计算出ViewGroup滑动的位置,然后重绘就行,其次还需要计算控件缩放和拉伸的比例等等。当然对各种View的操作方法还是要比较熟悉,不然搞不明白有些逻辑要做这里做。

1. SlideLayout应该作为一个控件容器来包容两个子容器,一个菜单容器,一个主容器,首先我们需要获取SlideLayout容器的宽高和两个子容器对象

在View的onSizeChanged()方法里获取SlideLayout的宽高,此时控件已经测量完成

/**

* 当控件的宽高发生变化时会回调这个方法,可以用来测量控件的宽高

*

* @param w

* @param h

* @param oldw

* @param oldh

*/

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mSlideHeight = getMeasuredHeight();

mSlideWidth = getMeasuredWidth();

/**

* 初始化拖动的范围

* 默认为屏幕宽度的60%

*/

mSlideRange = (int) (mSlideWidth * mRangePercent);

}

在View的onFinishInflate()方法里可以获取容器对象,此时布局已经填充

/**

* 当View填充结束时会调用这个方法,可以获取子View对象

*/

@Override

protected void onFinishInflate() {

super.onFinishInflate();

if (getChildCount() < 2) {

throw new IllegalStateException("SlideLayout控件的子View必须大于2个");

}

if (!((getChildAt(0) instanceof ViewGroup) && (getChildAt(1) instanceof ViewGroup))) {

throw new IllegalArgumentException("SlideLayout控件的子View必须是ViewGroup");

}

mMenuContainer = (ViewGroup) getChildAt(0);

mMainContainer = (ViewGroup) getChildAt(1);

}

2. 获取到了需要的属性和对象之后,就可以将SlideLayout和ViewDragHelper进行绑定

首先在控件的构造里创建ViewDragHelper对象,创建完之后会有一个回调,而我们对View的各种操作就是在回调的各种方法里进行的

/** View的滑动的辅助类,在回调里监听View的各种操作

* @param forParent 要进行触摸滑动的父控件

* @param sensitivity 控件滑动的速度,敏感度,1.0f正常

* @param cb  对View的事件发生改变的回调

*/

mDragHelper = ViewDragHelper.create(this, 1.0f, mViewCallback);

创建对象之后,如果此时就对View进行操作是没有效果的,因为还需要把SlideLayout的处理事件传递给ViewDragHelper

/**

* 转交拦截事件给辅助类

*

* @param ev

* @return

*/

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

final int action = MotionEventCompat.getActionMasked(ev);

if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {

mDragHelper.cancel();

return false;

}

return mDragHelper.shouldInterceptTouchEvent(ev);

}

/**

* 转交触摸事件给辅助类

*

* @param event

* @return

*/

@Override

public boolean onTouchEvent(MotionEvent event) {

try {

mDragHelper.processTouchEvent(event);

} catch (Exception e) {

e.printStackTrace();

}

return true;

}

最重要的地方就是ViewDragHelper的回调了,里面有很多方法,每一个都很重要,这里列举一个对容器的滑动处理方法onViewPositionChanged()。其实逻辑也是比较简单,就是判断当前滑动的是哪一个容器,计算容器的左边界值,然后对容器进行重绘

/**

* 当子View的位置发送改变时回调

* @param changedView 改变的子View

* @param left 距离左边界距离

* @param top 距离顶部距离

* @param dx 水平滑动距离差

* @param dy 竖直滑动距离差

*/

@Override

public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {

/**

* 将菜单面板的移动量给主面板

*/

if (changedView == mMenuContainer) {

mMenuContainer.layout(0, 0, mSlideWidth, mSlideHeight);

int newLeft = mMainContainer.getLeft() + dx;

newLeft = fixLeft(newLeft);

mMainContainer.layout(newLeft, 0, newLeft + mSlideWidth, mSlideHeight);

}

// 处理移动事件

performSlideEvent();

}

五、使用教程

布局文件中

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/slideLayout"

android:layout_width="match_parent"

android:background="@mipmap/icon_bg"

android:layout_height="match_parent">

// 菜单容器

// 主容器

代码中获取对象,设置监听,设置打开或者关闭侧滑

六、总结

有了ViewDragHelper这个辅助类,对ViewGroup进行操作相对来说已经比较简单了,只需要处理计算和绘制的工作,其他的都已经做好了。当然ViewDragHelper的作用远不于此,想要了解更多的同学可以去研究一下这个类的源码。这里也只是简单的实现了侧滑功能,要想做的更完美的同学

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容