谷歌-北方学院培训-第四章常见组件

常见组件Part04孙

兴

华本章将介绍一些最常见的可视化组件，对话框和菜单，并且开始深入研究开发应用程序所需的代码，这将涉及到XML和Java。虽然XML是我们主要的编程工具，当它涉及到关于应用程序的外观问题时，我们将用它来设计一个自定义对话框，material标准奠定了我们的选择菜单，并决定它的许多行为。Java在这里用来响应于用户交互，主要表现在小窗口组件和视图被点击时使用回调方法。4.1应用程序栏样式和代码4.1.1应用material调色板MaterialDesign的重点是简单，不建议使用大量的颜色。只需要2个或3个主色调和一个强调的阴影。比较理想的是，调色板可从.这个网址中找到。选择两个样本，一个用于主色调，将其应用到工具栏和状态栏；另一个用于强调色，主要是用在动作按钮，滑块与开关上。因此，最重要的是，这些颜色的对比度要良好。无论选择哪一种颜色，主色调都应该有一个值500，较暗的版本应该是700。如果你想要一个较轻的版本的主色调，这应该采取一个值为100。选择强调色的颜色值为A200的色调。如左图例子中，我们使用了黄色的主色调和浅蓝色的强调色：4.1.1应用material调色板这些值应在res/values中的文件进行定义，这通常称为color.xml，但是为了方便，也可以选择自己命名。例子中的颜色，以及文本颜色的定义如下：<?xmlversion="1.0"encoding="utf8"?><resources><colorname="colorPrimary">#FFC107</color><colorname="colorPrimary_dark">#FFA000</color><colorname="colorAccent">#03A9F4</color><colorname="text_Primary">#DE000000</color><colorname="text_secondary">#8A000000</color></resources>4.1.1应用material调色板可以在res/values-21/styles.xml文件中用来自定义我们的主题，如下：<?xmlversion="1.0"encoding="utf-8"?><resources><stylename="AppTheme"parent="android:Theme.Material.Light.NoActionBar"><!--Customizeyourthemehere.--><itemname="colorPrimary">@color/colorPrimary</item><itemname="colorPrimaryDark">@color/colorPrimary_dark</item><itemname="colorAccent">@color/colorAccent</item><itemname="android:textColorPrimary">@color/text_Primary</item><itemname="android:textColor">@color/text_secondary</item></style></resources>4.1.1应用material调色板如果你正在旧的开发平台并且正在使用应用程序兼容性库，那么在res/values/styles.xml这个文件中可以很好地完成，具体采取以下形式：<resources><stylename="AppTheme"parent="pat.Light.NoActionBar"><!--Customizeyourthemehere.--><itemname="colorPrimary">@color/colorPrimary</item><itemname="colorPrimaryDark">@color/colorPrimary_dark</item><itemname="colorAccent">@color/colorAccent</item><itemname="android:textColorPrimary">@color/text_Primary</item><itemname="android:textColor">@color/text_secondary</item></style></resources>4.1.1应用material调色板根据创建该文件的方式，可能需要添加’com.android.pat-v7:22.2.1'到build.gradle文件的依赖中去，可能还需要调整minaSdkVersion中的默认配置部分。接下来，我们将用一个应用程序栏来代替操作栏，并进一步了解在activity中如何使用图标并实现功能。打开res/values/dimens.xml文件，里面包括以下尺寸：<dimenname="toolbar_height">56dp</dimen>4.1.1应用material调色板4.1.2图像资源

1、首先要做的不是将工具栏添加到你的根目录布局中，而是从项目资源管理器中创建一个新的布局资源作为它一个单独的资源文件。如图2、给这个文件命名为toolbar_main或者类似的名称，并填写如下：<?xmlversion="1.0"encoding="utf8"?><android.support.v7.widget.Toolbarxmlns:android=""android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="@dimen/toolbar_height"android:background="?attr/colorPrimary"android:minHeight="?attr/actionBarSize"/>3、现在可以在你的布局合适的位置上插入这个布局：<includelayout="@layout/toolbar_main"/>4.1.2图像资源

在前面的章节中，为项目添加的图片资源存放在drawable目录下，虽然在大多数情况下很好，但是编辑器配备了一个非常有用的工具，特别是用于生成图像、图标时非常实用，它就是AssetStudio。

从项目资源管理器的drawable文件夹的菜单中，导航到New/ImageAsset，然后，选择ActionBarandTabIcons作为AssetType，然后从“剪贴画”的集合中选择一个图标：

4.1.2图像资源

使用修剪和填充选项来控制图标的大小，选择一个主题，这将决定你的工具栏背景颜色是亮或暗。提供合适的名称，然后单击“Next”。AssetStudio会自动为我们创建图标，包括四个屏幕密度，并将它们放置在正确的文件夹下，使其被部署在适当的设备。甚至适用于MaterialDesign使用时的要求，54％不透明的黑色图标。我们所要做的就是在应用程序栏添加一个图标属性到相应的菜单项。

4.1.2图像资源

4.1.3applyingactions图标放在drawable文件夹下，可以应用在我们项目菜单的操作栏中，在menu.main.xml文件中的代码如下：<itemandroid:id="@+id/menu_search"android:icon="@drawable/ic_search"android:orderInCategory="100"android:title="@string/search_title"app:showAsAction="ifRoom"/>注意，前面的示例使用了一个字符串资源的引用，因此必须在strings.xml文件中定义如下代码：<stringname="search_title">Search</string>菜单选项被自动地包含在应用程序栏中，标题取自于名称为“app_name”字符串在strings（字符串）文件中的定义。当以这种方式构建时，说明这些组件是根据material指南来定义的。4.1.3applyingactions4.1.4应用程序栏结构这里有几个涉及到应用程序栏的简单的结构规则需要记住。它们包括边距和填充，宽度和高度，定位，以及它们不同的平台和屏幕方向。在竖屏模式中，应用栏的layout_height为56dp，而在横屏模式中为48dp应用程序栏或者是填满屏幕宽度或者是填满容器宽度，它们不能被一分为二。程序栏有2dp的高度，要大于material薄片控制的高度。除前面规定的特殊情况外，如果一张卡片或一个对话框有自己的工具条，则两者可以共用相同的高度。

1、手机

应用栏的内边距精确为16dp，包含的图标没有它们自己的内外边距标题文本颜色使Theme的primarycolor,图标使用secondarytext颜色。标题应定位在距离工具栏左侧72dp，距离底部20dp的位置。这适用于工具栏扩展。(如下图)标题的文字大小设置为：android:textAppearance=”?Android:attr/textAppearanceLarge”4.1.4应用程序栏结构2.平板电脑和台式机4.1.4应用程序栏结构在构建平板电脑和台式电脑的应用程序时，这些规则是相同的。除了以下例外：工具栏的高度是64dp标题缩进80dp，当工具栏扩展时不会移动应用程序栏的内边距是24dp，距离顶部为20dp

现在根据material的指导方针，已经成功地构建出一个应用程序栏（appbar），但是动作图标（actionicons）不执行一些动作是没有用的。下一步，我们将看到如何使用Java提供一些功能与我们的设计进行交互。4.1.5使用Java代码捕捉动作

通常，一个APP或activity会有很多图标，解决这个问题最明智的方式是创建一个下拉列表。但无论是出现在应用程序栏，还是在选项菜单中的行动，我们编程的方式是一样的。事实上，动作图标其实只是菜单的扩展。要查看XML的菜单是如何与Java一起开始一个新项目的，就按照以下进行练习：2、用一个应用程序来替换动作栏(actionbar)3、完成menu_main.xml文件的代码，如下：4.1.5使用Java代码捕捉动作1.使用AssetStudio，并选择两个动作图标如以下截图中所示，并给它们命名为ic_action_camera和ic_action_video:<menuxmlns:android=""xmlns:app=""xmlns:tools=""tools:context=".MainActivity"<itemandroid:id="@+id/menu_video"android:icon="@drawable/ic_action_video"android:orderInCategory="100"android:title="@string/video"app:showAsAction="ifRoom"/><itemandroid:id="@+id/menu_camera"android:icon="@drawable/ic_action_camera"android:orderInCategory="100"android:title="@string/video"app:showAsAction="ifRoom"/></menu>4、打开MainActivity.java文件并编辑onOptionsItemSelected（）这个方法如下：@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){Intentintent;intid=item.getItemId();switch(id){caseR.id.menu_camera:intent=newIntent(MediaStore.ACTION_IMAGE_CAPTURE);startActivity(intent);break;caseR.id.menu_video:intent=newIntent(MediaStore.ACTION_VIDEO_CAPTURE);startActivity(intent);break;default:returnsuper.onOptionsItemSelected(item);}returnfalse;}这个简单的例子目的是为了演示选择菜单如何在Java中被捕获。该onOptionsItemSe1ected（项目）方法是一个回调方法，每当用户从选项菜单中选择项目则执行其代码。我们现在已经看到了如何使用动作图标作为选项菜单项，以及如何根据MaterialDesign来进行设计。接下来要学习关于菜单本身如何设计，以及如何实现它们的代码。4.1.5使用Java代码捕捉动作4.2菜单和对话框

菜单是大多数应用中的一个重要的接口，尽管通常的操作是通过更为明显的方式进行的，比如按钮，次要操作的列表通常通过菜单提供。当使用material或pattheme时，大部分的material菜单自动适用，但有时我们会希望自定义一个对话框作为菜单来使用。本节将介绍如何实现一些常见的菜单功能，如子菜单、组和复选标记，以及如何生成弹出菜单，最后，还有如何利用material的部件构造自定义对话框，卡片视图。4.2.1菜单1、选项菜单（Optionsmenu）

选项菜单将符合material标准，包括对齐，缩放，和文字的颜色及小widgets。使用material主题则无需我们做其他任何事情。剩下的就是看一些基本的菜单功能是如何实现的。如图显示一个菜单有四个项目。其实这是一个简单的菜单，可以从主菜单的XML文件中看到：<itemandroid:id="@+id/submenu1"android:orderInCategory="4"android:title="New"/><itemandroid:id="@+id/submenu2"android:orderInCategory="4"android:title="Open"/><itemandroid:id="@+id/submenu3"android:orderInCategory="4"android:title="Save"/><itemandroid:id="@+id/submenu4"android:orderInCategory="4"android:title="Format"/>4.2.1菜单菜单可以嵌套在其他任何地方，只要我们愿意，可以简单地嵌入菜单节点内的项目。右面的代码中突出显示的两行演示了一个菜单项如何提供复选标记和设置的。<itemandroid:id="@+id/submenu"android:orderInCategory="4"android:title="Format"><menu><itemandroid:id="@+id/submenu_word_wrap"android:checkable="true"android:checked="true"android:title="Wordwrap"/><itemandroid:id="@+id/submenu_font"android:title="Font"/></menu></item>4.2.1菜单子菜单项在Java中的处理方式和其他应用程序栏和溢出菜单一样，都是使用onOptionsItemSelected（）方法，复选标记的状态可以被接收并设置如下：caseR.id.submenu_word_wrap:if(item.isChecked())item.setChecked(false);elseitem.setChecked(true);returntrue;4.2.1菜单当我们只需要从一个菜单项中选择菜单时，可以把所有的选项都嵌套在一个<group>元素中，例如：<groupandroid:id="@+id/some_group"android:checkableBehavior="single"android:enabled="true"/><item…/><item…/>/>注意：checkableBehavior的其他值还有none和all。4.2.1菜单

onOptionsItemSelected（）的回调是管理比较复杂的菜单结构的一个非常方便的方法。

但很多时候，我们要从其他地方调用菜单的activity（活动）。这可以通过一个弹出窗口或Contextualmenus（上下文菜单）来实现，都是用一个非常类似的方式实现的，下面我们来探究上下文菜单。4.2.1菜单2.上下文菜单（Contextualmenus）

通常，我们希望选择特定的单个组件或一组，而不是某个活动或整个应用程序。Android的上下文菜单使用长按方式来执行此功能，而在PC上使用鼠标右键来实现此功能。这类似于选项菜单，如下面的练习：1.启动或者创建一个新项目，创建一个你希望应用上下文菜单的Widget，如TextView。4.2.1菜单2.创建一个新的菜单资源文件在res/menu的文件夹下，称为menu_context.xml，并输入你的选项如下：<menuxmlns:android=""><itemandroid:id="@+id/action_share"android:title="@string/share"/><itemandroid:id="@+id/action_save"android:title="@string/save"/><itemandroid:id="@+id/action_delete"android:title="@string/delete"/></menu>3.打开MainActivity文件，onCreate（）方法里面包含如下代码：TextViewcontextMenu=(TextView)findViewById(R.id.text_view);registerForContextMenu(contextMenu);4、增加一个onCreateContextMenu（）方法到activity并按要求完成代码，如下所示，并将我们刚刚创建的菜单添加进去：@OverridepublicvoidonCreateContextMenu(ContextMenumenu,Viewview,ContextMenu.ContextMenuInfoinfo){super.onCreateContextMenu(menu,view,info);MenuInflaterinflater=getMenuInflater();inflater.inflate(R.menu.menu_context,menu);}5.创造另一种方法称为onContextItemSelected（），代码如下所示：@OverridepublicbooleanonContextItemSelected(MenuItemitem){AdapterView.AdapterContextMenuInfoinfo=(AdapterView.AdapterContextMenuInfo)item.getMenuInfo();intid=item.getItemId();switch(id){caseR.id.action_share:doShare(info.id);returntrue;caseR.id.action_save:doSave(info.id);returntrue;caseR.id.action_delete:doDelete(info.id);returntrue;default:returnfalse;}}6.像doShare(),doSave(),和doDelete()这些方法是要根据你项目的需求来写的，但在本例中，你可以使用类似下面写的：privatevoiddoShare(longid){Toast.makeText(this,"Shared"+id,Toast.LENGTH_LONG).show();}privatevoiddoSave(longid){Toast.makeText(this,"Saved"+id,Toast.LENGTH_LONG).show();}privatevoiddoDelete(longid){Toast.makeText(this,"Deleted"+id,Toast.LENGTH_LONG).show();}menu（菜单）是任何应用程序的重要组成部分，从列表中的一个简单的选择是必须的，当需要稍微复杂的操作时，我们就打开对话框。4.2.2对话框对话框可以包含三个部分：Title,Content,和Action(S)。

使用标题不需要解释。为了简单起见，应该在必要时使用标题，并尽可能简短、简洁。对话框的内容可以与日期选取器的一个简单的列表有所不同。警告对话框可以中断用户流，永远只能有一个选项或选择。Actions（动作）确认用户的选择，一旦按下选择就应撤销该对话框。动作的数量应保持在最低限度，一般是肯定或否定的，比如“确定”和“取消”或者是“连接”和“忽视”，肯定的操作一般都放在否定的操作的右侧。1.创建一个material对话框（dialog）4.2.2对话框1.打开或启动一个项目，应用自定义颜色和主题。2.在layout文件夹下进行New|Layoutresourcefile，然后命名为dialog_example.xml。3.使用设计界面，生成以下布局：4.找到将使用的调用对话框的方法（可以使用onCreate（）用于测试），代码如下：finalDialogdialog=newDialog(this);dialog.setContentView(R.layout.dialog_example);dialog.show();4.2.2对话框若编译和运行该项目，会看到，在小部件的顶部有一个无法解释的空白。这是因为把标题默认当作为对话对象的一部分。不能通过调用setTit1e（）方法设置本身，例如，dialog.setTit1e(R.string.dialog_title)。若要删除它，并使用自定义布局来定义标题，可以在调用setContentView():之前插入如下代码：dialog.requestWindowFeature(Window.FEATURE_NO_TITLES);4.2.2对话框1)Title标题的四周填充是24dp，距离下面是20dp的空间。以及正确的文本设置，可以被定义如下：<TextViewandroid:id="@+id/text_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingBottom="20dp"android:paddingLeft="24dp"android:paddingRight="24dp"android:paddingTop="24dp"android:text="@string/dialog_title"android:textColor="@color/text_Primary"android:textAppearance="?android:attr/textAppearanceLarge"/>4.2.2对话框格式化content（内容）,它周围有24dp的填充和它之间的空间为20dp和而且已经包含标题。这个布局文件XML如下：<TextViewandroid:id="@+id/text_content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingBottom="24dp"android:paddingLeft="24dp"android:paddingRight="24dp"android:text="@string/dialog_content"android:textColor="@color/text_secondary"android:textAppearance="?android:attr/textAppearanceSmall"/>4.2.2对话框2)Content设计准则规定，动作部分必须高是52dp，各方的填充是8dp。按钮本身是向右对齐，但重心被设为在底部，而不是右侧，这样才能满足这些地区的内容从右向左读，所有这些都可以通过以下来实现：<LinearLayoutandroid:layout_width="match_parent"android:layout_height="52dp"android:gravity="center_vertical|end"android:padding="8dp"android:orientation="horizontal">4.2.2对话框3)Actions设置按钮的属性时，其宽度不小于64dp，可以使用android:minWidth这个属性管理，按钮的高度为36dp，之间的间距为8dp。有趣的是如何使一个高度为36dp的按钮有48dp的可触摸高度。处理这种情况的方法之一是使用TouchDelegate类，这是非常有效的。一些文件可以从如下网址中找到：。另一个方法就是将每一个按钮放在一个更大的可点击的ViewGroup中，虽然效果跟前一个一样，但是额外的布局将会影响性能。4.2.2对话框这里我们使用的解决方案是使用TextViews代替按钮。扩大可触摸目标的问题立即解决，因为我们只是使文本视图高为48dp，不需要额外的编码，布局，自定义主题，或删除按钮边框。注意：按钮使用此属性可以实现无边距：style=“?android:attr/borderlessButtonSty1e”4.2.2对话框因为指南中的按钮的宽度不能窄于64dp，所以其布局文件XML如下所示：<TextViewandroid:id="@+id/text_remove"android:layout_width="wrap_content"android:layout_height="wrap_content"android:height="48dp"android:clickable="true"android:gravity="center_vert