Android Material Design学习笔记

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

https://github.com/TeaAndCoffeeParty/android_practice/commit/e9698a219cf3fd88c2fbeffedf1c441bb64def2f

增加Label显示标题

https://github.com/TeaAndCoffeeParty/android_practice/commit/4bce5102e813eb7026276211a83fb2bfa45c45e8

然后给Toolbar增加Action按钮

https://github.com/TeaAndCoffeeParty/android_practice/commit/d51241dde601677227d93c1c1a65c69f33e72fb0

showAsAction主要有以下几种值可选:

always表示永远显示在Toolbar中,如果屏幕空间不够则不显示;

ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单当中;

never则表示永远显示在菜单当中。

滑动菜单

Drawer Layout

在主屏幕左边可以滑出一个菜单,这样既节省了空间,也实现了非常好的效果。这是Material Design推荐的做法。

如果自己去实现,难度很大。google直接写好了控件,只需要使用它就行了。

Drawer layout是一个布局,在布局中允许放入两个直接子控件:

一个用于显示主程序中的内容

一个用于显示滑动菜单中的内容

https://github.com/TeaAndCoffeeParty/android_practice/commit/81aee6c6675904d4f9ccb01898c01f3df5d03a2a

这里最外层使用了supportv4提供的drawerlayout,放置了两个控件,一个时framelayout用于显示主程序,另一个时TextView用于显示滑动菜单中的内容。这只是简单的示例,其实换成其他的都可以。

但是第二个控件的layout_gravity属性必须是指定的,因为需要告诉drawer layout从哪里划出菜单。start在不同的语系里会表示左边或者右边。

只是稍微改动了一下,就有不错的效果了。

接下来在toolbar的左边新增一个按钮,让他能显示滑动菜单,防止用户不知道左边可以拖出菜单

https://github.com/TeaAndCoffeeParty/android_practice/commit/df2107e6c32c312dc7adfa3c5ddcf2444e17a3d5

使用supportActionBar获取toobar,然后调用setDisplayHomeAsUpEnabled开启最左侧的按钮。最左侧的按钮就是home。

并且在toolbar的click信号中添加触发滑动菜单的按钮。注意openDrawer需要传入一个layout_grivity的参数。为了保证和xml一致,我们传入GravityCompat.START

滑动菜单的内容有点丑陋,使用NavgationView可以优化它。

  1. 首先需要在app/build.gradle里引入需要的苦
  2. 创建nav_menu.xml文件,并添加一系列的控件内容
  3. 创建nav_header.xml,来显示menu菜单和个人信息
  4. 在main_activity.xml里替换textView
    https://github.com/TeaAndCoffeeParty/android_practice/commit/73caf17906158abc14262edc0dd8541a5a63354a
  5. 添加点击时间触发动作
    https://github.com/TeaAndCoffeeParty/android_practice/commit/45c56d9c8fd219c9379f676ab69a2ea9f5dfed39

悬浮按钮和可交互提示

FloatingActionButton

在Framelayout里添加一个floatingActionButton并放在屏幕的最右下角

https://github.com/TeaAndCoffeeParty/android_practice/commit/e1bd140309b2a14a5ba2a59455ac33192d72a9f9

使用app:elevation="8dp"来添加阴影,数字越大光照越高,阴影也就越大,颜色深度也越深。

https://github.com/TeaAndCoffeeParty/android_practice/commit/a04298930a83c3577bb73425e1ea8287bc4c84e0

给floatingActionButton添加触发事件

https://github.com/TeaAndCoffeeParty/android_practice/commit/456d1b938a2830a89f595473784572bf445f61b0

Snackbar

相比于Toast可以使用SnackBar扩展它,相比于Toast只能告诉用户发生了什么。SnakBar可以有一个交互按钮,当用户点击交互按钮的时候,可以触发某些动作。比如如果误删了某个文件,可以按下Undo来撤销这个操作。

用法也非常简单,使用时需要传入view,只要是当前布局的view就行。Snackbar会自动找到当前最外层的布局,第二个参数是显示的内容,第三个参数是显示的时长。

https://github.com/TeaAndCoffeeParty/android_practice/commit/12d602bf2089c07eb15fee288963262d55b565dd

目前有一个bug,就是悬浮的按钮被提示挡住了,使用coordinate layout可以避免这个问题

coordinate layout

coordinate layout是加强版的framelayout,这个布局也是desig support库提供的。

在普通情况下,它和Frame Layout是一样的,不过它可以监听所有子控件的事件,自动帮我们作出最优的响应

当coordinate layout监听到snackbar的弹出消息时,它会自动把floating action bar上移从而确保不会被遮挡,改动也很简单

https://github.com/TeaAndCoffeeParty/android_practice/commit/833737d35eccf54996f93019df9d92e6a17f45f7

卡片式布局

MaterialCardView

MaterialCardView是用于实现卡片式布局效果的重要空间,由Material库提供。

MaterialCardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的感觉。

  1. 在app/build.gradle文件中声明库的依赖,是添加了Glide库的依赖
    https://github.com/TeaAndCoffeeParty/android_practice/commit/a9c5a97c57e5b9cee9659bfa6815a9ad1f5ed7c3
  2. 修改activity_main.xml中的代码,在CoordinatorLayout中添加了一个RecyclerView,给它指定一个id,然后将宽度和高度都设置为match_parent,这样RecyclerView就占满了整个布局的空间。
    https://github.com/TeaAndCoffeeParty/android_practice/commit/3b0061c666a8a55e63626b970062b87dbf535a04
  3. 定义一个实体类Fruit,name表示水果的名字,imageId表示水果对应图片的资源id
  4. 为RecyclerView的子项指定一个我们自定义的布局,在layout目录下新建fruit_item.xml
  5. 为RecyclerView准备一个适配器,新建FruitAdapter类,让这个适配器继承自RecyclerView.Adapter,并将泛型指定为FruitAdapter.ViewHolder
  6. 修改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才能解决前面的遮挡问题呢?其实只需要两步就可以了

  1. 第一步将Toolbar嵌套到AppBarLayout中
    https://github.com/TeaAndCoffeeParty/android_practice/commit/c0aca1b570fae7c34a2b594997ae3359c9ece0df
  2. 第二步给RecyclerView指定一个布局行为。
    https://github.com/TeaAndCoffeeParty/android_practice/commit/812c7632f67d881f1cdc156c008a90d59feddfd2

下拉刷新

SwipeRefreshLayout就是用于实现下拉刷新功能的核心类,我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以迅速让这个控件支持下拉刷新。

  1. 使用SwipeRefreshLayout之前首先需要在app/build.gradle文件中添加依赖
  2. 修改activity_main.xml中的代码,在RecyclerView的外面又嵌套了一层SwipeRefreshLayout,这样RecyclerView就自动拥有下拉刷新功能了。
  3. 修改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中的内容主要分为两部分,一个是水果标题栏,一个是水果内容详情

  1. 首先实现标题栏部分,这里使用CoordinatorLayout作为最外层布局
  2. 接着我在CoordinatorLayout中嵌套一个AppBarLayout
  3. 接下来在AppBarLayout中再嵌套一个CollapsingToolbarLayout
  4. 接下来在CollapsingToolbarLayout中定义标题栏的具体内容
  5. 继续修改activity_fruit.xml中的代码,水果内容详情的最外层布局使用了一个NestedScrollView。不管是ScrollView还是NestedScrollView,它们的内部都只允许存在一个直接子布局。
  6. 通常会先嵌套一个LinearLayout,然后再在LinearLayout中放入具体的内容就可以了
  7. 接下来在LinearLayout中放入具体的内容,这里我准备使用一个TextView来显示水果的内容详情,并将TextView放在一个卡片式布局当中
  8. 还可以在界面上再添加一个悬浮按钮。
  9. 界面完成了之后,接下来我们开始编写功能逻辑,修改FruitActivity中的代码。在onCreate()方法中,我们通过Intent获取了传入的水果名和水果图片的资源id。接着使用了Toolbar的标准用法,将它作为ActionBar显示,并启用Home按钮。由于Home按钮的默认图标就是一个返回箭头,这正是我们所期望的,因此就不用额外设置别的图标了。
  10. 接下来开始填充界面上的内容,调用CollapsingToolbarLayout的setTitle()方法,将水果名设置成当前界面的标题,然后使用Glide加载传入的水果图片,并设置到标题栏的ImageView上面。接着需要填充水果的内容详情,由于这只是一个示例程序,并不需要什么真实的数据,所以我使用了一个generateFruitContent()方法将水果名循环拼接500次,从而生成了一个比较长的字符串,将它设置到了TextView上面。
  11. 最后,我们在onOptionsItemSelected()方法中处理了Home按钮的点击事件,当点击这个按钮时,就调用finish()方法关闭当前的Activity,从而返回上一个Activity
  12. 处理RecyclerView的点击事件,不然的话,我们根本就无法打开FruitActivity。修改FruitAdapter中的代码
    https://github.com/TeaAndCoffeeParty/android_practice/commit/11d7507f2671a8bca6c28240685a24ed05a4c77e

充分利用系统状态栏空间

  1. 需要借助android:fitsSystemWindows这个属性来实现。在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的
    布局中,将控件的android:fitsSystemWindows属性指定成true,就表示该控件会出现在系统状态栏里。对应到我们的程序,那就是水果标题栏中的ImageView应该设置这个属性了。
    不过只给ImageView设置这个属性是没有用的,我们必须将ImageView布局结构中的所有父布局都设置上这个属性才可以,修改activity_fruit.xml中的代码。
  2. 即使我们将android:fitsSystemWindows属性都设置好了也没有用,因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单,在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了。
  3. 打开res/values/styles.xml文件,对主题的内容进行修改
    https://github.com/TeaAndCoffeeParty/android_practice/commit/0856abf7dac525c13b72703ef3d97fbc702e99e2
相关推荐
hopetomorrow1 分钟前
学习路之压力测试--jmeter安装教程
学习·jmeter·压力测试
hopetomorrow2 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
闲暇部落23 分钟前
‌Kotlin中的?.和!!主要区别
android·开发语言·kotlin
/**书香门第*/30 分钟前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
美式小田1 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
_不会dp不改名_1 小时前
HCIA笔记3--TCP-UDP-交换机工作原理
笔记·tcp/ip·udp
-一杯为品-2 小时前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
诸神黄昏EX2 小时前
Android 分区相关介绍
android
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网