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

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

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

原版QQ实现效果

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

<?xml version="1.0" encoding="utf-8"?>

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

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

    <androidx.appcompat.widget.Toolbar

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

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

        android:fitsSystemWindows="true"

        android:background="#ffda45"

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

</LinearLayout>


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

<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.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">

    <!--主页内容-->

    <FrameLayout

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

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

    </FrameLayout>

    <!--侧边栏内容-->

    <FrameLayout

        android:id="@+id/menu_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_gravity="start">

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

    </FrameLayout>

</androidx.drawerlayout.widget.DrawerLayout>


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

下面是实现的主要代码

       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还赞哈哈

好了这期就到这里,喜欢就点个关注吧!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容