仿酷狗侧滑学习
2018-01-07 本文已影响17人
冷泡茶童鞋
前记
最近为了提升自身的技能，学习了自定义控件，在网上看了大牛的视频学习后，记录下
功能分析
1、根据手指在屏幕上的滑动来展示不同的界面，但是切换到菜单界面的时候，可以看到主页的部分节目
2、手指滑动的距离是否超过菜单页宽度的一半，如果超过一半则展示菜单，如果未超过则不展开菜单界面
3、快速滑动时展开或关闭菜单界面
4、打开菜单界面的时候，菜单界面慢慢的放大，更改透明值
5、当菜单展开的时候，点击内容页时关闭菜单
功能实现
创建类SlidingMenuLayout 集成 HorizontalScrollView并重写构造方法
public class SlidingMenuLayout extends HorizontalScrollView{
public SlidingMenuLayout(Context context) {
super(context);
}
public SlidingMenuLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SlidingMenuLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
自定义属性slidingMenuMarger并读取
<declare-styleable name="SlidingMenuLayout">
<attr name="slidingMenuMargin" format="dimension"/>
</declare-styleable>
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SlidingMenuLayout);
mSlidingMenuMargin = (int) array.getDimension(R.styleable.SlidingMenuLayout_slidingMenuMargin,mSlidingMenuMargin);
array.recycle();
因为继承的是HorizontalScrollView，所以使用方法也就是跟ScrollView一样了，ScrollView下只能有一个子节点，设置布局并运行
<com.sming.slidingmenulayout.SlidingMenuLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/home_sliding_menu"
app:slidingMenuMargin="62dp"
android:background="@drawable/home_menu_bg"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="@layout/layout_home_menu" />
<include layout="@layout/layout_home_content" />
</LinearLayout>
</com.sming.slidingmenulayout.SlidingMenuLayout>
运行后的布局 如以下显示
image.png
什么鬼？完全都乱套了思考？？？会出现这种情况是因为我们没有设置宽度，接下来我们来为他们设置宽度
当界面加载完成之后，我们就为他们设置下宽度，所以宽度的设置写在onFinishInflate方法下
@Override
protected void onFinishInflate() {
super.onFinishInflate();
ViewGroup childAt = (ViewGroup) getChildAt(0);//因为该布局下只有一个子节布局，在这里获取到的是布局中的SlidingMenuLayout下的LinearLayout
mMenuView = childAt.getChildAt(0);
mContentView = childAt.getChildAt(1);
mMenuWidth = getScreenWidth(getContext()) - mSlidingMenuMargin;//菜单页的宽度
//为菜单页设置宽度
ViewGroup.LayoutParams mMenuLayoutParams = mMenuView.getLayoutParams();
mMenuLayoutParams.width =mMenuWidth;
mMenuView.setLayoutParams(mMenuLayoutParams);
//为内容页设置宽度
ViewGroup.LayoutParams mContentLayoutParams = mContentView.getLayoutParams();
mContentLayoutParams.width = getScreenWidth(getContext());
mContentView.setLayoutParams(mContentLayoutParams);
}
运行后就正常了
image.png
通过左右滑动就可以滚动了，初始的时候菜单页是隐藏的，我们只要将位置滚动到菜单的宽度就行了，就只展示内容页了
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
scrollTo(mMenuWidth,0);
}
接下来实现手指滑动的距离是否超过菜单页宽度的一半，当手指抬起的时候如果超过一半则展示菜单，如果未超过则不展开菜单界面
这里会接触到事件的分发事件，当手指抬起的时候，事件由我们自己处理就行了就不往上分发了
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_UP) {
int scrollX = getScrollX();
if (scrollX <= mMenuWidth / 2) {
//打开菜单
openMenu();
} else {
//关闭菜单
closeMenu();
}
return true;
}
return super.onTouchEvent(ev);
}
private void closeMenu() {
smoothScrollTo(mMenuWidth,0);
}
private void openMenu() {
smoothScrollTo(0,0);
}
实现快速滑动时展开或关闭菜单界面
为了实现这个功能，将会借助类GestureDetector
在构造方法实现
mGestureDetector = new GestureDetector(getContext(), new GestureListener());//GestureListener是自己写的类继承GestureDetector.SimpleOnGestureListener
class GestureListener extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//向右滑时velocityX为正，向左滑时为负
if (menuIsOpen) {
//当界面是打开的时候向
if (velocityX < 0) {
closeMenu();
}
} else {
if (velocityX > 0) {
openMenu();
}
}
return true;
}
}
// 并且在onTouchEvent中写上
// 拦截处理事件
if(mGestureDetector.onTouchEvent(ev)) {
return mGestureDetector.onTouchEvent(ev);
}
这样就搞定了，关于这个GestureDetector的使用，不懂的就百度吧
接下来要去实现 4、打开菜单界面的时候，菜单界面慢慢的放大，更改透明值和内容页的缩放
实现这个功能，我们只要滚动的时候去监听就行了，重写HorizontalScrollView类中的onScrollChanged
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//缩放功能
//缩放的时候并不是从0 - 1的，而是从某一个初始值到目标值
//这里的l 不是滑动的距离，而是滚动的距离，举个例子菜单页隐藏的时候，l就是菜单页的宽度值
//菜单页的缩放
float scale = l*1f/mMenuWidth;
//设置缩放中心点
ViewCompat.setPivotX(mContentView,0);
ViewCompat.setPivotY(mContentView, mContentView.getHeight() / 2);
//菜单页缩放
float menuScale = 0.7f+(0.3f *(1- scale));
ViewCompat.setScaleX(mMenuView,menuScale);
ViewCompat.setScaleY(mMenuView,menuScale);
//菜单页透明值
float menuAlpha = 0.6f + 0.4f*(1-scale);
ViewCompat.setAlpha(mMenuView,menuAlpha);
ViewCompat.setTranslationX(mMenuView, l * 0.2f);
//内容页的缩放
float contentScale = 0.7f+(0.3f *scale);
ViewCompat.setScaleX(mContentView,contentScale);
ViewCompat.setScaleY(mContentView,contentScale);
}
功能实现5、当菜单展开的时候，点击内容页时关闭菜单
在这里会接触到事件的拦截，所有需要重写onInterceptTouchEvent方法，当我们点击内容页的时候就将事件拦截掉
image.png
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
isIntercept = false;
if (menuIsOpen){
if (ev.getX()>mMenuWidth){
closeMenu();
isIntercept = true;
return true;
}
}
return super.onInterceptTouchEvent(ev);
}
在这里定义了布尔属性isIntercept 如果拦截的话就设置为true，返回为true的时候，就会调用自身的onTouchEvent方法，因为我们在onTouchEvent方法里已经写了代码，那么只要isIntercept 为true的时候，我们绕过执行就行了
image.png
