概述

Size: px

Start display at page:

Download "概述"

毅边
5 years ago
Views:

1 Android Material Design 基础北京理工大学计算机学院金旭亮

2 概述

3 概述 Material Design 是 Google 提出的一种 UI 设计风格, 主要用在 Android App 的开发中, 同时, 也为 AngularJS 提供了相应的组件, 可以用于开发具有 Material Design 风格的网页

4 设置 Material 主题 Material Design 其实是一种 UI 设计理念, 为了体现这种理念,Google 为 Android 应用设计了若干个主题, 主要是解决配色动画效果等问题, 同时, 提供了一些基于这些设计理念开发出来的 UI 控件

5 使用 Material Design 支持包要应用 Material Design, 关键是引入相应版本的支持库, 库中包容了可用的软件组件在 build.gradle 中指定依赖

6 在 styles.xml 中指定要用的 Material 主题在此设定 Material 的主题名字文件夹名字 :res/values/styles.xml

7 四种常用的系统内置 Material Theme android:theme.material android:theme.material.light android:theme.material.light.darkactionbar android:theme.material.noactionbar

8 Android App 主题中, 最重要的就是配色每种主题, 都定义了相应的颜色常量, 通过在 styles.xml 中修改这些常量的数值, 就能批量地调整相应 UI 元素的颜色

9 主题调色板 (Color Palette) 中的标准颜色名称 -1

10 调色板 (Color Palette) 中的标准颜色名称 -2

11 调色板 (Color Palette) 中的标准颜色名称 -3

12 处理兼容性问题 - 主题名称 Material Design 仅 Android API 21 以上版本支持, 为了实现兼容性, 应该这样干 : 默认的 Material 主题 (>=API 21) Theme:Material Theme:Material.Light Theme.Material.Light.DarkActionBar Theme.Material.NoActionBar 兼容以前版本 (>=API 7) 的主题 Theme.AppCompat Theme.AppCompat.Light Theme.AppCompat.Light.DarkActionBar Theme.AppCompat.NoActionBar

13 处理兼容性问题 - 资源文件夹资源文件名字 (>=API 21) 兼容以前版本 (>=API 7) 的资源文件夹名 drawable drawable( 低于 21 的版本用 ) drawable-v21( 高于 21 的版本用 ) values layout values values-v21 layout layout-v21 简单地说, 当你需要同时在低版本 ( 低于 API 21) 的手机上使用 Material Design 时, 要将资源分为两个文件夹放置, 一个是低版本用的, 另一个是高版本用的 ( 后面加了一个 v21 的后缀 )

14 处理兼容性问题 - 用代码在运行时检测 Android 版本 // 是 Android 5.0 以上的版本吗? if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { } else { } // 是, 可以安全地调用 material design 相关的 API // 否, 使用传统的早期版本的 API

15 Android Material Design 支持库中, 包容了一些新的控件, 这些控件都遵循了 Material Design 的设计原则和理念在开发新的 Android App 时, 建议使用这些控件取代传统的老控件

16 Floating Action Button 和 Snack bar

17 使用 Android Studio 创建项目时, 如果选中这个模板, 里面就直接放置了一个 Floating Button 和一个 Snack Bar

18 Floating Action Button Floating Action Bar 拥有以下常用属性 : fabsize: 有大和小两种尺寸 borderwidth: 指定图标与边框的距离 Floating Action Button 本质上就是一个按钮, 不过它始终居于右下角, 并且具备动态调整位置的功能

19 Snackbar Snack Bar 可以看成是一种显示短期消息的方式, 类似于 Toast, 只不过它是显示在屏幕下方, 可以用手指向右拖动以消除之, 并且还可以拥有按钮, 响应手指点触

20 Android Studio 的 Basic Activity Floating Aciton Button, 它总位于 Snack Bar 上方, 不会被挡住手指点触 Snack Bar 消失,Floating Action Button 回到原位置

21 基本用法如果希望能响应用户的点触操作, 可以给 setaction() 方法的第二个参数传入一个事件响应者

22 Snack Bar 上的按钮点击事件响应代码 Snackbar 的 Action, 其实就是一个按钮, 采用与按钮单击一样的事件响应接口

23 Coordinator Layout 的作用 Floating Action Button 之所以能动态地给 Snack Bar 让出位置, 是因为它们都位于 Coordinator Layout 之内 Coordinator Layout 可以看成是一个功能增强的 Frame Layout 它主要用于承载支持 Material Design 特性的相应控件, 能够协调它所包容的子控件之间的协作关系 Material Design 支持库中, 还提供了另外一些 Layout, 请自行阅读相应文档

24 Floating Label

25 Floating Label 拥有焦点, 用户开始输入时, 提示信息移到了上部用户未输入文本

26 如果用户输入了无效的数据, 以红色显示出错信息示例 :FloatingLabel

27 实现 Floating Label 只需要将 EditText 放到 TextInputLayout 中, 就可以实现 Floating Label

28 通过调用 EditText 控件的 seterror 方法, 显示特定的数据验证信息

29 ToolBar

30 ToolBar 一个工具栏可以包容 : 导航按钮应用程序图标 (App Icon) 主副标题文字 Action 菜单及其图标

31 ToolBar 派生自 ViewGroup, 这意味着它可以添加任意一种 Android 控件

32 Toolbar 与 ActionBar 早期版本 (Android 5.0) 以前, 主要使用 ActionBar, 5.0 以后, 应该使用 ToolBar, 它支持 ActionBar 的所有功能, 并且比 ActionBar 更灵活易用当使用 Toolbar 取代 ActionBar 时, 通常需要隐藏内置的 ActionBar

33 在布局文件中声明 Toolbar

34 在 Activity 中设置 Toolbar 使用 setsupportactionbar() 方法, 可以让 Toolbar 取代 ActionBar 的功能 Toolbar 中提供了相应的方法, 比如 setlogo setnavigationicon 等, 可以设置工具栏的显示内容详情请查看官方文档

35 当作 ActionBar 使用的 Toolbar 同样支持菜单在 my_menu.xml 中定义菜单之后, 重写 Activity 的相应方法 :

36 在 Activity 的 onoptionsitemselected() 方法中处理菜单项的单击响应

37 示例 ToolbarDemo 运行效果

38 Card View

39 CardView 概述 CardView, 其实就是一个圆角矩形, 里面显示文本图片等内容, 类似于现实生活中的便签 CardView, 可看成是一个简化版的 FrameLayout, 只不过它有着圆角的边界和阴影效果罢了示例 :CardViewDemo

40 添加依赖 compile 'com.android.support:cardview-v7:25.0.0' 常用属性 cardcornerradius: 定义圆角半径在这里放置卡片内容 cardbackgroundcolor: 定义卡片的背景色

41 Navigation View

42 概述 Navigation View 是一种常见的 Android 应用界面布局方式, 它包容一个菜单, 可以从屏幕左部滑入和滑出导航视图, 可以自定义其 Header 导航视图的主体, 其实是一个 Menu 组件

43 用于创建 Navigation View 的项目模板

44 点击之后, 弹出 Navigation Drawer Header 部分, 是一个 View, 里面可以放置各种控件其实就是一个 Menu, 可以为每个选项添加事件响应代码

45 主界面容器主界面的次级容器 ( 包容 ToolBar) 主界面内容 ( 包容 Floating Button) 导航面板的首部 ( 包容图标等 ) 导航面板所关联的菜单显示在主界面 ActionBar 上的菜单

46 activity_main.xml 注意其顶层容器是 DrawerLayout 使用 <include> 引入 app_bar_main.xml, 其中定义了在主界面上显示的 ActionBar 和 Floating Button 定义了导航面板

47 app_bar_main.xml 注意其顶层容器是 CoordinatorLayout, 以支持 FloatingActionButton 与 SnackBar 之间的位置调整 AppBarLayout 中包容了一个 ToolBar, 当作 ActionBar 使用引入了真正的页面内容, 里面是 RelativeLayout 包容一个 TextView, 显示 Hello, World

48 activity_main 中的导航面板定义指明 header 部分显示什么 ( 示例中是一个 ImageView 和两个 TextView) 菜单构成了导航面板的主体

49 构成导航面板主体的菜单在菜单项中, 可以指定其显示的图标, 并且为其分配 Id, 从而在 MainActivity 的 onnavigationitemselected() 方法中, 可以基于 Id 编写代码响应导航面板的单击事件

50 在 MainActivity 的 oncreate 中初始化导航面板

51 响应导航选项的点击事件

52 及时关闭导航面板用户点击 Back 按钮, 如果导航面板己经显示, 则关闭它

53 RecyclerView

54 概述早期版本的 Android 中,ListView 是一个重量级的控件, 用得极多 Android 5.0 以后, 新提供了一个 RecyclerView, 可以用来取代 ListView, 它内置了对象自动回收的功能, 使用起来比 ListView 更为灵活和方便

55 列表模式网格模式一网格模式二

56 开发要点设计一个数据实体类, 封装每个数据项要显示的内容开发一个 Adapter, 派生自 RecyclerView.Adapter, 它里面封装一个前面所定义数据实体类对象的集合, 并且实现基类中所定义的抽象方法在布局文件中放置 RecyclerView 控件在 Activity 中使用代码关联 Adapter 对象和 RecyclerView 控件实例

57 一个最简单的 RecyclerView 实例 : 没有定义数据实体类, 直接使用字符串作为要显示的数据内容点击之后, 使用 Toast 显示出被点击的内容

58 定义每行要显示的内容 item_layout.xml 在本例中, 因为只需要显示一个字符串, 所以我们直接放置了一个 TextView 如果需要显示更多的内容, 则可以放置 LinearLayout 之类的容器控件, 再向其中加入更多的控件

59 添加 RecyclerView 控件在 Activity 的布局文件中, 放置一个 RecyclerView 控件, 并给其设置 id 值

60 在 Activity 的 oncreate() 方法, 串起一切, 其中关键是三个对象 : 1. RecyclerView 本身 2. LayoutManager 3. Adapter

61 数据适配器的编写数据适配器内部封装数据源, 并且向它所关联的 RecyclerView 对象提供 CRUD 的功能自定义的数据适配器, 派生自抽象基类 RecyclerView.Adapter<>, 其内部要封装一个继承自 RecyclerViewAdapter.ViewHolder 抽象类的内部对象两者均需重写基类的相应方法

62 适配器对象的数据注入自定义适配器需要重写基类的几个方法

63 自定义适配器重写的基类方法 -1

64 自定义适配器重写的基类方法 -2

65 请仔细理解 ViewHolder 的作用与职责, 这是用好 RecyclerView 的关键

66 问 : 如果要实现数据的增删, 怎么办? 答 : RecyclerView.Adapter<> 类中提供了 notifyxxx() 系列方法, 可以通知 RecyclerView, 数据集合中数据项的个数有变更, 你需要刷新显示

67 数据适配器中移除数据的示例代码

68 一个功能比较完备的示例 : RecyclerViewDemo

res/layout 目录下的 main.xml 源码 : <?xml version="1.0" encoding="utf 8"?> <TabHost android:layout_height="fill_parent" xml

res/layout 目录下的 main.xml 源码 : <?xml version=1.0 encoding=utf 8?> <TabHost android:layout_height=fill_parent xml 拓展训练 1- 界面布局 1. 界面布局的重要性做应用程序, 界面是最基本的 Andorid 的界面, 需要写在 res/layout 的 xml 里面, 一般情况下一个 xml 对应一个界面 Android 界面布局有点像写 html( 连注释代码的方式都一样 ), 要先给 Android 定框架, 然后再在框架里面放控件,Android 提供了几种框架,AbsoluteLayout,LinearLayout,