- Android設計模式與最佳實踐
- (英)凱爾·繆
- 2573字
- 2021-02-07 09:26:40
3.1 應用程序欄
Android應用程序在屏幕頂部總是有一個工具欄,該區域稱作操作欄,通常用于顯示標題和頂級菜單。自Android 5(API 21)Material Design開始,可以用更靈活的應用程序欄來替代操作欄。應用程序欄允許設置顏色,可以放置在屏幕上的任意位置,并且比操作欄包含更多的內容。
大多數Android Studio模板使用的主題默認包含舊的操作欄,首先我們需要做的是刪除舊版本。要學習如何刪除舊的操作欄并將其替換為自定義應用程序欄,請按以下步驟操作。
(1)新建一個Android項目,使用空活動(empty activity)模板,并使用主題編輯器設置Material主題。
(2)打開styles.xml文件,像下面這樣編輯style定義:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
(3)在activity_main.xml旁創建一個叫作toolbar.xml的XML文件。
(4)編輯該XML文件,內容如下所示:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="? attr/actionBarSize" android:background="? attr/colorPrimary" android:theme="@android:style/Theme.Material" android:translationZ="4dp" />
(5)在activity_main.xml文件中添加以下元素。
<include android:id="@+id/toolbar" layout="@layout/toolbar" />
(6)最后,編輯dimens.xml文件中的margin值:
<resources> <dimen name="activity_horizontal_margin">0dp</dimen> <dimen name="activity_vertical_margin">0dp</dimen> </resources>
此工具欄和其他ViewGroup一樣,都位于根布局中。因此,它不會像舊的操作欄那樣與屏幕邊緣齊平,這就是需要調整布局margin的原因。稍后會用到CoordinatorLayout,它會自動實現大部分內容。但目前,了解工具欄的工作原理非常有用。
工具欄現在的位置和陰影與原來的一樣,但是沒有任何內容或功能。可以通過編輯Java部分中活動的onCreate()完成替換,如下所示:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar ! = null) { setSupportActionBar(toolbar); } }
此處可能會產生一個報錯,因為有兩個可以導入的庫。按Alt+Enter并選擇Toolbar的支持版本,如圖3-1所示。

圖3-1
當編寫Java代碼時,為了節省時間,可以修改設置,自動導入代碼中包含的Java庫。在File | Settings(文件|設置)菜單下,選擇Editor | General | Auto Import(編輯器|常規|自動導入),即可實現自動導入。
當在API 20或者更低版本的模擬器上測試項目時,很容易發現AppCompat主題的一個缺點——雖然使用colorPrimaryDark為狀態欄聲明了一種顏色,但狀態欄仍是黑色的,如圖3-2所示。API 21及其更高版本不存在這個問題。

圖3-2
不過,考慮到現在可延伸的用戶人數,上述問題以及缺乏自然陰影問題的代價很小。
現在已用工具欄替換了老式的操作欄,并將其設置為應用程序欄(有時稱為主工具欄)。下面將更深入地了解它的工作方式,以及如何通過Asset Studio選擇符合Material的動作圖標。
3.1.1 圖像資源
應用程序欄可以包含文本菜單,但是由于空間有限,使用圖標更為常見。Android Studio通過其Asset Studio提供了一組可用的Material圖標。要使用這些圖標,請遵循以下步驟。
(1)在項目資源管理器中,從drawable文件夾的菜單中,選擇New |Image Asset(新建|Image Asset)。
(2)然后選擇Action Bar and Tab Icons(操作欄和選項卡圖標)作為Asset Type(資源類型),單擊Clipart(剪貼畫圖標),從剪貼畫集合中選擇一個圖標,如圖3-3所示。

圖3-3
(3)此圖標一定是修整過的,內邊距是0%。
(4)根據工具欄背景顏色是淺色還是深色選擇主題。
(5)提供合適的名稱,然后單擊Next(下一步),如圖3-4所示。

圖3-4
更大的Material圖標集合可以從Google的Material Design網站Icons頁面下載。
Asset Studio可以自動生成4種屏幕密度的圖標,并將它們放置在正確的文件夾中,以便將它們部署在適當的設備上。它甚至還應用了Material Design中圖標所需的54%不透明黑色。為了將圖標加到應用程序欄中,需要在相應的菜單項中添加一個圖標屬性。稍后,導航抽屜將提供頂級功能訪問。但要了解如何使用應用程序欄,需要添加一個搜索功能。為此功能所選擇的圖標,稱作ic_action_search。
3.1.2 使用動作
動作圖標保存在drawable文件夾中,通過在菜單XML文件中添加菜單項,可以將動作圖標添加到操作欄中。根據首次創建項目時使用的模板,可能需要添加一個新目錄res/menu和一個名為main.xml或mena_main.xml的文件。無論使用什么文件名,只要是通過New | Menu resource file(新建|菜單資源文件)創建的文件就可以。可以按如下所示添加動作:
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.kyle.appbar.MainActivity"> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/app_name" app:showAsAction="collapseActionView" /> <item android:id="@+id/action_search" android:icon="@drawable/ic_action" android:orderInCategory="100" android:title="@string/menu_search" app:showAsAction="ifRoom" /> </menu>
請注意,前面的示例使用了對字符串資源的引用,因此必須在strings.xml文件中附加一個定義,如下所示:
<string name="menu_search">Search</string>
菜單項會自動添加到應用程序欄中,標題取自字符串文件中string name="app_name"的定義。當以這種方式構造時,組件的位置是依據Material指南確定的。
要查看實際運行情況,請執行以下步驟。
(1)打開Java代碼中的主活動并添加字段:
private Toolbar toolbar;
(2)然后,在onCreate()方法中添加以下代碼:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar ! = null) { setSupportActionBar(toolbar); } toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("A toolbar"); toolbar.setSubtitle("with a subtitle");
(3)最后,將以下方法添加到活動中:
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_main, menu); return true; }
現在,應該能在設備或模擬器上看到新的工具欄了,如圖3-5所示。

圖3-5
可以在工具欄中添加任何想要的視圖,使工具欄比舊的操作欄更加實用。工具欄中可以同時包含多個視圖,通過使用布局的gravity屬性可以將它們放置在任意位置上。正如之前看到的標題和副標題,工具欄擁有自己特定的方法。我們也可以用這些方法添加圖標和logo。但在這樣做之前,最好先根據Material Design指南探索應用程序欄的最佳實踐。
3.1.3 應用程序欄結構
雖然這里使用的技術符合Material指南(除了確保其高度外,無須做太多的工作),但有些時候也會使用自定義的工具欄布局替換操作欄。此時,需要知道的是如何對組件進行空間和位置的調整。這些對于平板計算機和臺式機來說,略有不同。
1.手機
對于應用程序欄,只需記住幾個簡單的結構規則即可。這些規則涵蓋外邊距(margin)、內邊距(padding)、寬度(width)、高度(height)和位置(positioning)。它們在不同平臺、屏幕方向上不同。
? 縱向模式下應用程序欄的layout_height為56dp,橫向為48dp。
? 應用程序欄填充滿屏幕寬度或是寬度等同內部列寬,二者擇其一。layout_width有match_parent的屬性值。
? 應用程序欄的elevation比它控制的Material表單的elevation要大2dp。
? 上述規則的例外情況是,如果一個卡片或對話框有自己的工具欄,那么兩者可以共享相同的elevation。
? 應用程序欄的padding精確為16dp,這意味著內部的圖標不能有自己的padding或margin,圖標邊距與此邊界共享,如圖3-6所示。

圖3-6
? 標題文本的顏色取自主題的主文本顏色,圖標的顏色取自次文本顏色。
? 標題應該位于距工具欄左側72dp、底部20dp處。即使擴展工具欄,此規則也適用,如圖3-7所示。

圖3-7
? 標題的文字大小設置為android:textAppearance="? android:attr/textAppear-anceLarge"。
2.平板計算機
在為平板計算機和臺式機構建應用程序欄時,規則是相同的,但以下情況除外。
? 工具欄高度始終為64dp。
? 標題縮進80dp,且在欄擴展時不會向下移動。
? 應用程序欄的padding是24dp,頂部除外,頂部是20dp。
根據Material指南,我們已成功地構建了一個應用程序欄。動作圖標如果不執行某個動作,就沒有任何用處。本質上講,當應用程序欄假定操作欄功能時,它實際上只是一個指向菜單的入口。我們稍后將返回學習菜單和對話框,但現在需要快速了解如何使用Java代碼在運行時操作工具欄。
舊操作欄的改變使工具欄成為了一個更簡單、更直觀的放置全局操作的視圖。然而,空間有限,對于更復雜的圖形化導航組件,可以使用滑動式抽屜。
- Docker and Kubernetes for Java Developers
- C++ Builder 6.0下OpenGL編程技術
- 架構不再難(全5冊)
- Full-Stack Vue.js 2 and Laravel 5
- 微信小程序開發解析
- Java系統化項目開發教程
- Python項目實戰從入門到精通
- Vue.js應用測試
- 跟戴銘學iOS編程:理順核心知識點
- 深度實踐KVM:核心技術、管理運維、性能優化與項目實施
- OpenCV 3.0 Computer Vision with Java
- Selenium WebDriver Practical Guide
- 現代C++語言核心特性解析
- RESTful Web API Design with Node.js(Second Edition)
- C語言王者歸來