美文网首页
仿酷狗侧滑学习

仿酷狗侧滑学习

作者: 冷泡茶童鞋 | 来源:发表于2018-01-07 20:05 被阅读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

    相关文章

      网友评论

          本文标题:仿酷狗侧滑学习

          本文链接:https://www.haomeiwen.com/subject/xulmnxtx.html