DrySister看妹子应用(第二版)——1.新版Material Design主界面搭建

DrySister看妹子应用(第二版)——1.新版Material Design主界面搭建

DrySister的第二大版本开工啦~(≧▽≦)/~啦啦啦！！！

第二版的第一节比较简单，就是更换一波APP的页面，把界面换成

Material Design风格，我们会用到这些控件：

DrawerLayout，CoordinatorLayout，AppBarLayout，Toolbar，

ConstraintLayout，NavigationView，FloatingActionButton，

Snackbar，ActionBarDrawerToggle

本节做的就是用他们拼出一个通用(烂大街)的MD布局。Go，Go，Go～

最终的效果：

1.添加依赖库

build.gradle里需要添加下述依赖才能正常使用这些库：

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'

2.使用DrawerLayout

界面大改，先把MainActivity里的内容删了，我们打算把现在的

内容放到一个Fragment里。删除完成后的代码如下：



然后把activity_main.xml布局里的东西都删了，用DrawerLayout作为外层布局：



简介下两个属性：

android:fitsSystemWindows="true"    # 是否适应屏幕大小
tools:openDrawer="start"    # 将对象的X轴位置放在它容器的起始位置，并且不改变其大小

如果有点不了解，没什么，照着写就是了，接着我们加入两个ImageView

弄点颜色，分别表示中间的内容以及抽屉的布局，通过

android:layout_gravity="start"

控制抽屉弹出方向，如果想右侧弹出可以改成end.

修改后的代码：



运行一波看看效果：



可以很赞，这里可能细心的读者可能会发现：怎么你这个好像没有导航栏？

是的，因为我在AndroidManifest.xml里设置了一个NoActionBar的sytle：





如果不设置的话默认使用的是ActionBar，巨丑而且不好拓展：



接下来我们来修改中间的内容部分，两个大的部分组成，顶部的

Toolbar和中间显示内容的部分(用来给Fragment填充的部分)

2.使用CoordinatorLayout，Toolbar，ConstraintLayout，AppBarLayout

先来简单介绍下这几个控件分别是拿来干嘛的：

CoordinatorLayout：

是用来协调子View的一个ViewGroup，结合Behavior

可以做出很多棒棒的特效。要和ConstraintLayout区分开来，新手

最容易把这两个记错混淆…

ConstraintLayout

约束布局：支持百分比的更强大的RelativeLayout

更多内容用法可见：哲♂学三幻神带你学习ConstraintLayout(约束布局)

AppBarLayout

一个垂直方向的LinearLayout，相比起普通的LinearLayout，可以通过一些

参数控制子View的滑动行为，比如包裹住Toolbar可以让它响应滚动事件。

Toolbar

5.0新出的用来取代ActionBar的导航控件，除了具有Material Design风格外，

还有更高的可定制性与灵活性。

开始编写程序，先是内容部分吧，我们定义一个布局：content_main.xml

用一个ConstraintLayout包着一个TextView：





接着到带有toolbar的部分了，另外定义一个布局：app_bar_main.xml

用CoordinatorLayout包着一个Toolbar和inclue上面的content_main.xml



然后activity_main.xml中include下这个布局：



运行下：



这里发现我们的toolbar并没有显示我们的中文，这个需要在MainActivity

中调用setSupportActionBar(toolbar); 的方法进行设置



运行下：


感觉还是有些美中不足，Material Design里其中一点强调的就是Z轴，

用来表示元素间的层叠关系，元素离界面底层（水平面）越远，投影越重。

这里我们可以使用AppBarLayout容器来包裹住Toolbar。

这个Toolbar的文字颜色是黑色，有点太突兀了，可以顺道给我们的

Toolbar设置一个主题：



修改后的 app_bar_main.xml



运行下看下效果：


恩，有投影效果了，对了这里还有个小技巧要告诉你的，就是include

的时候，想在include那个布局看到他所嵌套的那个界面的情况的话，

可以添加：tools:showIn=”@layout/嵌套在那个布局”，进行渲染。

啧啧，不错，关于页面内容就先这样吧，接着是左侧的抽屉布局了。

3.使用NavigationView

抽屉布局里的内容，我们可以自定义布局，或者使用Design库为我们提供

的NavigationView，使用起来非常方便：



这个东西使用起来非常简单，分两部分组成：头部以及下面的菜单列表，

头部通过：app:headerLayout=”@layout/上面的布局” 来进行设置；

而菜单则是指向一个menu文件：app:menu=”@menu/activity_main_drawer”

那就先来组合头部吧，新建xml文件：nav_header_main.xml



看下效果：



接着是组合菜单，右键menu文件夹(没有新建)，新建一个 activity_main_drawer.xml

我们菜单想分为两个部分：

上面：看小姐姐，看天气，看资讯，小工具

下面：设置，关于



另外，这里设置图标的话，无论你的图标是什么颜色的，最后都会

变成灰色，想使用彩色的图标的话，需要在Java里为NavigationView

设置setItemIconTintList(null);



运行下看下效果：



接下来为我们的菜单设置点击事件：NavigationView.OnNavigationItemSelectedListener

点击按钮触发事件的同时，关闭DrawerLayout。

4.添加 ActionBarDrawerToggle

不知道你有没有这样的感觉，DrawerLayout从左侧滑出，有时候因为我们没贴近

边边或者手机的问题，侧滑抽屉偶尔滑不出来。一个好的方案是添加一个按钮，

然后点击的时候DrawerLayout滑出。MD库里给我们提供了一个ActionBarDrawerToggle

可以帮助我们解决这个问题，使用也很简单：



构造方法后两个参数为菜单显示时的描述与菜单关闭时的描述，随便写就好。

toggle.syncState()是设置显示为三横杆，你也可以setDisplayHomeAsUpEnabled(true);

把他设置成一个返回箭头。

5.添加FloatingActionButton与Snackbar

其实到上面基本上就完了，不过既然都用到那么多控件了，顺带加上个

FloatingActionButton与Snackbar吧，毕竟一家人要齐齐整整～

可能有些小伙伴听都没听过这两个控件，这里简介下是做什么的：

FloatingActionButton：悬浮按钮，结合CoordinatorLayout使用，

可实现悬浮在任意控件的任意位置。

Snackbar：针对操作轻量级的反馈机制，小的弹出框，可出现在屏幕

下方或左下方。

使用方法非常简单，打开app_bar_main.xml，添加



接着为按钮设置点击事件，点击弹出Snackbar：



运行效果：

6.关闭时判断抽屉是否打开，先关闭

还有一个强迫症玩家受不了的地方：抽屉打开了，点击退出直接退出了

而不是先关闭抽屉，再点击才退出。 这个好说，加点判断就行了。

MainActivity.java重写下onBackPressed()方法。

本节小结

本节对界面进行了一个大改，用上了各种各样的Material Design控件，

拼出了一个通用(烂大街)的布局，顺道学了一波控件的用法，美滋滋。

不过要告诉你一个真相，其实AS里有这样的模版，可以直接生成：



不过学完本节再去一键生成会更加事半功倍，个人觉得～

好啦，界面大概就搭出来了，下一节我们把我们加载妹子

图的部分也弄好加上，然后再酷安发个包吧～

代码下载：https://github.com/coder-pig/DrySister

欢迎Star，Follow，提Issues～


有问题可加群反馈：421858269