知乎日报客户端--侧滑栏的实现

看了这篇你应该学会: 做一个高度撑满全屏的侧滑栏。如下图所示:


这个 侧滑栏 外加  上边的三条杠 通过 DrawerLayout,NavigationView,ToolBar实现:

使用DrawerLayout,请先添加com.android.support:support-v4:27.0.2  [我当时的最新版本]依赖

使用NavigationView,请先添加com.android.support:design:27.0.2依赖   点击查看如何添加依赖

先来看main_activity.xml的布局:

知乎日报客户端--侧滑栏的实现_第1张图片

main_activity.xml由main_layout.xml,和NavigationView构成:

main_layout作为屏幕主界面【ps:不显示菜单时的界面,应该放在DrawerLayout的第一个子节点处】

NavigationView是侧滑栏,app:headerLayout是侧滑栏的上部分【我展示的是一张图片】

                                           app:menu是侧滑栏的菜单项

下面给出main_layout.xml, headlayout.xml和left_menu.xml:

main_layout.xml: [include 在main_activity.xml里]

知乎日报客户端--侧滑栏的实现_第2张图片

main_layout.xml由一个ToolBar和FrameLayout组成,用自带的ToolBar来替代主题自带的工具栏,

FrameLayout里面盛装点击相应菜单显示的fragment.


headlayout.xml:

知乎日报客户端--侧滑栏的实现_第3张图片

里面就是显示一张图片。


left_menu.xml:

知乎日报客户端--侧滑栏的实现_第4张图片

emm里面就是几个item。【ps前面三个item放在一个group里面,只有给group设置了id后,才会在这个group下面显示一条横线与下面的item分割开,否则不会显示分割线】


要达到侧滑栏高度与屏幕一致,还得设置主题:

知乎日报客户端--侧滑栏的实现_第5张图片

然后manifest里使用:

知乎日报客户端--侧滑栏的实现_第6张图片

接下来是处理ToolBar如何与侧滑栏关联起来的java代码,以及控制侧滑栏的关,开:

知乎日报客户端--侧滑栏的实现_第7张图片

现在点击ToolBar的三条杠就可以打开侧滑栏了,滑动侧滑栏,ToolBar的三条杠也会有动画效果。

接下来就是监听侧滑栏菜单的点击咯:

知乎日报客户端--侧滑栏的实现_第8张图片

mNavigationView是main_activity.xml里面的控件,就是为NavigationView设置一个setNavgationItemSelectedListener侦听,然后通过点击的item对应的id判断,就知道点击的是哪一项,在这里面写逻辑改变FrameLayout里面的fragment。

DrawerLayout实例可以通过openDrawer(int gravity),closeDrawer(int gravity)来控制侧滑栏的开关。

至此,侧滑栏展示的gif那种侧滑栏应该ok了。




你可能感兴趣的:(知乎日报客户端各个功能的实现,Android知识碎碎片)