谷歌-北方學(xué)院培訓(xùn)-第四章常見(jiàn)組件

常見(jiàn)組件Part04孫

興

華本章將介紹一些最常見(jiàn)的可視化組件，對(duì)話(huà)框和菜單，并且開(kāi)始深入研究開(kāi)發(fā)應(yīng)用程序所需的代碼，這將涉及到XML和Java。雖然XML是我們主要的編程工具，當(dāng)它涉及到關(guān)于應(yīng)用程序的外觀(guān)問(wèn)題時(shí)，我們將用它來(lái)設(shè)計(jì)一個(gè)自定義對(duì)話(huà)框，material標(biāo)準(zhǔn)奠定了我們的選擇菜單，并決定它的許多行為。Java在這里用來(lái)響應(yīng)于用戶(hù)交互，主要表現(xiàn)在小窗口組件和視圖被點(diǎn)擊時(shí)使用回調(diào)方法。4.1應(yīng)用程序欄樣式和代碼4.1.1應(yīng)用material調(diào)色板MaterialDesign的重點(diǎn)是簡(jiǎn)單，不建議使用大量的顏色。只需要2個(gè)或3個(gè)主色調(diào)和一個(gè)強(qiáng)調(diào)的陰影。比較理想的是，調(diào)色板可從.這個(gè)網(wǎng)址中找到。選擇兩個(gè)樣本，一個(gè)用于主色調(diào)，將其應(yīng)用到工具欄和狀態(tài)欄；另一個(gè)用于強(qiáng)調(diào)色，主要是用在動(dòng)作按鈕，滑塊與開(kāi)關(guān)上。因此，最重要的是，這些顏色的對(duì)比度要良好。無(wú)論選擇哪一種顏色，主色調(diào)都應(yīng)該有一個(gè)值500，較暗的版本應(yīng)該是700。如果你想要一個(gè)較輕的版本的主色調(diào)，這應(yīng)該采取一個(gè)值為100。選擇強(qiáng)調(diào)色的顏色值為A200的色調(diào)。如左圖例子中，我們使用了黃色的主色調(diào)和淺藍(lán)色的強(qiáng)調(diào)色：4.1.1應(yīng)用material調(diào)色板這些值應(yīng)在res/values中的文件進(jìn)行定義，這通常稱(chēng)為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應(yīng)用material調(diào)色板可以在res/values-21/styles.xml文件中用來(lái)自定義我們的主題，如下：<?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應(yīng)用material調(diào)色板如果你正在舊的開(kāi)發(fā)平臺(tái)并且正在使用應(yīng)用程序兼容性庫(kù)，那么在res/values/styles.xml這個(gè)文件中可以很好地完成，具體采取以下形式：<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應(yīng)用material調(diào)色板根據(jù)創(chuàng)建該文件的方式，可能需要添加’com.android.pat-v7:22.2.1'到build.gradle文件的依賴(lài)中去，可能還需要調(diào)整minaSdkVersion中的默認(rèn)配置部分。接下來(lái)，我們將用一個(gè)應(yīng)用程序欄來(lái)代替操作欄，并進(jìn)一步了解在activity中如何使用圖標(biāo)并實(shí)現(xiàn)功能。打開(kāi)res/values/dimens.xml文件，里面包括以下尺寸：<dimenname="toolbar_height">56dp</dimen>4.1.1應(yīng)用material調(diào)色板4.1.2圖像資源

1、首先要做的不是將工具欄添加到你的根目錄布局中，而是從項(xiàng)目資源管理器中創(chuàng)建一個(gè)新的布局資源作為它一個(gè)單獨(dú)的資源文件。如圖2、給這個(gè)文件命名為toolbar_main或者類(lèi)似的名稱(chēng)，并填寫(xiě)如下：<?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、現(xiàn)在可以在你的布局合適的位置上插入這個(gè)布局：<includelayout="@layout/toolbar_main"/>4.1.2圖像資源

在前面的章節(jié)中，為項(xiàng)目添加的圖片資源存放在drawable目錄下，雖然在大多數(shù)情況下很好，但是編輯器配備了一個(gè)非常有用的工具，特別是用于生成圖像、圖標(biāo)時(shí)非常實(shí)用，它就是AssetStudio。

從項(xiàng)目資源管理器的drawable文件夾的菜單中，導(dǎo)航到New/ImageAsset，然后，選擇ActionBarandTabIcons作為AssetType，然后從“剪貼畫(huà)”的集合中選擇一個(gè)圖標(biāo)：

4.1.2圖像資源

使用修剪和填充選項(xiàng)來(lái)控制圖標(biāo)的大小，選擇一個(gè)主題，這將決定你的工具欄背景顏色是亮或暗。提供合適的名稱(chēng)，然后單擊“Next”。AssetStudio會(huì)自動(dòng)為我們創(chuàng)建圖標(biāo)，包括四個(gè)屏幕密度，并將它們放置在正確的文件夾下，使其被部署在適當(dāng)?shù)脑O(shè)備。甚至適用于MaterialDesign使用時(shí)的要求，54％不透明的黑色圖標(biāo)。我們所要做的就是在應(yīng)用程序欄添加一個(gè)圖標(biāo)屬性到相應(yīng)的菜單項(xiàng)。

4.1.2圖像資源

4.1.3applyingactions圖標(biāo)放在drawable文件夾下，可以應(yīng)用在我們項(xiàng)目菜單的操作欄中，在menu.main.xml文件中的代碼如下：<itemandroid:id="@+id/menu_search"android:icon="@drawable/ic_search"android:orderInCategory="100"android:title="@string/search_title"app:showAsAction="ifRoom"/>注意，前面的示例使用了一個(gè)字符串資源的引用，因此必須在strings.xml文件中定義如下代碼：<stringname="search_title">Search</string>菜單選項(xiàng)被自動(dòng)地包含在應(yīng)用程序欄中，標(biāo)題取自于名稱(chēng)為“app_name”字符串在strings（字符串）文件中的定義。當(dāng)以這種方式構(gòu)建時(shí)，說(shuō)明這些組件是根據(jù)material指南來(lái)定義的。4.1.3applyingactions4.1.4應(yīng)用程序欄結(jié)構(gòu)這里有幾個(gè)涉及到應(yīng)用程序欄的簡(jiǎn)單的結(jié)構(gòu)規(guī)則需要記住。它們包括邊距和填充，寬度和高度，定位，以及它們不同的平臺(tái)和屏幕方向。在豎屏模式中，應(yīng)用欄的layout_height為56dp，而在橫屏模式中為48dp應(yīng)用程序欄或者是填滿(mǎn)屏幕寬度或者是填滿(mǎn)容器寬度，它們不能被一分為二。程序欄有2dp的高度，要大于material薄片控制的高度。除前面規(guī)定的特殊情況外，如果一張卡片或一個(gè)對(duì)話(huà)框有自己的工具條，則兩者可以共用相同的高度。

1、手機(jī)

應(yīng)用欄的內(nèi)邊距精確為16dp，包含的圖標(biāo)沒(méi)有它們自己的內(nèi)外邊距標(biāo)題文本顏色使Theme的primarycolor,圖標(biāo)使用secondarytext顏色。標(biāo)題應(yīng)定位在距離工具欄左側(cè)72dp，距離底部20dp的位置。這適用于工具欄擴(kuò)展。(如下圖)標(biāo)題的文字大小設(shè)置為：android:textAppearance=”?Android:attr/textAppearanceLarge”4.1.4應(yīng)用程序欄結(jié)構(gòu)2.平板電腦和臺(tái)式機(jī)4.1.4應(yīng)用程序欄結(jié)構(gòu)在構(gòu)建平板電腦和臺(tái)式電腦的應(yīng)用程序時(shí)，這些規(guī)則是相同的。除了以下例外：工具欄的高度是64dp標(biāo)題縮進(jìn)80dp，當(dāng)工具欄擴(kuò)展時(shí)不會(huì)移動(dòng)應(yīng)用程序欄的內(nèi)邊距是24dp，距離頂部為20dp

現(xiàn)在根據(jù)material的指導(dǎo)方針，已經(jīng)成功地構(gòu)建出一個(gè)應(yīng)用程序欄（appbar），但是動(dòng)作圖標(biāo)（actionicons）不執(zhí)行一些動(dòng)作是沒(méi)有用的。下一步，我們將看到如何使用Java提供一些功能與我們的設(shè)計(jì)進(jìn)行交互。4.1.5使用Java代碼捕捉動(dòng)作

通常，一個(gè)APP或activity會(huì)有很多圖標(biāo)，解決這個(gè)問(wèn)題最明智的方式是創(chuàng)建一個(gè)下拉列表。但無(wú)論是出現(xiàn)在應(yīng)用程序欄，還是在選項(xiàng)菜單中的行動(dòng)，我們編程的方式是一樣的。事實(shí)上，動(dòng)作圖標(biāo)其實(shí)只是菜單的擴(kuò)展。要查看XML的菜單是如何與Java一起開(kāi)始一個(gè)新項(xiàng)目的，就按照以下進(jìn)行練習(xí)：2、用一個(gè)應(yīng)用程序來(lái)替換動(dòng)作欄(actionbar)3、完成menu_main.xml文件的代碼，如下：4.1.5使用Java代碼捕捉動(dòng)作1.使用AssetStudio，并選擇兩個(gè)動(dòng)作圖標(biāo)如以下截圖中所示，并給它們命名為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、打開(kāi)MainActivity.java文件并編輯onOptionsItemSelected（）這個(gè)方法如下：@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;}這個(gè)簡(jiǎn)單的例子目的是為了演示選擇菜單如何在Java中被捕獲。該onOptionsItemSe1ected（項(xiàng)目）方法是一個(gè)回調(diào)方法，每當(dāng)用戶(hù)從選項(xiàng)菜單中選擇項(xiàng)目則執(zhí)行其代碼。我們現(xiàn)在已經(jīng)看到了如何使用動(dòng)作圖標(biāo)作為選項(xiàng)菜單項(xiàng)，以及如何根據(jù)MaterialDesign來(lái)進(jìn)行設(shè)計(jì)。接下來(lái)要學(xué)習(xí)關(guān)于菜單本身如何設(shè)計(jì)，以及如何實(shí)現(xiàn)它們的代碼。4.1.5使用Java代碼捕捉動(dòng)作4.2菜單和對(duì)話(huà)框

菜單是大多數(shù)應(yīng)用中的一個(gè)重要的接口，盡管通常的操作是通過(guò)更為明顯的方式進(jìn)行的，比如按鈕，次要操作的列表通常通過(guò)菜單提供。當(dāng)使用material或pattheme時(shí)，大部分的material菜單自動(dòng)適用，但有時(shí)我們會(huì)希望自定義一個(gè)對(duì)話(huà)框作為菜單來(lái)使用。本節(jié)將介紹如何實(shí)現(xiàn)一些常見(jiàn)的菜單功能，如子菜單、組和復(fù)選標(biāo)記，以及如何生成彈出菜單，最后，還有如何利用material的部件構(gòu)造自定義對(duì)話(huà)框，卡片視圖。4.2.1菜單1、選項(xiàng)菜單（Optionsmenu）

選項(xiàng)菜單將符合material標(biāo)準(zhǔn)，包括對(duì)齊，縮放，和文字的顏色及小widgets。使用material主題則無(wú)需我們做其他任何事情。剩下的就是看一些基本的菜單功能是如何實(shí)現(xiàn)的。如圖顯示一個(gè)菜單有四個(gè)項(xiàng)目。其實(shí)這是一個(gè)簡(jiǎn)單的菜單，可以從主菜單的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菜單菜單可以嵌套在其他任何地方，只要我們?cè)敢?，可以?jiǎn)單地嵌入菜單節(jié)點(diǎn)內(nèi)的項(xiàng)目。右面的代碼中突出顯示的兩行演示了一個(gè)菜單項(xiàng)如何提供復(fù)選標(biāo)記和設(shè)置的。<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菜單子菜單項(xiàng)在Java中的處理方式和其他應(yīng)用程序欄和溢出菜單一樣，都是使用onOptionsItemSelected（）方法，復(fù)選標(biāo)記的狀態(tài)可以被接收并設(shè)置如下：caseR.id.submenu_word_wrap:if(item.isChecked())item.setChecked(false);elseitem.setChecked(true);returntrue;4.2.1菜單當(dāng)我們只需要從一個(gè)菜單項(xiàng)中選擇菜單時(shí)，可以把所有的選項(xiàng)都嵌套在一個(gè)<group>元素中，例如：<groupandroid:id="@+id/some_group"android:checkableBehavior="single"android:enabled="true"/><item…/><item…/>/>注意：checkableBehavior的其他值還有none和all。4.2.1菜單

onOptionsItemSelected（）的回調(diào)是管理比較復(fù)雜的菜單結(jié)構(gòu)的一個(gè)非常方便的方法。

但很多時(shí)候，我們要從其他地方調(diào)用菜單的activity（活動(dòng)）。這可以通過(guò)一個(gè)彈出窗口或Contextualmenus（上下文菜單）來(lái)實(shí)現(xiàn)，都是用一個(gè)非常類(lèi)似的方式實(shí)現(xiàn)的，下面我們來(lái)探究上下文菜單。4.2.1菜單2.上下文菜單（Contextualmenus）

通常，我們希望選擇特定的單個(gè)組件或一組，而不是某個(gè)活動(dòng)或整個(gè)應(yīng)用程序。Android的上下文菜單使用長(zhǎng)按方式來(lái)執(zhí)行此功能，而在PC上使用鼠標(biāo)右鍵來(lái)實(shí)現(xiàn)此功能。這類(lèi)似于選項(xiàng)菜單，如下面的練習(xí)：1.啟動(dòng)或者創(chuàng)建一個(gè)新項(xiàng)目，創(chuàng)建一個(gè)你希望應(yīng)用上下文菜單的Widget，如TextView。4.2.1菜單2.創(chuàng)建一個(gè)新的菜單資源文件在res/menu的文件夾下，稱(chēng)為menu_context.xml，并輸入你的選項(xiàng)如下：<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.打開(kāi)MainActivity文件，onCreate（）方法里面包含如下代碼：TextViewcontextMenu=(TextView)findViewById(R.id.text_view);registerForContextMenu(contextMenu);4、增加一個(gè)onCreateContextMenu（）方法到activity并按要求完成代碼，如下所示，并將我們剛剛創(chuàng)建的菜單添加進(jìn)去：@OverridepublicvoidonCreateContextMenu(ContextMenumenu,Viewview,ContextMenu.ContextMenuInfoinfo){super.onCreateContextMenu(menu,view,info);MenuInflaterinflater=getMenuInflater();inflater.inflate(R.menu.menu_context,menu);}5.創(chuàng)造另一種方法稱(chēng)為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()這些方法是要根據(jù)你項(xiàng)目的需求來(lái)寫(xiě)的，但在本例中，你可以使用類(lèi)似下面寫(xiě)的：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（菜單）是任何應(yīng)用程序的重要組成部分，從列表中的一個(gè)簡(jiǎn)單的選擇是必須的，當(dāng)需要稍微復(fù)雜的操作時(shí)，我們就打開(kāi)對(duì)話(huà)框。4.2.2對(duì)話(huà)框?qū)υ?huà)框可以包含三個(gè)部分：Title,Content,和Action(S)。

使用標(biāo)題不需要解釋。為了簡(jiǎn)單起見(jiàn)，應(yīng)該在必要時(shí)使用標(biāo)題，并盡可能簡(jiǎn)短、簡(jiǎn)潔。對(duì)話(huà)框的內(nèi)容可以與日期選取器的一個(gè)簡(jiǎn)單的列表有所不同。警告對(duì)話(huà)框可以中斷用戶(hù)流，永遠(yuǎn)只能有一個(gè)選項(xiàng)或選擇。Actions（動(dòng)作）確認(rèn)用戶(hù)的選擇，一旦按下選擇就應(yīng)撤銷(xiāo)該對(duì)話(huà)框。動(dòng)作的數(shù)量應(yīng)保持在最低限度，一般是肯定或否定的，比如“確定”和“取消”或者是“連接”和“忽視”，肯定的操作一般都放在否定的操作的右側(cè)。1.創(chuàng)建一個(gè)material對(duì)話(huà)框（dialog）4.2.2對(duì)話(huà)框1.打開(kāi)或啟動(dòng)一個(gè)項(xiàng)目，應(yīng)用自定義顏色和主題。2.在layout文件夾下進(jìn)行New|Layoutresourcefile，然后命名為dialog_example.xml。3.使用設(shè)計(jì)界面，生成以下布局：4.找到將使用的調(diào)用對(duì)話(huà)框的方法（可以使用onCreate（）用于測(cè)試），代碼如下：finalDialogdialog=newDialog(this);dialog.setContentView(R.layout.dialog_example);dialog.show();4.2.2對(duì)話(huà)框若編譯和運(yùn)行該項(xiàng)目，會(huì)看到，在小部件的頂部有一個(gè)無(wú)法解釋的空白。這是因?yàn)榘褬?biāo)題默認(rèn)當(dāng)作為對(duì)話(huà)對(duì)象的一部分。不能通過(guò)調(diào)用setTit1e（）方法設(shè)置本身，例如，dialog.setTit1e(R.string.dialog_title)。若要?jiǎng)h除它，并使用自定義布局來(lái)定義標(biāo)題，可以在調(diào)用setContentView():之前插入如下代碼：dialog.requestWindowFeature(Window.FEATURE_NO_TITLES);4.2.2對(duì)話(huà)框1)Title標(biāo)題的四周填充是24dp，距離下面是20dp的空間。以及正確的文本設(shè)置，可以被定義如下：<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對(duì)話(huà)框格式化content（內(nèi)容）,它周?chē)?4dp的填充和它之間的空間為20dp和而且已經(jīng)包含標(biāo)題。這個(gè)布局文件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對(duì)話(huà)框2)Content設(shè)計(jì)準(zhǔn)則規(guī)定，動(dòng)作部分必須高是52dp，各方的填充是8dp。按鈕本身是向右對(duì)齊，但重心被設(shè)為在底部，而不是右側(cè)，這樣才能滿(mǎn)足這些地區(qū)的內(nèi)容從右向左讀，所有這些都可以通過(guò)以下來(lái)實(shí)現(xiàn)：<LinearLayoutandroid:layout_width="match_parent"android:layout_height="52dp"android:gravity="center_vertical|end"android:padding="8dp"android:orientation="horizontal">4.2.2對(duì)話(huà)框3)Actions設(shè)置按鈕的屬性時(shí)，其寬度不小于64dp，可以使用android:minWidth這個(gè)屬性管理，按鈕的高度為36dp，之間的間距為8dp。有趣的是如何使一個(gè)高度為36dp的按鈕有48dp的可觸摸高度。處理這種情況的方法之一是使用TouchDelegate類(lèi)，這是非常有效的。一些文件可以從如下網(wǎng)址中找到：。另一個(gè)方法就是將每一個(gè)按鈕放在一個(gè)更大的可點(diǎn)擊的ViewGroup中，雖然效果跟前一個(gè)一樣，但是額外的布局將會(huì)影響性能。4.2.2對(duì)話(huà)框這里我們使用的解決方案是使用TextViews代替按鈕。擴(kuò)大可觸摸目標(biāo)的問(wèn)題立即解決，因?yàn)槲覀冎皇鞘刮谋疽晥D高為48dp，不需要額外的編碼，布局，自定義主題，或刪除按鈕邊框。注意：按鈕使用此屬性可以實(shí)現(xiàn)無(wú)邊距：style=“?android:attr/borderlessButtonSty1e”4.2.2對(duì)話(huà)框因?yàn)橹改现械陌粹o的寬度不能窄于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