4. 控制元件 (component)

本階段將從 toolbar_demo_checkpoint2 接續，在還未於 <android.support.v7.widget.Toolbar/> 標籤中，自行新增元件的 toolbar 有幾個大家常用的元素可以使用，請先見下圖：

大抵來說，預設常用的幾個元素就如圖中所示，接著就依序來說明之：

1. setNavigationIcon
即設定 up button 的圖示，因為 Material 的介面，在 Toolbar這裡的 up button樣式也就有別於過去的 ActionBar 哦。

1. setLogo
APP 的圖示。

2. setTitle
主標題。

3. setSubtitle
副標題。

4. setOnMenuItemClickListener
設定選單各按鈕的動作。

先來看到選單外的程式碼，在 MainActivity.java 中：

先來看到

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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左定義：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<menu xmlns:android=""

xmlns:app=""

xmlns: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 的監聽者：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

1

2

3

4

5

6

setSupportActionBar(toolbar);

...

// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用

toolbar.setOnMenuItemClickListener(onMenuItemClick);

和 setNavigationIcon 一樣，需要將之設定在 setSupportActionBar 之後才有作用。執行上面的程式碼便會得到下面的介面。

完完整程式見：toolbar_demo_checkpoint3

5. 總結

在這樣的架構設計下，ToolBar直接成了Layout中可以控制的東西，相對於過去的actionbar來說，設計與可操控性大幅提升。

本文上面的解釋中用到的完成程式碼：toolbar demo check point 0 ~ 4，請到Github 取得。

最後再附上一個介面上常用的屬性說明圖：

這裡按照圖中從上到下的順序做個簡單的說明：

· 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，否則介面看起來是模糊的

轉自：

android：ToolBar詳解（手把手教程）（2）

相關文章