http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
1. 概述
Android 3.0 Android 推了 ActionBar 這個控件,而到了2013 年 Google 開始大力地推動所謂的 android style,想要逐漸改善過去 android 紛亂的界面設計,希望讓終端使用者儘可能在 android 手機有個一致的操作體驗。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 裏的 AppCompat。
既然會有本篇跟各位介紹的 Toolbar,也意味着官方在某些程度上認爲 ActionBar 限制了 android app 的開發與設計的彈性,而在 material design 也對之做了名稱的定義:App bar。接下來將爲各位分成幾個階段進行說明,如何在 android app 中用 toolbar 這個控件來做出一個基本的 app bar 嘍。
2. 基礎套用
這個階段從 toolbar_demo_checkpoint0 開始,分成下列三個部份:
風格 (style)
界面 (layout)
程序 (java)
2.1 風格(style)
風格要調整的地方有二
一在 res/values/styles.xml中
二在 /res/values-v21/styles.xml中
爲了之後設定方便,我們先在 res/values/styles.xml 裏增加一個名爲 AppTheme.Base 的風格
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
因爲此範例只使用 Toolbar,所以我們要將讓原本的 ActionBar 隱藏起來,然後將原本 AppTheme 的 parent 屬性 改爲上面的AppTheme.Base,代碼如下:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<del><item name="android:windowNoTitle">true</item></del>
<!-- 使用 API Level 22 編譯的話,要拿掉前綴字 -->
<item name="windowNoTitle">true</item>
</style>
</resources>
再來調整Android 5.0的style: /res/values-v21/styles.xml,也將其 parent 屬性改爲 AppTheme.Base:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
</resources>
2.2 界面(Layout)
在 activity_main.xml 裏面添加 Toolbar 控件:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" >
</android.support.v7.widget.Toolbar>
請記得用 support v7 裏的 toolbar,不然然只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。
這裏需注意,要將 RelatvieLayout 裏的四個方向的padding 屬性去掉,並記得將原本的 Hello World 設爲 layout_below="@+id/toolbar" ,否則會看到像下面這樣的錯誤畫面。
2.3 程序 (Java)
在 MainActivity.java 中加入 Toolbar 的聲明:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
聲明後,再將之用 setSupportActionBar 設定,Toolbar即能取代原本的 actionbar 了,此階段完成畫面如下:
3. 自定義顏色(Customization color)
這個階段將從 toolbar_demo_checkpoint1 接着往下進行:
上圖是將本階段要完成的結果畫面做了標示,結合下面的描述希望大家能明白。
-
colorPrimaryDark(狀態欄底色):在風格 (styles) 或是主題 (themes) 裏進行設定。
-
App bar 底色
這個設定分爲二,若你的 android app 仍是使用 actionbar ,則直接在風格 (styles) 或是主題 (themes) 裏進行設定 colorPrimary 參數即可;
可若是採用 toolbar 的話,則要在界面 (layout) 裏面設定 toolbar 控件的 background 屬性。 -
navigationBarColor(導航欄底色):
僅能在 API v21 也就是 Android 5 以後的版本中使用, 因此要將之設定在 res/values-v21/styles.xml 裏面。
-
主視窗底色:windowBackground
也因此在這個階段,我們需要設定的地方有三,一是 style中(res/values/styles.xml)
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- Actionbar color -->
<item name="colorPrimary">@color/accent_material_dark</item>
<!--Status bar color-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--Window color-->
<item name="android:windowBackground">@color/dim_foreground_material_dark</item>
</style>
再來是 v21 的style中 (res/values-v21/styles.xml)
<style name="AppTheme" parent="AppTheme.Base">
<!--Navigation bar color-->
<item name="android:navigationBarColor">@color/accent_material_light</item>
</style>
最後,就是爲了本篇的主角 – Toolbar 的 background 進行設定。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary" >
</android.support.v7.widget.Toolbar>
在本範例中,toolbar 是設定來在 activity_main.xml,對其設定 background 屬性: android:background="?attr/colorPrimary" ,這樣就可以使之延用 Actionbar 的顏色設定嘍。
最後,再來看一下結果畫面。
4. 控件 (component)
本階段將從 toolbar_demo_checkpoint2 接續,在還未於 <android.support.v7.widget.Toolbar/> 標籤中,自行添加元件的 toolbar 有幾個大家常用的元素可以使用,請先見下圖:
大抵來說,預設常用的幾個元素就如圖中所示,接着就依序來說明之:
-
setNavigationIcon
即設定 up button 的圖標,因爲 Material 的介面,在 Toolbar這裏的 up button樣式也就有別於過去的 ActionBar 哦。
-
setLogo
APP 的圖標。 -
setTitle
主標題。 -
setSubtitle
副標題。 -
setOnMenuItemClickListener
設定菜單各按鈕的動作。
先來看看菜單外的代碼,在 MainActivity.java 中:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
// Navigation Icon 要設定在 setSupoortActionBar 纔有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);
這邊要留意的是setNavigationIcon需要放在 setSupportActionBar之後纔會生效。
菜單部分,需要先在res/menu/menu_main.xml左定義:
<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=".MainActivity">
<item android:id="@+id/action_edit"
android:title="@string/action_edit"
android:orderInCategory="80"
android:icon="@drawable/ab_edit"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_share"
android:title="@string/action_edit"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
再回到MainActivity.java 中加入OnMenuItemClickListener 的監聽者:
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
switch (menuItem.getItemId()) {
case R.id.action_edit:
msg += "Click edit";
break;
case R.id.action_share:
msg += "Click share";
break;
case R.id.action_settings:
msg += "Click setting";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
將onMenuItemClick監聽者設置給toolbar
setSupportActionBar(toolbar);
...
// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 纔有作用
toolbar.setOnMenuItemClickListener(onMenuItemClick);
和 setNavigationIcon 一樣,需要將之設定在 setSupportActionBar 之後纔有作用。執行上面的代碼便會得到下面的界面。
完完整程序見:toolbar_demo_checkpoint3
5. 總結
在這樣的架構設計下,ToolBar直接成了Layout中可以控制的東西,相對於過去的actionbar來說,設計與可操控性大幅提升。
最後再附上一個界面上常用的屬性說明圖:
這裏按照圖中從上到下的順序做個簡單的說明:
-
colorPrimaryDark
-
狀態欄背景色。
-
在 style 的屬性中設置。
-
-
textColorPrimary
-
App bar 上的標題與更多菜單中的文字顏色。
-
在 style 的屬性中設置。
-
-
App bar 的背景色
-
Actionbar 的背景色設定在 style 中的 colorPrimary。
-
Toolbar 的背景色在layout文件中設置background屬性。
-
-
colorAccent
-
各控制元件(如:check box、switch 或是 radoi) 被勾選 (checked) 或是選定 (selected) 的顏色。
-
在 style 的屬性中設置。
-
-
colorControlNormal
-
各控制元件的預設顏色。
-
在 style 的屬性中設置
-
-
windowBackground
-
App 的背景色。
-
在 style 的屬性中設置
-
-
navigationBarColor
-
導航欄的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
-
在 style 的屬性中設置
-
最後需要注意的是:使用material主題的時候,必須設定targetSdkVersion = 21,否則界面看起來是模糊的