[Android] 在Android5.0下的带有DrawerLayout的工程模板

下面用的例子代码来源于 Android Studio 的工程模板,只是对里面的一些设计进行记录,吸取下谷歌的精华(污)。

我们先看看是什么样子的

[Android] 在Android5.0下的带有DrawerLayout的工程模板_第1张图片
QQ截图20160116105454.png

[Android] 在Android5.0下的带有DrawerLayout的工程模板_第2张图片
QQ截图20160116105504.png

XML布局文件


先从 XML 文件说起,一共是 4 个布局文件:
activity_main.xml -- 根布局
app_bar_main.xml -- appbar
content_main.xml --主内容布局
nav_header_main.xml -- 侧边栏布局

我们看看 activity_main.xml 中的代码:


  

      


  


可以看到根布局是由一个 DrawerLayout 包裹住的,因为要使用 DrawerLayout 就要把他放在最外层,在 DrawerLayout 里面,第一个是主内容布局,直接展示到 activity 。第二个是侧边栏 NavigationView,通过设置侧边栏的 app:menu 属性可以定义侧边栏的菜单项, app:headerLayout 属性可以定义侧边栏的顶部样式(也可以没有顶部样式,那样就是一个菜单盒子了),我们看看关于headerlayout是怎么编写的:




    

    

    


可以看到里面其实跟普通布局并没什么区别,使用了一个 imageview 和两个 textview 组成 效果图如下:

[Android] 在Android5.0下的带有DrawerLayout的工程模板_第3张图片
QQ截图20160116105823.png

我们继续看上面的activity_main文件,其中第一个主内容布局使用了 include 导入了 app_bar_main 。我们跟进去看一下:




    

        

    

    

    


可以看到 里面是一个 CoordinatorLayout 作为最外层的包裹,这样的好处是可以让 appbar 和下面的 fab 能够产生一个动画效果,详细的 CoordinatorLayout 用法可以参考:

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

在这个文件中,最上面是 appbar ,中间是一个导入文件 content_main 最下面是一个 fab 。这就构成了我们的主布局文件,其中因为 appbar 和 fab 相对独立,所以单独写出来。详细的内容布局通过 content_main 文件来进行编写。里面内容很简单 ,就是一个 layout 一个 textview 就不展示了。

总结一下,关于布局文件的设计。谷歌的建议的是:DrawerLayout>CoordinatorLayout>content_main

最外层使用 DrawerLayout,主布局使用 include 方式插入。插入的主布局使用 CoordinatorLayout 包裹,实现动画效果,然后将 appbar 和 fab 单独提出编写,详细布局继续使用 include 方式插入 content_main 文件。

XML样式文件


看完了布局文件我们来看样式文件:
默认会创建两个:
styles.xml
styles.xml-v21

先看第一个styles.xml