Material Design 常用控件总结

(个人笔记,如有错误,欢迎指正)

Material Design 相关的控件有很多,这里先就常用的一些控件做简要的介绍,待日后再对每一个控件进行详尽地学习。

由于控件数量繁多,不便于记忆,因此在这里就以控件的独立性为标准,简单地将其分为两类,分别是独立控件协作控件。所谓的独立控件,就是一些功能上比较独立,不需要和其他控件协作的控件;所谓的协作控件,就是一些功能上需要和其他控件配合使用的控件。具体思维导图如下:

在这里插入图片描述
以下是对各个控件的简介,包括所在的包及其具体功能。

独立控件

Snackbar

com.google.android.material.snackbar

Snackbar可以在屏幕底部快速弹出信息,相当于Toast的增强版本。但是Snackbar可以包含操作,而且也支持从屏幕上滑动关闭。

在这里插入图片描述

Toolbar

androidx.appcompat.widget.Toolbar

Toolbar可以看作是ActionBar的升级版,在保留原有ActionBar基本功能的基础上,又增添了许多新的功能特性。要注意的是,如果使用Toolbar代替ActionBar,那么必须使用没有ActionBar的主题。

在这里插入图片描述

FloatingActionButton

com.google.android.material.floatingactionbutton.FloatingActionButton

FloatingActionButton是悬浮按钮,简称FAB,外观上比较新颖,使用上比较简单,只是属性比较多。

RecyclerView

androidx.recyclerview.widget.RecyclerView

RecyclerView是ListView的增强版,在性能优化以及使用便捷程度等方面相对于后者更加优秀。

SwipeRefreshLayout

androidx.swiperefreshlayout.widget.SwipeRefreshLayout

SwipeRefreshLayout可以实现下拉刷新的功能,简单而又不失优雅。

在这里插入图片描述

CardView

androidx.cardview.widget.CardView

CardView称为卡片布局,本质上是一个Layout,且继承自帧布局。其中的卡片可以包含圆角和阴影效果。

协作控件

CoordinatorLayout

AppBarLayout

CollapsingToolbarLayout

androidx.coordinatorlayout.widget.CoordinatorLayout
com.google.android.material.AppBarLayout
com.google.android.material.CollapsingToolbarLayout

以上三个布局需要配合使用,最终可以实现折叠Toolbar的滑动效果。

CoordinatorLayout称为协调者布局,顾名思义,其作用主要是通过Behavior协调子View,从而实现嵌套滑动的效果。这里要注意的是,只有定义了Behavior的子View才可以被协调。

AppBarLayout一般直接用作CoordinatorLayout的直接子布局,如果其在别的布局中使用,那么大部分功能都会失效。此布局继承自线性布局,默认为竖直方向,其主要的功能是可以支持滑动手势,亦即Toolbar移出和进入屏幕的效果。此外,此布局不仅可以包含Toolbar,也可以包含其他View

CollapsingToolbarLayout是AppBarLayout的直接子布局,本质上是一个实现了折叠功能的Toolbar

在这里插入图片描述

DrawerLayout

NavigationView

androidx.drawerlayout.widget.DrawerLayout
com.google.android.material.NavigationView

DrawerLayout 称为抽屉布局,也叫做侧滑菜单。顾名思义,通过此布局可以实现左右侧滑式的菜单。

NavigationView亦称为导航视图,其主要功能是提供一个导航栏,包括头部布局和菜单两个部分。NavigationView一般与DrawerLayout配合使用,是前者的第二个子View

在这里插入图片描述

TabLayout

com.google.android.material.tabs.TabLayout

TabLayoutTabLayout可以实现页面的切换,应该与ViewPager一起使用,也可以和Fragment相结合使用。

在这里插入图片描述
在这里插入图片描述


版权声明:本文为weixin_45675146原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。