android material design 军火库控件

文章目录

一、罗列MD风格的控件
- DrawerLayout（滑动菜单-主体布局）
- Toolbar
- NavigationView（滑动菜单-菜单布局）
- FloatingActionButton + Sanckbar
- CoordinatorLayout
- CardView（卡片式布局）
- AppBarLayout
- SwipeRefreshLayout（下拉刷新）
- CollapsingToolbarLayout（）
- NestedScrollView
- TextInputLayout
- SwitchCompat
- TabLayout
- Bottom Sheet
- BottomNavigationView
二、一点经验

一、罗列MD风格的控件

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（滑动菜单-主体布局）

首先介绍第一个控件就是DrawerLayout，是Material Design最基础的控件，滑动菜单就是将一些菜单选项隐藏起来，而不是放在主屏幕上，然后可以通过滑动的方式将菜单显示出来。DrawerLayout的用法很简单，首先它是一个布局，允许在布局中放入两个直接子控件，第一个控件是主屏幕中显示的内容，第二个则是隐藏的控件通过滑动来显示内容。

https://blog.csdn.net/XCF95319605/article/details/81121207

Toolbar

当我们的滑动菜单弹出的时候，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

NavigationView（滑动菜单-菜单布局）

目前我们已经可以实现简单的滑动菜单效果，但是效果还比较的简陋，不过我们可以通过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 + Sanckbar

FloatingActionButton的点击事件的使用和普通的Button是相同的，我们在FloatingActionButton的点击事件中使用Sanckbar来提示用户，Sanckbar的使用和Toast类似，只是除了提示以外，Sanckbar还可以执行一些简单的逻辑，Activity代码如下：

https://blog.csdn.net/XCF95319605/article/details/81121207

CoordinatorLayout

从上面第四步的截图我们发现弹出的Snackbar遮挡住了我们的浮动按钮，这是一种很不友好的用户体验，所以，Google为我们准备了CoordinatorLayout这个控件来解决这个问题，同样是在Design支持库中，我们只需要将滑动菜单的默认显示页的最外层布局指定为CoordinatorLayout即可，修改后的xml文件如下所示。为什么CoordinatorLayout可以实现让浮动按钮向上移动的效果呢？那是因为该控件会监听它里面所有控件的状态，接下来看看使用CoordinatorLayout后的运行效果，

https://blog.csdn.net/XCF95319605/article/details/81121207

CardView（卡片式布局）

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

这个控件就是为了解决上面的遮挡问题的，实际上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

SwipeRefreshLayout（下拉刷新）

到目前为止，基本的数据已经可以正常展示了，现在，我们将模拟的数据换成新闻数据，然后用Recycler

View来展示新闻，然后实现下拉刷新新闻数据，说到下拉刷新，Google也为我们封装了一个适配MD风格的控件，就是SwipeRefreshLayout，SwipeRefreshLayout的使用很简单，我们只需在之前的RecyclerView控件的外层加上SwipeRefreshLayout就行了，activity_main.xml布局文件修改如下：

https://blog.csdn.net/XCF95319605/article/details/81121207

CollapsingToolbarLayout（）

新闻展示界面我们已经做好了，现在就来进行新闻详细显示页的布局，用到的控件基本都是前面所学过的控件，不过这里要新学习一个控件就是CollapsingToolbarLayout，该控件可以实现一个可折叠式标题栏的效果，根据控件名我们就能猜出，该控件是作用于Toolbar之上的，而且该控件也是由Design支持库提供的，并且该控件只能嵌套在AppBarLayout中使用，即xml布局文件应该是这种结构：

https://blog.csdn.net/XCF95319605/article/details/81121207

NestedScrollView

现在，可折叠式标题栏也完成了，就差显示新闻详情的界面了，在这儿我们用NestedScrollView来作为显示新闻的最外层的布局，里面嵌套一个线性布局（注意：NestedScrollView布局内只能有一个布局，所以我们嵌套线性布局来进行里面的布局），里面的布局也很简单，在线性布局内嵌套CardView，在CardView的里面放一个TextView就ok了，完整的布局文件如下所示，包括上面的可折叠式标题栏的布局：

https://blog.csdn.net/XCF95319605/article/details/81121207

TextInputLayout

TextinputLayout实际上可以看成对EditText加装了一层外壳
https://blog.csdn.net/weixin_43889841/article/details/90703441

https://blog.csdn.net/Fly_li_sir/article/details/79704021

SwitchCompat

SwitchCompat是符合谷歌Material design的Selection control组件，与传统的Switch以及ToggleButton不同，v7包中的这个组件兼容了绝大多数低版本手机，令组件的兼容性得到了极大的提升。

https://www.jianshu.com/p/796e2f7f0ed2

TabLayout

TabLayout实现顶部导航
https://www.jianshu.com/p/88679fed9ecb

Bottom Sheet

bottom sheet 谈不上控件什么的，就是一种提供选项给用户的方式，底部弹出选项栏：
https://blog.csdn.net/Fly_li_sir/article/details/79716898

BottomNavigationView

使用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文件所示：