UI随笔第三期——仿QQ8.0侧滑界面

QQ在8.0版本实现了将侧滑界面铺满，我们今天来用代码实现一下这种效果

我们先看一下原版QQ的实现效果

原版QQ实现效果

主界面编写代码，以一个toolbar作为我们主界面

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    xmlns:app="http://schemas.android.com/apk/res-auto">

   

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:title="仿QQ侧滑界面"

        android:fitsSystemWindows="true"

        android:background="#ffda45"

        android:id="@+id/sssss"/>

然后我们通过侧滑控件drawerlayout作为我们的根布局，里面嵌套两个帧布局界面，一个是主界面，一个是侧滑界面，以下是实现代码

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

   

   

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

       

   

   

   

        android:id="@+id/menu_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_gravity="start">

       

   

侧滑界面布局代码就不帖出来了，这里主要讲实现这种侧滑栏铺满的效果

下面是实现的主要代码

       View leftMenu = findViewById(R.id.menu_frame);

      //获取侧边栏默认宽度

        ViewGroup.LayoutParams leftParams = leftMenu.getLayoutParams();

      //获取屏幕宽度

        Display defaultDisplay = getWindowManager().getDefaultDisplay();

        Point point = new Point();

        defaultDisplay.getSize(point);

        int x = point.x;

        int y = point.y;

      //设置侧边的宽高(如果不重新设置，即时设置match_parent也只能占屏幕百分80)

        leftParams.width = x;

        leftParams.height = FrameLayout.LayoutParams.MATCH_PARENT;

        leftMenu.setLayoutParams(leftParams);

先把我们的帧布局先进行注册，然后通过获取屏幕的宽度，并赋值给帧布局，这样就实现了侧滑菜单栏的铺满效果

下面是实现的效果gif

效果图

效果基本上跟QQ的效果一样，这里我们还对状态栏进行了沉浸式处理，效果比QQ还赞哈哈

好了这期就到这里，喜欢就点个关注吧！