《Android系统设计与开发》课件-第13章

第13章高级UI-MaterialDesign简介13.1立体界面13.2标题栏13.3滑动菜单13.4悬浮按钮13.5Snackbar——可以交互的提示工具13.6CardView13.7下拉刷新本章总结

13.1立体界面

MaterialDesign最明显的改变在于它将界面从二维升到了三维。在Android5.0之前，对于UI显示效果的设计大部分还停留在二维平面，即通过改变不同视图的位置及动画切换来提高界面的美感，虽然取得了不错的效果，但由于设计开发人员面对的是二维视图的设计，产品自然不会脱离这个框架。

MaterialDesign带来了z轴，体现在视图上就是elevation属性，通过设置该值可以让视图体现出不同的高度。elevation可以通过在xml中设置属性值来设置，也可以通过setElevation(float)方法来设置，一般采用直接在xml中设置，具体用法和设置组件宽高一样。

实际设置如下：

13.2标题栏

Toolbar是用来取代actionbar的组件，actionbar就是所有应用的标题栏，在MaterialDesign出现后，由于actionbar不能很好地与Materialdesign相融合，逐渐被抛弃，安卓推荐标题栏使用Toolbar来显示，Toolbar拥有actionbar的所有功能，并且能与MaterialDesign很好地结合。

打开这两个文件后，首先看第一个AndroidManifest.xml文件，里面theme属性值默认为@style/AppTheme，这个指向的文件就是我们打开的第二个文件。所有的Android项目在新建时都有标题栏，而标题栏的默认设置就是通过AppTheme属性来设置的，AppTheme文件中规定了具体的各项属性值，从<stylename="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">可以看出style的parent设置为了DarkActionbar。

上述代码主要完成了ActionBar的隐藏和ToolBar的建立，首先将DarkActionBar改为NoActionBar，完成了ActionBar的隐藏，再在activity_main.xml中新建ToolBar，视图的高度改为?attr/actionBarSize，背景设为colorPrimary，theme设为Dark.ActionBar。这里要弄明白两个theme的区别，style中的theme是整个界面的风格，为浅色的风格，但标题的风格为白色时，不够明显，所以将ToolBar的风格单独设为深色，下面的popupTheme用来指定ToolBar中弹窗的风格，两者的颜色风格不能一样。

在AppTheme文件中只是隐藏了ActionBar，并没有指定标题栏要显示的布局，那怎么将ToolBar显示出来呢？这就需要通过修改MainActivity代码来实现了，添加两行代码，具体如下：

Toolbartoolbar=(Toolbar)findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

首先找到ToolBar控件，然后调用setSupportActionBar(toolbar)，将toolBar传入作为标题栏。运行程序，效果如图13.1所示。

图13.1标题栏运行程序，效果如图13.2所示。点击标题栏中的图片按钮，会有对应的Toast提示信息，读者可以自行测试。

图13.2带菜单栏的标题栏

13.3滑动菜单

现在许多手机App中都使用到了滑动菜单，它可以通过隐藏一些菜单选项实现节省屏幕空间的目的，同时又具有非常炫酷的动画效果，是MaterialDesign中非常推荐的做法。下面通过示例来学习下滑动菜单的实现。

在布局文件中，用DrawerLayout将所有控件包围起来，DrawerLayout是谷歌提供的一个控件，也是一个布局，借助它可以简单方便地实现滑动菜单的功能。此外用CoordinatorLayout替代了FrameLayout，CoordinatorLayout类似于FrameLayout，只是它能自动调整布局中内容的位置，具体效果可以在程序运行后查看。TextView用来显示滑动菜单中的内容，layout_gravity属性设为start，用以指定滑动菜单滑出的方向，start会根据语言习惯来自动判定，因为汉字的阅读顺序是从左至右，所以此处滑动菜单会在左侧。运行程序，效果如图13.3所示。

图13.3滑动菜单

在日常使用的App中，滑动菜单既可以通过滑动显示，也可以通过点击菜单按钮显示，开发人员一般都会两者兼用。滑动调用已经实现，接下来实现菜单按钮调用。

代码中，首先找到DrawerLayout布局对象，然后使用getSupportActionBar()方法获得ActionBar实例，通过ActionBar的setDisplayHomeAsUpEnabled显示菜单按钮、setHomeAsUpIndicator给菜单按钮设置图片，最后onOptionsItemSelected()判断按下的按钮，当按下android.R.id.home菜单按钮时通过opendrawer方法将滑动DrawerLayout布局对象的菜单显示出来。

有读者会问，我们并没有给菜单按钮创建布局文件，更没有设置id，怎么能直接引用呢？其实在调用setDisplayHomeAsUpEnabled时就已经创建了一个菜单按钮，之后再调用setHomeAsUpIndicator来设置呈现的图片就完成了菜单按钮的完整创建。另外要注意的是openDrawer()中的GravityCompat

.START用来保持与布局文件中滑动菜单弹出方向一致。

重新运行程序，效果如图13.4所示，菜单已经显示在标题栏中，点击菜单栏，滑动菜单会弹出，读者可自行测试。

图13.4带菜单按钮的滑动菜单

上述三部分代码具有很强的调用关系，在activity_main.xml中新建了一个NavigationView对象，app:menu="@menu/nav_menu"和app:headerLayout="@layout/nav_header"分别调用了前面的两个xml文件。nav_header.xml中的控件及属性都是比较常见的，在nav_menu.xml中，<groupandroid:checkableBehavior="single">这一行将下面的控件设定为一组，android:checkableBehavior="single"表明这一组中只能单选。

以上首先获取NavigationView对象，然后通过setNavigationItemSelectedListener()函数设置默认选中打电话选项，给NavigationView对象设置监听事件，监听事件中并没有写相应的逻辑，只是当有内容被选中时，调用DrawerLayout的closeDrawers()方法关闭滑动菜单作为演示。

重新运行程序，效果如图13.5所示。

图13.5NavigationView菜单

13.4悬浮按钮

在MaterialDesign中引入了立面设计，使界面具有三维立体效果。下面介绍MaterialDesign中的三维立体效果，并通过示例来学习该属性。首先完成activity_main.xml中的代码

在activity_main.xml中添加一个FloatingActionButton，就是悬浮按钮，然后设置它的id和宽高。它的layout_gravity属性和滑动菜单的属性值类似，bottom|end，bottom是设置了组件的位置在底部，end则会根据语言习惯调整左右。src属性设置该控件的背景图片，最后一个elevation属性设置悬浮的高度，该值也可以不设置，系统识别到悬浮按钮后会自动设置一个合适的悬浮高度给它。

运行程序，点击右下角的悬浮按钮，效果如图13.6所示，悬浮按钮有明显的3D效果，可以看到按钮下面有阴影。

图13.6悬浮按钮

13.5Snackbar——可以交互的提示工具

在前面的Android学习中，多次使用Toast来进行信息提示，Toast能够及时给用户反馈信息，又不会一直占用界面空间。但是使用Toast只能看到信息，却不能做出相应的反应，可以说Toast是一个交互性不那么强的工具。但是如果用户想要在看到提示信息后做出反应呢？这就要用到可以交互的提示工具SnackBar。

SnackBar调用make()方法，方法中接收三个参数，第一个参数是传入一个当前界面的view，它的目的是通过传入的view找到最外层的view，这里传入形参v；第二个参数是提示信息；第三个参数是提示信息停留的时间。可以看到SnackBar与Toast的用法基本类似，只有第一个参数不同。接下来调用SnackBar的setAction方法，注意此处setAction和make是平行的方法，都属于Snackbar。setAction方法接收的第一个参数是要显示的信息，第二个参数是一个监听对象，类似于按钮。然后在onClick()方法中写具体的处理逻辑，此处直接调用Toast显示信息。

重新运行程序，点击悬浮按钮，交互提示效果如图13.7和图13.8所示。

图13.7SnackBar演示1

图13.8SnackBar演示2

以上两个图展示了SnackBar的交互方式，这里悬浮按钮用来删除数据，而SnackBar可以撤销操作。首先点击悬浮按钮，界面下方弹出一行提示，询问用户是否撤销操作，若点击撤销，那么会弹出Toast，提示已经撤销了操作。当然这里只是演示，并没有具体实现删除数据和撤销数据的逻辑，仅用信息提示来展现整个流程。SnackBar的make函数对应的是第一个提示，setAction对应的是可点击的撤销文字，点击之后触发setAction中第二个参数的监听事件，弹出Toast。

上面的演示看起来很顺利，但是有一点读者需注意到，就是在提示撤销操作时，悬浮按钮自动往上移了一点，这是由于13.4节在创建滑动菜单时将FramentLayout布局换成了coordinatorlayout，当时介绍coordinatorlayout时说这个布局方式与FramentLayout作用一样，但是它能自动调整布局内的组件位置，这时就体现出它的作用了，感兴趣的读者可以将coordinatorlayout再换为FramentLayout看看效果，会发现提示和悬浮按钮在同一水平线上。

13.6CardView

到目前为止，我们已经可以设计出美观的标题栏、滑动菜单以及悬浮按钮，但是界面显示内容部分区域还很空白。接下来完善一下这个区域的内容显示部分，前面学过的关于显示大量内容的控件是RecyclerView，但是仅用RecyclerView显示内容没有立体感也不美观，这里使用RecyclerView结合CardView来装载显示内容。CardView实际上也是一个FrameLayout，但是它额外提供了圆角和阴影等效果，会有立体的感觉。

第一个是recycleview的依赖，第二个是cardView的依赖，第三个是一个开源的项目，能够处理网络上下载的高品质图片，使其与项目相匹配。后续用到时会再解释该开源项目。

代码中使用了CardView布局，为布局中的控件提供了圆角和阴影的效果。其中app:cardCornerRadius属性设置圆角的弧度，elevation设置阴影的大小，不设置该值时会有默认值，此处使用默认值。ImageView中还有一个属性android:scaleType="centerCrop"，用来设置图片的填充方式，centerCrop表示图片按原比例填入，超出的部分被裁剪掉。

代码和第5章中讲RecyclerView的适配器时基本一致，主要是新建一个内部类ViewHolder，并且重写onCreateViewHolder，onBindViewHolder，getItemCount等方法，不过在重写onBindViewHolder方法时，采用了Glide对象填充照片，Glide的with方法接收上下文对象，然后调用load方法加载图片的view对象，into方法确定填入的view对象。Glide对象的用法虽然很简单，但它却让用户可以自由地使用不同大小的图片，而不用担心内存问题。

在MainActivity中首先定义了一个Animal数组用来存储Animal对象，这个数组和initAnimal函数配合使用可以实现随机显示内容，使得每次打开应用时可以看到不同的内容。GridLayoutManager是网格布局管理，用来管理生成布局的样式，该对象的构造函数接收两个参数，第一个是调用的对象，第二个用来设置显示的列数，这里设置为2列。

运行程序，效果如图13.9所示。

图13.9CardView显示

可以看到，显示效果是出来了，但是感觉却不美观，界面上的图片紧贴着屏幕上沿显示，将ToolBar都遮住了。这是由于放置ToolBar以及CardView控件的父布局CoordinatorLayout造成的，这个布局在介绍悬浮按钮时讲过，它能够自动调整内部控件的位置，那为什么在这里却没有调整好呢？其实CoordinatorLayout功能虽然强大，但也没到全能的地步，ToolBar和CardView都没有指定位置就放到其中，它只能按照帧布局的规则将控件放在左上角，从而形成遮挡。为解决这个问题，需要借用另一个专门的工具：AppBarLayout，它能很好地解决这个问题。下面就通过AppBarLayout来解决本示例出现的问题。

使用AppBarLayout将ToolBar包围，并且在RecyclerView中增加一个属性：app:layout_behavior="@string/appbar_scrolling_view_behavior"，这个属性指定了一个布局行为。然后在ToolBar中添加属性：app:layout_scrollFlags="scroll|enterAlways|snap"，该属性等看到效果图再细讲。

重新运行程序，效果如图13.10和图13.11所示。

图13.10AppBar效果图1

图13.11AppBar效果图2

从效果图中可以看到，AppBarLayout完成了和ToolBar的“和谐共处”，刚打开应用时，ToolBar并没有被遮挡，当向上滑动时，发现ToolBar不见了，并且ToolBar的背景也移走了，这说明ToolBar被隐藏了。这种效果主要就是app:layout_scrollFlags="scroll|enterAlways|snap"属性完成的，属性值中的scroll表示向上滑动时，ToolBar也会滑动，并且会隐藏，enterAlways表示当滑到最下面时，ToolBar会再次显示，snap表示当滑动到中间时，自行判断ToolBar是隐藏还是显示，这种显示方式和正常应用一样，给用户的体验会比较好。

13.7下拉刷新

在用手机浏览时经常会通过向下滑动来刷新当前页面，这个作用其实非常的简单，每次只在当前页面显示一部分内容，当用户刷新时，就将新的数据显示到当前页面。下面通过示例学习该功能。

将需要刷新的内容添加到SwipeRefreshLayout中，这里将RecyclerView控件移到刷新的布局中。刷新的布局比较简单，现在需要实