美文网首页爱天气App实战开发
模块3:建立主界面UI框架 - 使用抽屉导航(1)

模块3:建立主界面UI框架 - 使用抽屉导航(1)

作者: jingz课程 | 来源:发表于2019-03-08 12:56 被阅读0次

    介绍

    按照设计方案,iWeather采用了抽屉导航。

    与作为家具组件的抽屉相类似,抽屉布局(Drawer Layout)的作用就是收纳

    • 布置一些有用但不必时刻都摆在用户程序主界面这张桌子表面上的操作和选项。
    • 在需要浏览时将其展开。
    • 使用完毕后再次折叠收藏,保持用户程序主界面这张桌子的干净整洁。

    抽屉布局在实践中比较常用,通常配合手势和动画进行操作和展示。

    抽屉导航

    抽屉布局剖析

    从视觉上可以将抽屉布局划分为两个视图:

    • 主视图(main view):包含主界面内容
    • 抽屉视图(drawer view):包含抽屉中收纳的内容
    抽屉视图和主视图

    根据这两个视图的相对位置关系,可以提炼出抽屉布局的两种状态:

    • 抽屉折叠状态:抽屉视图隐藏,屏幕上完全显示主视图
    • 抽屉展开状态:抽屉视图显示在屏幕最前端,主视图被部分遮挡

    两种状态的切换由用户操作触发,并以动画来修饰状态间的过渡。

    抽屉展开与折叠

    因此,我们接下来分两步走:

    • 第一步,为App的主界面(即MainActivity)实现抽屉布局及两个状态之间的切换机制
    • 第二步,按照设计分别布置主视图和抽屉视图的内容细节

    在本模块中,我们先来完成第一步。

    相关文章

      网友评论

        本文标题:模块3:建立主界面UI框架 - 使用抽屉导航(1)

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