1、DrawerLayout(滑动菜单-主体布局)
2、Toolbar
3、NavigationView(滑动菜单-菜单布局)
4、FloatingActionButton + Sanckbar
5、CoordinatorLayout
6、CardView(卡片式布局)
7、AppBarLayout
8、SwipeRefreshLayout(下拉刷新)
9、CollapsingToolbarLayout
10、NestedScrollView
11、TextInputLayout:
12、 SwitchCompat
13、TabLayout(顶部导航栏)
14、Bottom Sheet(底部弹出选项栏)
15、BottomNavigationView(底部导航栏)
首先介绍第一个控件就是DrawerLayout,是Material Design最基础的控件,滑动菜单就是将一些菜单选项隐藏起来,而不是放在主屏幕上,然后可以通过滑动的方式将菜单显示出来。DrawerLayout的用法很简单,首先它是一个布局,允许在布局中放入两个直接子控件,第一个控件是主屏幕中显示的内容,第二个则是隐藏的控件通过滑动来显示内容。
https://blog.csdn.net/XCF95319605/article/details/81121207
当我们的滑动菜单弹出的时候,ActionBar是没有任何反应的,依然挡住了顶部的部分显示空间,因此ActionBar十分的不灵活,故使用Toolbar来替换掉ActionBar,这也是Google希望的,Toolbar不仅拥有ActionBar的全部功能,而且还能更好的支持Material Design效果,现在我们更改一下布局文件,替换掉系统的ActionBar,在此之前,我们需要更改应用的默认主题,将主题指定为NoActionBar的,即去掉ActionBar,步骤:1.打开AndroidManifest.xml文件,2.打开AppTheme主题资源文件,3.修改AppTheme文件。
https://blog.csdn.net/XCF95319605/article/details/81121207
https://blog.csdn.net/Fly_li_sir/article/details/79716898
目前我们已经可以实现简单的滑动菜单效果,但是效果还比较的简陋,不过我们可以通过Google提供的NavigationView控件来为我们的滑动菜单的菜单布局,将会达到更好的效果,不过在使用NavigationView之前,需要我们将NavigationView控件所在的库添加进来,在app/build.gradle文件中添加如下内容:
https://blog.csdn.net/XCF95319605/article/details/81121207
https://blog.csdn.net/Fly_li_sir/article/details/79716898
FloatingActionButton的点击事件的使用和普通的Button是相同的,我们在FloatingActionButton的点击事件中使用Sanckbar来提示用户,Sanckbar的使用和Toast类似,只是除了提示以外,Sanckbar还可以执行一些简单的逻辑,Activity代码如下:
https://blog.csdn.net/XCF95319605/article/details/81121207
从上面第四步的截图我们发现弹出的Snackbar遮挡住了我们的浮动按钮,这是一种很不友好的用户体验,所以,Google为我们准备了CoordinatorLayout这个控件来解决这个问题,同样是在Design支持库中,我们只需要将滑动菜单的默认显示页的最外层布局指定为CoordinatorLayout即可,修改后的xml文件如下所示。为什么CoordinatorLayout可以实现让浮动按钮向上移动的效果呢?那是因为该控件会监听它里面所有控件的状态,接下来看看使用CoordinatorLayout后的运行效果,
https://blog.csdn.net/XCF95319605/article/details/81121207
CardView是实现卡片式布局的重要控件,由appcompat-v7库提供,需要在build.gradle文件中声明库的依赖:compile ‘com.android.support:cardview-v7:26.+’, CardView的使用也很简单,我们先来看看简单的使用方法,如下xml布局文件所示:
https://blog.csdn.net/XCF95319605/article/details/81121207
https://blog.csdn.net/Fly_li_sir/article/details/79704021
这个控件就是为了解决上面的遮挡问题的,实际上AppBarLayout是一个垂直方向的LinearLayout,但是,在它的内部还做了一些滚动事件的封装,且用了Material Design的设计理念,接下来看看这个控件如何使用,很简单,两个步骤即可,第一步,在我们的Toolbar控件外层嵌套AppBarLayout,修改后的xml布局文件如下所示:
https://blog.csdn.net/XCF95319605/article/details/81121207
https://blog.csdn.net/Fly_li_sir/article/details/79716898
到目前为止,基本的数据已经可以正常展示了,现在,我们将模拟的数据换成新闻数据,然后用Recycler
View来展示新闻,然后实现下拉刷新新闻数据,说到下拉刷新,Google也为我们封装了一个适配MD风格的控件,就是SwipeRefreshLayout,SwipeRefreshLayout的使用很简单,我们只需在之前的RecyclerView控件的外层加上SwipeRefreshLayout就行了,activity_main.xml布局文件修改如下:
https://blog.csdn.net/XCF95319605/article/details/81121207
新闻展示界面我们已经做好了,现在就来进行新闻详细显示页的布局,用到的控件基本都是前面所学过的控件,不过这里要新学习一个控件就是CollapsingToolbarLayout,该控件可以实现一个可折叠式标题栏的效果,根据控件名我们就能猜出,该控件是作用于Toolbar之上的,而且该控件也是由Design支持库提供的,并且该控件只能嵌套在AppBarLayout中使用,即xml布局文件应该是这种结构:
https://blog.csdn.net/XCF95319605/article/details/81121207
现在,可折叠式标题栏也完成了,就差显示新闻详情的界面了,在这儿我们用NestedScrollView来作为显示新闻的最外层的布局,里面嵌套一个线性布局(注意:NestedScrollView布局内只能有一个布局,所以我们嵌套线性布局来进行里面的布局),里面的布局也很简单,在线性布局内嵌套CardView,在CardView的里面放一个TextView就ok了,完整的布局文件如下所示,包括上面的可折叠式标题栏的布局:
https://blog.csdn.net/XCF95319605/article/details/81121207
TextinputLayout实际上可以看成对EditText加装了一层外壳
https://blog.csdn.net/weixin_43889841/article/details/90703441
https://blog.csdn.net/Fly_li_sir/article/details/79704021
SwitchCompat是符合谷歌Material design的Selection control组件,与传统的Switch以及ToggleButton不同,v7包中的这个组件兼容了绝大多数低版本手机,令组件的兼容性得到了极大的提升。
https://www.jianshu.com/p/796e2f7f0ed2
TabLayout实现顶部导航
https://www.jianshu.com/p/88679fed9ecb
bottom sheet 谈不上控件什么的,就是一种提供选项给用户的方式,底部弹出选项栏:
https://blog.csdn.net/Fly_li_sir/article/details/79716898
使用BottomNavigationView底部导航栏、添加数量角标提醒
https://blog.csdn.net/a_zhon/article/details/78334515
https://blog.csdn.net/Fly_li_sir/article/details/80064979
到这里,基本可以得到一个通用的结论,那就是在Material Design中,外层的布局方式基本为最外层为DrawerLayout的滑动布局,滑动布局内部的主界面为CoordinatorLayout布局,而滑动的隐藏布局为NavigationView,而用户的主页布局只需在CoordinatorLayout添加布局即可,而隐藏界面的布局则通过menu文件和layout文件来指定给NavigationView即可,基本框架如下xml文件所示: