美文网首页
仿bilili侧滑左侧菜单

仿bilili侧滑左侧菜单

作者: _成长ing_ | 来源:发表于2019-05-24 14:01 被阅读0次

    1. 概述

    Android侧滑菜单的实现有很多方式,本文采用DrawerLayout + NavigationView的方式实现侧滑菜单,仿照bilibili的侧滑菜单,效果如图所示:


    仿bilibili左侧菜单.gif

    2.实现

    2.1 DrawerLayout + NavigationView生成侧滑菜单
    2.2 NavigationView添加头部布局
    2.3 NavigationView添加menu布局
    2.4 NavigationView添加底部布局
    2.5 menu中item右边添加new标志

    2.4 NavigationView添加底部布局
    前三个实现方式比较简单,教程网上一搜一大把,但是在实现第四点的时候出现了问题,由于自己技术太垃圾,懵逼了好长时间,NavigationView只有添加头部和menu的代码,没有添加footView的方法,怎么整??想把NavigationView和底部layout放在一个LinearLayout里整体作为侧滑菜单,但是会发现底部的layout的背景是有阴影的,即使你设置了背景颜色,还是有阴影的。持续懵逼中。。。最后发现NavigationView其实是继承FrameLayout的,瞬间知道怎么做了,替自己的垃圾技术感到悲哀。

     <android.support.design.widget.NavigationView
            android:id="@+id/leftMenuView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/menu_header"
            app:menu="@menu/menu_main">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="bottom"
                android:orientation="vertical">
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#e5e5e5" />
    
                <include layout="@layout/menu_home_bottom" />
    
            </LinearLayout>
    
    
        </android.support.design.widget.NavigationView>
    

    运行发现确实底部布局被添加到了NavigationView,但是你会发现当你的menu布局过多时,bottom布局会遮挡一个item,这个不知道怎么整,我就在item里多加个item,,,哪位大神知道怎么解决,求告知!!!

    2.5 menu中item右边添加new标志
    new标签是一个布局文件

    android:actionLayout="@layout/menu_new_logo"
    

    运行发现没有作用,google一通,把android 改成app即可

    app:actionLayout="@layout/menu_new_logo"
    

    图片需要的素材:阿里巴巴矢量图标库

    3.代码

    链接:https://pan.baidu.com/s/1yYqjCqXgKw5nWlewLBoSbg
    提取码:4m6k

    相关文章

      网友评论

          本文标题:仿bilili侧滑左侧菜单

          本文链接:https://www.haomeiwen.com/subject/pggwzqtx.html