仿QQ6.0主页面侧滑效果（第二种实现方法）

Posted 2021-07-17 我想月薪过万

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿QQ6.0主页面侧滑效果（第二种实现方法）相关的知识，希望对你有一定的参考价值。

效果展示

仿QQ6.0主页侧滑效果图

背景

对于这个效果，我之前写过一种实现方法仿QQ6.0主页面侧滑效果，这种方法跟手性不好，如果复现了的朋友应该能体会到，并且，还得自己处理很多 onTouch 事件，所以，这篇文章带大家体验一下另外一种实现方法，继承自 HorizontalScrollView

实现步骤

第一步：创建自定义类

package com.wust.myhorizontalscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.HorizontalScrollView;

public class mySlidingMenu extends HorizontalScrollView {
    public mySlidingMenu(Context context) {
        this(context,null);
    }

    public mySlidingMenu(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

第二步：引用布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <com.wust.myhorizontalscrollview.mySlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="我是菜单"
            android:background="#f00"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="我是内容"
            android:background="#0f0"/>
    </com.wust.myhorizontalscrollview.mySlidingMenu>

</LinearLayout>

如果大家在这一步试图去运行，就会发现报错，如下：

大概意思就是说 HorizontalScrollView 里面只能包一个布局，所以，我们得把上面的布局文件修改一下，用一个线性布局把他们包起来

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <com.wust.myhorizontalscrollview.mySlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="我是菜单"
                android:background="#f00"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="我是内容"
                android:background="#0f0"/>
            
        </LinearLayout>
    </com.wust.myhorizontalscrollview.mySlidingMenu>

</LinearLayout>

第三步：编写逻辑

这个时候当我们运行程序的时候就会发现，我们明明写的 match_parent 可是最后的结果不是铺满的，所以，我们得给我们的自定义组件赋值宽高。在 onMeasure() 方法里？？我们不妨来试试

package com.wust.myhorizontalscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;

public class mySlidingMenu extends HorizontalScrollView {

    private int mScreenWidth;
    private View mMenu;
    private View mContent;
    private int mMenuWidth;
    private int mContentWidth;
    private int mScrennHeight;

    public mySlidingMenu(Context context) {
        this(context,null);
    }

    public mySlidingMenu(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取屏幕宽度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        mScreenWidth = metrics.widthPixels;
        mScrennHeight = metrics.heightPixels;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //初始化宽度、高度
        int width = 0;
        int height = 0;
        //获取子代
        ViewGroup ll_child = (ViewGroup) getChildAt(0);
        mMenu = ll_child.getChildAt(0);
        mContent = ll_child.getChildAt(1);
        //设置菜单 内容的宽度
        mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
        mContentWidth = mContent.getLayoutParams().width = mScreenWidth;
        //设置自定义组件的宽高
        width = mMenuWidth + mContentWidth;
        height = mScrennHeight;
        setMeasuredDimension(width,height);
    }
}

我们发现布局结构的确出来了，但是划不动，最大的可能就是我们设置宽高的时机不对，通过翻阅资料，我发现我们应该写在布局解析完成这个时间节点

package com.wust.myhorizontalscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;

public class mySlidingMenu extends HorizontalScrollView {

    private int mScreenWidth;
    private View mMenu;
    private View mContent;
    private int mMenuWidth;
    private int mContentWidth;
    private int mScrennHeight;

    public mySlidingMenu(Context context) {
        this(context,null);
    }

    public mySlidingMenu(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取屏幕宽度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        mScreenWidth = metrics.widthPixels;
        mScrennHeight = metrics.heightPixels;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //获取子代
        ViewGroup ll_child = (ViewGroup) getChildAt(0);
        mMenu = ll_child.getChildAt(0);
        mContent = ll_child.getChildAt(1);
        //设置菜单 内容的宽度
        mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
        //设置布局宽度的第二种方法
        ViewGroup.LayoutParams contentLayoutParams = mContent.getLayoutParams();
        mContentWidth = contentLayoutParams.width = mScreenWidth;
        mContent.setLayoutParams(contentLayoutParams);
    }

}

这个时候，你就会发现屏幕可以滑动了

第四步：优化

经过上面三步，侧滑菜单我们就做完了，下面所讲是为了优化用户体验

优化一：最初渲染页面的时候，菜单栏是关闭的

在这一步中要注意关闭菜单的时机，即到底写在那个函数里

package com.wust.myhorizontalscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;

public class mySlidingMenu extends HorizontalScrollView {

    private int mScreenWidth;
    private View mMenu;
    private View mContent;
    private int mMenuWidth;
    private int mContentWidth;
    private int mScrennHeight;

    public mySlidingMenu(Context context) {
        this(context,null);
    }

    public mySlidingMenu(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取屏幕宽度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        mScreenWidth = metrics.widthPixels;
        mScrennHeight = metrics.heightPixels;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //获取子代
        ViewGroup ll_child = (ViewGroup) getChildAt(0);
        mMenu = ll_child.getChildAt(0);
        mContent = ll_child.getChildAt(1);
        //设置菜单 内容的宽度
        mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
        //设置布局宽度的第二种方法
        ViewGroup.LayoutParams contentLayoutParams = mContent.getLayoutParams();
        mContentWidth = contentLayoutParams.width = mScreenWidth;
        mContent.setLayoutParams(contentLayoutParams);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        closeMenu();
    }

    private void closeMenu(){
        smoothScrollTo(mMenuWidth,0);
    }

    private void openMenu(){
        smoothScrollTo(0,0);
    }

}

优化二：判断手指抬起时是否超过菜单宽度一半，超过即打开菜单，没有超过即关闭菜单

在这一步中要区别于我们上讲仿QQ6.0主页面侧滑效果中的滑动正负观，在这我就不过多赘述，大家自己动手实践就知道了

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch(ev.getAction()){
            //自己处理 手指抬起事件 所以 return true
            case MotionEvent.ACTION_UP:
            {
                //就是这里要注意，因为最开始 getScrollX() 的值是 mMenuWidth
                if (getScrollX() > mMenuWidth/2){
                    closeMenu();
                }else {
                    openMenu();
                }
                return true;
            }
        }
        return super.onTouchEvent(ev);
    }

优化三：处理快速滑动手势

在这个里面主要用到了一个类 GestureDetector

public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取屏幕宽度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        mScreenWidth = metrics.widthPixels;
        mScrennHeight = metrics.heightPixels;
         //第一步：在构造方法里创建 GestureDetector 类
        mGestureDetector = new GestureDetector(context, new myGestureListener());
    }

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        //第二步：在 onTouchEvent 中拦截快速滑动手势
        if (mGestureDetector.onTouchEvent(ev)){
            return mGestureDetector.onTouchEvent(ev);
        }
        switch(ev.getAction()){
            //自己处理 手指抬起事件 所以 return true
            case MotionEvent.ACTION_UP:
            {
                //就是这里要注意，因为最开始 getScrollX() 的值是 mMenuWidth
                if (getScrollX() > mMenuWidth/2){
                    closeMenu();
                }else {
                    openMenu();
                }
                return true;
            }
        }
        return super.onTouchEvent(ev);
    }

//第三步：编写 myGestureListener 
private class myGestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            System.out.println("velocityX ->" + velocityX);
            if (menuIsOpen){
                //菜单打开状态
                if (velocityX < -500){
                    closeMenu();
                    return true;
                }
            }else {
                //菜单关闭状态
                if (velocityX > 500){
                    openMenu();
                    return true;
                }
            }
            return false;
        }
    }

//在下面两个方法中添加了菜单是否打开标志
private void closeMenu(){
        smoothScrollTo(mMenuWidth,0);
        menuIsOpen = false;
    }

private void openMenu(){
        smoothScrollTo(0,0);
        menuIsOpen = true;
    }

优化四：根据滑动给内容页添加阴影

其实要实现这个有以下两种方法：

在 xml 中静态添加 View 覆盖层
在 java 代码中动态添加 View 覆盖层（复用性好，我们选择这一种）

 @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //获取子代
        ViewGroup ll_child = (ViewGroup) getChildAt(0);
        mMenu = ll_child.getChildAt(0);
        mContent = ll_child.getChildAt(1);
        //设置菜单 内容的宽度
        mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
        //第一步：先把以前的内容 从线性布局中移除
        ll_child.removeView(mContent);
        //第二步：创建一个帧布局
        FrameLayout contentFrameLayout = new FrameLayout(getContext());
        //第三步：把以前的内容 加入到这个帧布局中
        contentFrameLayout.addView(mContent);
        //第四步：创建一个阴影 层
        mShadeView = new View(getContext());
        //给阴影层设置颜色
        mShadeView.setBackgroundColor(Color.parseColor("#550000"));
        //第五步：将这个阴影层加入帧布局中，覆盖在内容之上
        contentFrameLayout.addView(mShadeView);
        //第六步：给帧布局设置宽度
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        params.width = mScreenWidth;
        contentFrameLayout.setLayoutParams(params);
        //第七步：将这个帧布局添加进来
        ll_child.addView(contentFrameLayout);
        //第八步：将阴影层设为透明
        mShadeView.setAlpha(0.0f);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        //计算比例因子 1 -> 0
        float rate = l/(float)mMenuWidth;
        //根据比例因子设置透明度
        mShadeView.setAlpha(1-rate);
    }

最终效果

有偿提问

如果大家觉得这篇文章帮助你了，可以支持一下。

有偿提问

以上是关于仿QQ6.0主页面侧滑效果（第二种实现方法）的主要内容，如果未能解决你的问题，请参考以下文章

仿二手车之家下拉列表

android:QQ多种侧滑菜单的实现

Android高仿网易新闻客户端之侧滑菜单

Android使用DrawerLayout仿qq6.6版本侧滑效果

Flutter：手把手教你实现一个仿QQ侧滑菜单

Android使用DrawerLayout仿qq6.6版本侧滑效果