Material Design控件学习记录
Toolbar
新建一个工程后,在res/values/themes.xml文件里
xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MaterialTest" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_200</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
在页面里有详细的说明
Attribute Name | Description | Default Value |
---|---|---|
colorPrimary | The color displayed most frequently across your app's screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color. | #6200EE |
colorPrimaryVariant | A tonal variation of the primary color. | #3700B3 |
colorOnPrimary | A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color. | #FFFFFF |
colorSecondary | The secondary branding color for the app, usually an accented complement to the primary branding color. | #03DAC6 |
colorSecondaryVariant | A tonal variation of the secondary color. | #018786 |
colorOnSecondary | A color that passes accessibility guidelines for text/iconography when drawn on top of the secondary color. | #000000 |
我浅显的理解
这个colorPrimary:就是顶部深色的颜色
这个colorPrimaryVariant :就是MaterialTest的背景色
修改ActionBar成ToolBar
增加Label显示标题
然后给Toolbar增加Action按钮
showAsAction主要有以下几种值可选:
always表示永远显示在Toolbar中,如果屏幕空间不够则不显示;
ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单当中;
never则表示永远显示在菜单当中。
滑动菜单
Drawer Layout
在主屏幕左边可以滑出一个菜单,这样既节省了空间,也实现了非常好的效果。这是Material Design推荐的做法。
如果自己去实现,难度很大。google直接写好了控件,只需要使用它就行了。
Drawer layout是一个布局,在布局中允许放入两个直接子控件:
一个用于显示主程序中的内容
一个用于显示滑动菜单中的内容
这里最外层使用了supportv4提供的drawerlayout,放置了两个控件,一个时framelayout用于显示主程序,另一个时TextView用于显示滑动菜单中的内容。这只是简单的示例,其实换成其他的都可以。
但是第二个控件的layout_gravity属性必须是指定的,因为需要告诉drawer layout从哪里划出菜单。start在不同的语系里会表示左边或者右边。
只是稍微改动了一下,就有不错的效果了。
接下来在toolbar的左边新增一个按钮,让他能显示滑动菜单,防止用户不知道左边可以拖出菜单
使用supportActionBar获取toobar,然后调用setDisplayHomeAsUpEnabled开启最左侧的按钮。最左侧的按钮就是home。
并且在toolbar的click信号中添加触发滑动菜单的按钮。注意openDrawer需要传入一个layout_grivity的参数。为了保证和xml一致,我们传入GravityCompat.START
Navgation View
滑动菜单的内容有点丑陋,使用NavgationView可以优化它。
- 首先需要在app/build.gradle里引入需要的苦
- 创建nav_menu.xml文件,并添加一系列的控件内容
- 创建nav_header.xml,来显示menu菜单和个人信息
- 在main_activity.xml里替换textView
https://github.com/TeaAndCoffeeParty/android_practice/commit/73caf17906158abc14262edc0dd8541a5a63354a - 添加点击时间触发动作
https://github.com/TeaAndCoffeeParty/android_practice/commit/45c56d9c8fd219c9379f676ab69a2ea9f5dfed39
悬浮按钮和可交互提示
FloatingActionButton
在Framelayout里添加一个floatingActionButton并放在屏幕的最右下角
使用app:elevation="8dp"
来添加阴影,数字越大光照越高,阴影也就越大,颜色深度也越深。
给floatingActionButton添加触发事件
Snackbar
相比于Toast可以使用SnackBar扩展它,相比于Toast只能告诉用户发生了什么。SnakBar可以有一个交互按钮,当用户点击交互按钮的时候,可以触发某些动作。比如如果误删了某个文件,可以按下Undo来撤销这个操作。
用法也非常简单,使用时需要传入view,只要是当前布局的view就行。Snackbar会自动找到当前最外层的布局,第二个参数是显示的内容,第三个参数是显示的时长。
目前有一个bug,就是悬浮的按钮被提示挡住了,使用coordinate layout可以避免这个问题
coordinate layout
coordinate layout是加强版的framelayout,这个布局也是desig support库提供的。
在普通情况下,它和Frame Layout是一样的,不过它可以监听所有子控件的事件,自动帮我们作出最优的响应
当coordinate layout监听到snackbar的弹出消息时,它会自动把floating action bar上移从而确保不会被遮挡,改动也很简单
卡片式布局
MaterialCardView
MaterialCardView是用于实现卡片式布局效果的重要空间,由Material库提供。
MaterialCardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的感觉。
- 在app/build.gradle文件中声明库的依赖,是添加了Glide库的依赖
https://github.com/TeaAndCoffeeParty/android_practice/commit/a9c5a97c57e5b9cee9659bfa6815a9ad1f5ed7c3 - 修改activity_main.xml中的代码,在CoordinatorLayout中添加了一个RecyclerView,给它指定一个id,然后将宽度和高度都设置为match_parent,这样RecyclerView就占满了整个布局的空间。
https://github.com/TeaAndCoffeeParty/android_practice/commit/3b0061c666a8a55e63626b970062b87dbf535a04 - 定义一个实体类Fruit,name表示水果的名字,imageId表示水果对应图片的资源id
- 为RecyclerView的子项指定一个我们自定义的布局,在layout目录下新建fruit_item.xml
- 为RecyclerView准备一个适配器,新建FruitAdapter类,让这个适配器继承自RecyclerView.Adapter,并将泛型指定为FruitAdapter.ViewHolder
- 修改MainActivity中的代码,定义了一个水果集合,集合里面存放了很多个Fruit的实例,每个实例都代表一种水果。然后在initFruits()方法中,先是清空了一下fruitList中的数据,接着使用一个随机函数,从刚才定义的Fruit数组中随机挑选一个水果放入fruitList当中,这样每次打开程序看到的水果数据都会是不同的。另外,为了让界面上的数据多一些,这里使用了repeat()函数,随机挑选50个水果
https://github.com/TeaAndCoffeeParty/android_practice/commit/99769bedc2364bae758bd2a32058d90f2a4efdd9
AppBarLayout
我们的Toolbar被RecyclerView给挡住了,需要借助另外一个工具------AppBarLayout
CoordinatorLayout就是一个加强版的FrameLayout,那么FrameLayout中的所有控件在不进行明确定位的情况下,默认都会摆放在布局的左上角,从而产生了遮挡的现象。
使用Material库中提供的另外一个工具------AppBarLayout。AppBarLayout实际上是一个垂直方向的LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些Material Design的设计理念。
怎样使用AppBarLayout才能解决前面的遮挡问题呢?其实只需要两步就可以了
- 第一步将Toolbar嵌套到AppBarLayout中
https://github.com/TeaAndCoffeeParty/android_practice/commit/c0aca1b570fae7c34a2b594997ae3359c9ece0df - 第二步给RecyclerView指定一个布局行为。
https://github.com/TeaAndCoffeeParty/android_practice/commit/812c7632f67d881f1cdc156c008a90d59feddfd2
下拉刷新
SwipeRefreshLayout就是用于实现下拉刷新功能的核心类,我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以迅速让这个控件支持下拉刷新。
- 使用SwipeRefreshLayout之前首先需要在app/build.gradle文件中添加依赖
- 修改activity_main.xml中的代码,在RecyclerView的外面又嵌套了一层SwipeRefreshLayout,这样RecyclerView就自动拥有下拉刷新功能了。
- 修改MainActivity中的代码,在代码中处理具体的刷新逻辑才行。
https://github.com/TeaAndCoffeeParty/android_practice/commit/2d883dec1a5342169514c66a4f0cc59c7bd6b0cd
可折叠式标题栏
实现一个可折叠式标题栏的效果,这需要借助CollapsingToolbarLayout这个工具
CollapsingToolbarLayout
CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,它也是由Material库提供的。
首先我们需要一个额外的Activity作为水果的详情展示界面,右击com.example.materialtest包→New→Activity→Empty Activity,创建一个FruitActivity,并将布局名指定成activity_fruit.xml,然后我们开始编写水果详情展示界面的布局。
activity_fruit.xml中的内容主要分为两部分,一个是水果标题栏,一个是水果内容详情
- 首先实现标题栏部分,这里使用CoordinatorLayout作为最外层布局
- 接着我在CoordinatorLayout中嵌套一个AppBarLayout
- 接下来在AppBarLayout中再嵌套一个CollapsingToolbarLayout
- 接下来在CollapsingToolbarLayout中定义标题栏的具体内容
- 继续修改activity_fruit.xml中的代码,水果内容详情的最外层布局使用了一个NestedScrollView。不管是ScrollView还是NestedScrollView,它们的内部都只允许存在一个直接子布局。
- 通常会先嵌套一个LinearLayout,然后再在LinearLayout中放入具体的内容就可以了
- 接下来在LinearLayout中放入具体的内容,这里我准备使用一个TextView来显示水果的内容详情,并将TextView放在一个卡片式布局当中
- 还可以在界面上再添加一个悬浮按钮。
- 界面完成了之后,接下来我们开始编写功能逻辑,修改FruitActivity中的代码。在onCreate()方法中,我们通过Intent获取了传入的水果名和水果图片的资源id。接着使用了Toolbar的标准用法,将它作为ActionBar显示,并启用Home按钮。由于Home按钮的默认图标就是一个返回箭头,这正是我们所期望的,因此就不用额外设置别的图标了。
- 接下来开始填充界面上的内容,调用CollapsingToolbarLayout的setTitle()方法,将水果名设置成当前界面的标题,然后使用Glide加载传入的水果图片,并设置到标题栏的ImageView上面。接着需要填充水果的内容详情,由于这只是一个示例程序,并不需要什么真实的数据,所以我使用了一个generateFruitContent()方法将水果名循环拼接500次,从而生成了一个比较长的字符串,将它设置到了TextView上面。
- 最后,我们在onOptionsItemSelected()方法中处理了Home按钮的点击事件,当点击这个按钮时,就调用finish()方法关闭当前的Activity,从而返回上一个Activity
- 处理RecyclerView的点击事件,不然的话,我们根本就无法打开FruitActivity。修改FruitAdapter中的代码
https://github.com/TeaAndCoffeeParty/android_practice/commit/11d7507f2671a8bca6c28240685a24ed05a4c77e
充分利用系统状态栏空间
- 需要借助android:fitsSystemWindows这个属性来实现。在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的
布局中,将控件的android:fitsSystemWindows属性指定成true,就表示该控件会出现在系统状态栏里。对应到我们的程序,那就是水果标题栏中的ImageView应该设置这个属性了。
不过只给ImageView设置这个属性是没有用的,我们必须将ImageView布局结构中的所有父布局都设置上这个属性才可以,修改activity_fruit.xml中的代码。 - 即使我们将android:fitsSystemWindows属性都设置好了也没有用,因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单,在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了。
- 打开res/values/styles.xml文件,对主题的内容进行修改
https://github.com/TeaAndCoffeeParty/android_practice/commit/0856abf7dac525c13b72703ef3d97fbc702e99e2