第一行Android代码课件第十二章MaterialDesign.pptx

《第一行Android代码课件第十二章MaterialDesign.pptx》由会员分享，可在线阅读，更多相关《第一行Android代码课件第十二章MaterialDesign.pptx（66页珍藏版）》请在三一文库上搜索。

1、第十二章 最佳的 UI 体验Material Design 实战1什么是MaterialDesign2ToolBar3滑动菜单4悬浮按钮和可交互提示5卡片式布局6下拉刷新7可叠式标题栏目录目录MaterialDesign是由Google的设计工程师们基于传统优秀的设计原则，给丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉，运动，互动效果等特性。GoogleI/O大会上推出了DesignSupport库，这个库将MaterialDesign中最具有代表性的一些控件和效果进行了封装，使得我们开发者能够轻松的将自己的应用程序Material化。12.1 什么是Material Des

2、ignActionBar的设计被限定只能位于活动的顶部，从而不能实现MaterialDesign的效果。因此官方更加推荐使用ToolBar12.2 ToolBar使用android：theme属性指定了一个AppTheme的主题。打开res/values/styles.xml文件，如下这里定义了一个叫AppTheme的主题，然后指定了它的parent主题是Theme.AppCompat.Light.DarkActionBar。这个DarkActionBar是一个深色的主题，项目中自带的ActionBar就是因为指定了这个主题才出现的。任何一个新建项目，默认都会显示ActionBarTheme.

3、AppCompat.NoActionBar（深色主题）Theme.AppCompat.Light.NoActionBar（浅色主题）ToolBarToolBar来代替来代替ActionBarActionBar现在我们已经将ActionBar隐藏起来了，使用ToolBar来代替ActionBar。修改activity_main.xml中的代码如下使用了 xmlns:app 指定了一个新的命名空间。是由于MaterialDesign是在Android5.0系统中才出现的，为了兼容之前老的系统，我们就必须使用app:attribute。修改MainActivity中的代码Toolbar常用的一些功能

4、比如修改标题栏上显示的文字内容为了丰富我们Toolbar，可以再添加action按钮。准备一些图片来作为按钮的图标。将它们放在drawable-xxhdpi目录下。创建一个meum文件夹。再创建一个toolbar.xml文件，并编写代码如下：增加增加MenuMenu修改MainActivity中的代码如下：12.3 滑动菜单DrawerLayout的用法：它是一个布局，在布局中放入两个直接子控件，第一个子控件是显示在主屏幕中的显示内容，第二个控件是滑动菜单中显示的内容。12.3.1 DrawerLayout第一个子控件FrameLayout（用于作为主屏幕显示的内容）；第二个子控件TextV

5、iew（作为滑动菜单中显示的内容），这个子控件中android:layout_gravity这个属性必须指定，滑动菜单是在屏幕的左边还是右边，left，right。activity_main.xml中的代码运行效果运行效果将准备好的c_menu.png放在drawable-xxhdpi目录下，修改MainActivity中的代码如下导入依赖包：compile com.android.support:design:24.2.1 compile de.hdodenhof:circleimageview:2.1.0第一个依赖库就是DesignSupport库；第二个库是一个开源的CircleImag

6、eView，轻松实现圆形化的功能。12.3.2 NavigationView首先要准备：menu（在NavigationView中显示的菜单项）和headerLayout（在NavigationView中显示头部布局的）。在嵌套了（一组），将group的checkableBehavior属性设为single（所有菜单项只能单选）nav_menu.xml文件nav_header.xmlheaderLayout，这是一个随意定制的布局，那我们就在里面放置头像，用户名，邮箱吧。用NavigationView取代TextView，出来菜单接下来我们使用 NavigationView 了，修改activ

7、ity_main中的代码如下MainActivity中的代码运行效果运行效果12.4 悬浮按钮和可交互提示FloatingActionButton也是DesignSupport库中的一个控件，来实现悬浮按钮的效果。还可以给这个按钮指定图标，表示来做什么。12.4.1 FloatingActionButton12.4.1 FloatingActionButtonapp:elevation属性给FloatingActionButton按钮设置阴影（指定高度值）。代码如下代码如下处理FloatingActionButton点击事件Toast作用是告诉用户发生了什么事情，但同时用户只能被动接收这个事情

8、没有办法让用户原则。Snackbar提示加入一个可交互按钮，当用户点击可以执行一些额外的操作。12.4.2 SnackbarSnackbarSnackbar代码代码Snakebar上面有我们提示的文字，UNDO按钮可以点击。过一段时间Snakebar从底部消失（自带动画，用户提体比较好）。这个Snakebar将我们的悬浮按钮遮挡了。这是一个bug，影响用户体验。解决办法借助CoordinatorLaoyout轻松解决。CoordinatorLaoyout是一个加强版的FrameLayout。它也是DesignSupport库提供的。它可以监听所有子控件的各种事情，自动帮助我们做出合理的响应。

9、12.4.3 CoordinatorLaoyout只需要CoordinatorLaoyout来替换我们的FrameLayout，修改main_activity.xml中的代码如下：消失的时候，悬浮按钮会回到原来的位置，悬浮按钮的上下偏移也伴随着动画的效果，且与Snakebar完全同步，整体效果赏心悦目。水果图片Material化，实现卡片式布局的效果。并且能够拥有圆角和投影。使用RecycleView来填充这个项目的主界面部分。升级水果图片列表。先将准备好的图片放置在项目中。12.5 卡片式布局CardView是实现卡片式布局的重要控件（appcompat-v7），它也是一个FrameLayo

10、ut，只是额外增加了圆角和投影的效果，立体感。12.5.1 CardView12.5.1 CardViewcompile com.android.support:cardview-v7:24.2.1 compile com.android.support:recyclerview-v7:24.2.1 compile com.github.bumptech.glide:glide:4.0.0-RC0最后我们添加了Glide库的依赖，它是一个超级强大的图片加载库，不仅可以加载本地图片，也可以加载网络图片，GIF图片，甚至是本地视频。添加依赖：MainActivity中的代码名字，图片定义Fruit

11、实体类定义RecycleView的子项布局fruit_item.xml文件为RecycleView准备FruitAdapter适配器，继承自RecycleView.Adapter，并将泛型指定为FruitAdapter.ViewHolder，代码如下：MainActivity中的代码我们把精美的图片展示在单独的卡片当中，并且还有圆角和阴影（美观）。我么发现了一个bug，Toolbar被RecycleView遮住了。为了解决这个问题，借助工具AppBarLayout。既然我们使用的是CoordinatorLayout（原理），自然会有更加巧妙的办法解决。DesignSupport中的AppBar

12、Layout。实际是一个垂直方向的LinerLayout，它在内部做了很多滚动封装，使用MaterialDesign设计理念。12.5.2 AppBarLayout只需两步解决Toolbar覆盖问题：第一步，将Toolbar嵌套到AppBarLayout中，第二步，给RecycleView指定一个布局（app:layout_behavior）。activity_main.xml中的代码进一步优化，AppBarLayout实现MaterialDesign效果，当AppBarLayout接收到滚动事件，通过app:layout_scrollFlags属性实现内部子控件的事件。运行效果运行效果指定a

13、pp:layout_scrollFlags属性scroll|enterAlways|snap。scroll表示当RecycleView向上滚动的时候，Toolbar会跟着向上滑动并实现隐藏；enterAlways表示当RecycleView向下滑动并重新显示。snap表示Toolbar还没有完全隐藏或显示的时候，根据当前滚动的距离自动选择显示还是隐藏。activity_main中的代码MaterialDesign中制定了Android的统一的下拉刷新的风格。SwipeRefreshLayout（support-v4）是用于实现下拉刷新的核心类。在RecycleView外层嵌套SwipeRefr

14、eshLayout，12.6 下拉刷新activity_main.xml中的代码MainActivity中的代码在屏幕往下托，就会出现下拉刷新的进度条，松手就会自动刷新实现可叠式标题栏CollapsingToolbarLayout12.7 可叠式标题栏CollapsingToolbarLayout（DesignSupport）它是一个作用于Toolbar基础之上的布局。它可以让Toolbar的效果变得更加丰富，实现非常华丽的效果。CollapsingToolbarLayout是不能独立存在的，它只限制在作为AppBarLayout子布局来使用。而AppBarLayout又必须作为Coordin

15、atorLayout的子布局。12.7.1 CollapsingToolbarLayout12.7.1 CollapsingToolbarLayout创建水果的详情展示界面，创建FruitActivity，并指定布局成为activity_fruit.xml，主要分为两部分：一个是水果标题栏，一个是水果内容详情。这里使用CoordinatorLayout来作为最外层布局，里面嵌套AppBarLayout，在AppBarLayout里面嵌套CollapsingToolbarLayout布局，代码如下：首先实现标题栏部分首先实现标题栏部分NestedScrollViewNestedScrollVie

16、w布局和AppBarLayout是同级，与SrollView用法一样，增加了嵌套响应滚蛋事件的功能。只允许存放在一个直接子布局。app:layout_behavior属性指定行为布局，与之前的RecycleView用法一样。接下来编写水果内容详情部分，继续修改activity_fruit.xml中的代码FruitActivity中的代码FruitAdapter来处理RecycleView的点击事件Android5.0系统之后支持对状态栏和背景进行操作（使背景图和状态栏融合）。我们需要借助android:fitsSystemWindows这个属性来完成。在CoordinatorLayout，Ap

17、pBarLayout，CollapingToobarLayout这种嵌套结构的布局中将这个属性设置为true（表示该控件会出现在系统状态栏里）。设置完之后，我们还必须将程序中的状态栏指定为透明色。由于android：statusBarColor（android:color/transparent）属性是Android5.0系统开始有的，系统差异。12.7.2 充分利用系统状态栏空间Android5.0系统之后支持对状态栏和背景进行操作（使背景图和状态栏融合）。我们需要借助android:fitsSystemWindows这个属性来完成。在CoordinatorLayout，AppBarLayout，CollapingToobarLayout这种嵌套结构的布局中还，将这个属性设置为true（表示该控件会出现在系统状态栏里）。谢谢！本章结束本章结束