Android 类似QQ的侧边栏

本文介绍了一种基于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);
    }

此方法中的l表示x方向滑动的距离。所以根据l/侧边栏的宽度。就能计算出滑动的百分比。再根据滑动进度的百分比来计算平移,缩放,透明度的效果的值。在缩放过程中,侧边栏的宽度会变小,所以要不断地向右平移。不然在侧边栏和主界面之间会还有一个逐渐见效的缝隙。如下
这里写图片描述

向右平移后就不会有这个缝隙。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值