Android 类似QQ的侧边栏

最新推荐文章于 2025-05-27 11:13:12 发布

原创最新推荐文章于 2025-05-27 11:13:12 发布 · 2.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android #界面 #侧边栏

零散备忘专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一种基于HorizontalScrollView实现QQ风格滑动菜单的方法，通过自定义控件完成侧边栏的展开与隐藏，同时实现了平滑过渡及菜单的透明度、大小变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看效果图：
这里写图片描述

主界面的qq界面是我截得图。并不是实际画了一个布局。滑出的菜单是手写的布局。

整体思路：
整体是一个HorizontalScrollView。当滑动的距离大于大于屏幕的三分之一时。侧边栏展开。否则再滑回去。

来看布局：

<com.yeliang.sliding_menu.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <include layout="@layout/menu"></include>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/qq"></LinearLayout>
    </LinearLayout>


</com.yeliang.sliding_menu.SlidingMenu>

最外层是继承自HorizontalScrollView的自定义控件。没啥可说的一目了然。可以看到我的主界面就是一个qq的主界面的截图。并引入了滑动菜单的布局。

下面是自定义控件的完整代码：

public class SlidingMenu extends HorizontalScrollView {
    //屏幕宽度
    private int mScreenWidth;

    //划出的菜单
    private ViewGroup mMenu;

    //主界面
    private ViewGroup mMain;

    private int mMenuRightPadding = 100;

    private int mMenuWidth;

    private boolean isInit = true;


    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);

        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;

        setHorizontalScrollBarEnabled(false);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (isInit) {
            LinearLayout wrapper = (LinearLayout) getChildAt(0);

            mMenu = (ViewGroup) wrapper.getChildAt(0);
            mMain = (ViewGroup) wrapper.getChildAt(1);

            mMenuWidth = mScreenWidth - mMenuRightPadding;

            mMenu.getLayoutParams().width = mMenuWidth;
            mMain.getLayoutParams().width = mScreenWidth;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            isInit = false;
        }
        scrollTo(mMenuWidth, 0);
        super.onLayout(changed, l, t, r, b);
    }

    private float downX;

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = ev.getX();
                break;
            case MotionEvent.ACTION_UP:
                //抬起时 滑动的距离
                float dx = ev.getX() - downX;

                //如果滑动的距离小于屏幕宽度的1/3
                if (dx < mScreenWidth / 3) {
                    smoothScrollTo(mMenuWidth, 0);
                } else {
                    smoothScrollTo(0, 0);
                }
                return true;
            default:
                break;

        }
        return super.onTouchEvent(ev);
    }


    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        //滑动的百分比
        float factor = (float) l / mMenuWidth;

        //平移
        mMenu.setTranslationX(mMenuWidth * factor * 0.6f);

        //缩放
        float menuScale = 1 - 0.4f * factor;
        mMenu.setScaleX(menuScale);
        mMenu.setScaleY(menuScale);

        //透明度
        mMenu.setAlpha(1 - factor);
    }
}

1 首先来确定主界面和侧边栏的宽度。
在构造方法中获得屏幕的宽度

WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;

去除滚动条

setHorizontalScrollBarEnabled(false);

然后在onMeasure()方法中，根据屏幕的宽度，来给侧边栏和主界面宽度赋值

 if (isInit) {
            LinearLayout wrapper = (LinearLayout) getChildAt(0);

            mMenu = (ViewGroup) wrapper.getChildAt(0);
            mMain = (ViewGroup) wrapper.getChildAt(1);

            mMenuWidth = mScreenWidth - mMenuRightPadding;

            mMenu.getLayoutParams().width = mMenuWidth;
            mMain.getLayoutParams().width = mScreenWidth;
        }

因为onMeasure()会多次调用。所以这里用isInit标记了。并在onLayout()执行后把isInit置为false。这样就不会重复执行这段赋值的代码。

从这段代码中可以看出，主界面的设定为屏幕的宽度，侧边栏的宽度为自身宽度减去100dp。这样侧边栏的右边就会被切去100dp。

2 初始化时，让此自定义控件滑动到主界面正好显示的位置

 if (changed) {
            isInit = false;
        }
        scrollTo(mMenuWidth, 0);

整个自定义控件的宽度即为侧边栏的宽度和主界面的宽度。所以如果要让此自定义控件初始化时就正好显示主界面，那就必须要让此自定义控件向左滑动侧边栏的宽度。

3 当滑动侧边栏时，计算滑动的宽度。

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = ev.getX();
                break;
            case MotionEvent.ACTION_UP:
                //抬起时 滑动的距离
                float dx = ev.getX() - downX;

                //如果滑动的距离小于屏幕宽度的1/3
                if (dx < mScreenWidth / 3) {
                    smoothScrollTo(mMenuWidth, 0);
                } else {
                    smoothScrollTo(0, 0);
                }
                return true;
            default:
                break;

        }
        return super.onTouchEvent(ev);
    }

因为此自定义控件本来就是默认可以滑动的，所以不用处理ACTION_MOVE的事件。只是在ACTION_DOWN和ACTION_UP事件中判断滑动的距离即可。当滑动的距离大于屏幕的1/3时，则把侧边栏滑出来。这里的smoothScrooTo()方法并不会立即滑动到指定位置。而是稍微缓慢的滑动。

4 滑动过程中改变侧边栏的透明度和大小和平移效果
自定义控件在滑动过程中会多次回调onScrollchanged方法。

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        //滑动的百分比
        float factor = (float) l / mMenuWidth;

        //平移
        mMenu.setTranslationX(mMenuWidth * factor * 0.6f);

        //缩放
        float menuScale = 1 - 0.4f * factor;
        mMenu.setScaleX(menuScale);
        mMenu.setScaleY(menuScale);

        //透明度
        mMenu.setAlpha(1 - factor);
    }