ANDROID – TOOLBAR STEP BY STEP（转）

今年(2014) 的 Google I/O 發表令多數人為之一亮的 Material Design，而 Google 也從「Google I/O 2014」 開始，大家也陸陸續續地看到其更新的 Android APP 皆套用了這個設計介面。當然，這個設計介面著實讓大家感到驚艷外，更讓 Android 開發者開始擔心未來 APP 的介面處理了。

不過，所幸有著之前 ActionBar 的經驗後，Android 也很快地在 support library 裡面提供了相對應的 API 給開發者使用，本篇就為各位介紹 – Toolbar，這是用來取代過去 ActionBar 的元件，而現在於 material design 中也對之有一個統一名稱：App bar，在未來的 android app 中，就以 Toolbar 這個元件來實作之。

1. 概述


在 Android 3.0 開始 Android 推了 ActionBar 這個介面出來，而到了 2013 年 Google 開始大力地推動所謂的 android style，想要逐漸改善過去 android 紛亂的介面設計，希望讓終端使用者盡可能在 android 手機有個一致的操作體驗。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在support library v7裡的 AppCompat 中。

既然會有本篇可以跟各位介紹的 Toolbar，也意謂著官方在某些程度上認為 ActionBar 限制了 android app 的開發與設計的彈性，而在 material design 也對之做了名稱的定義：App bar。接下來將為各位分成幾個階段進行說明，如何在 android app app 中用 toolbar 這個元件來做出一個基本的 app bar 嘍。

本篇所使用到的程式碼：toolbar demo check point 0 ~ 4，請到Github 取得。

2. 基礎套用


這個階段從 toolbar_demo_checkpoint0 開始，分成下列三個部份：

  1. 風格 (style)
  2. 介面 (layout)
  3. 程式 (java)

2.1 風格(style)

風格要調整的地方有二，一在 res/values/styles.xml 另一在 /res/values-v21/styles.xml，為了之後設定方便，我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的風格

1

2

3

4

<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，這邊完整的程式碼如下：

1

2

3

4

5

6

7

8

9

10

11

12

<resources>

<!-- Base application theme. -->

<style name="AppTheme" parent="AppTheme.Base">

</style>

<style name="AppTheme.Base" parent="Theme.AppCompat">

<item name="windowActionBar">false</item>

<item name="android:windowNoTitle">true</item>

</style>

</resources>

再來調整在 Android 5 的風格檔： /res/values-v21/styles.xml，也將其 parent 屬性改為  AppTheme.Base：

1

2

3

4

5

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="AppTheme" parent="AppTheme.Base">

</style>

</resources>

2.2  介面(Layout)

在 activity_main.xml 裡面加入 Toolbar 元件：

1

2

3

4

5

6

<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 以上的版本才能使用。

這邊需注意，要將 RelatvieLayout 裡的針對四個方向 padding 屬性拿掉，並記得將原本的 Hello World 設定layout_below="@+id/toolbar" ，否則會看到像下面這樣的錯誤畫面。

2.3 程式 (Java)

請到 MainActivity.java 裡加入 Toolbar 的宣告：

1

2

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

宣告後，再將之用 setSupportActionBar 設定，即能取代表原本的 actionbar 嘍，此階段完成畫面如下：

完整程式碼請見：toolbar_demo_checkpoint1

3. 調色 (Customization color)


這個階段將從 toolbar_demo_checkpoint1 接著往下進行：

上圖是將本階段要完成的結果畫面做了標示，搭配下述希望讓大家可以一目瞭然。

  1. 狀態列底色： colorPrimaryDark
    在風格 (styles) 或是主題 (themes) 裡進行設定。
  2. App bar 底色
    這個設定分為二，若您的 android app 仍是使用 actionbar 實作，則直接在風格 (styles) 或是主題 (themes) 裡進行設定colorPrimary 參數即可；
    可若是採用 toolbar 的話，則要在介面 (layout) 裡面設定 toolbar 元件的 background 屬性。
  3. 導航列底色：navigationBarColor
    僅能設定在 API v21 也就是 Android 5 以後的版本，因此要將之設定在 res/values-v21/styles.xml 裡面。
  4. 主視窗底色：windowBackground

也因此在這個階段，我們需要設定的地方有三，一是主要風格檔 (res/values/styles.xml)

1

2

3

4

5

6

7

8

9

10

11

<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 的風格檔 (res/values-v21/styles.xml)

1

2

3

4

<style name="AppTheme" parent="AppTheme.Base">

<!--Navigation bar color-->

<item name="android:navigationBarColor">@color/accent_material_light</item>

</style>

最後，就是為了本篇的主角 – Toolbar 的 background 進行設定。

1

2

3

4

5

6

7

<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 的顏色設定嘍。

最後，再來看一下結果畫面。

完整程式碼請見： toolbar_demo_checkpoint2

4. 元件 (component)


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

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

  1. setNavigationIcon
    即設定 up button 的圖示，因應 Material 的介面，在 Toolbar 這裡的 up button 樣示也就有別於過去的 ActionBar 嘍。
  2. setLogo
    APP 的圖示。
  3. setTitle
    主標題。
  4. setSubtitle
    副標題。
  5. 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="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 的監聽式

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 的屬性中

6. 補充


在官網的 Issue 中，有人提到這樣的問題，當今天設定  android:minHeight="?attr/actionBarSize" 時，在轉為橫向呈現時，Toolbar 的高度會更得很詭異。所以，將高度的設定  ?attr/actionBarSize 回歸到 height 去，

1

android:layout_height="?attr/actionBarSize"

這樣的設定即可。而本篇的內容以及範例程式皆已如此更正，還請各位留意一下之後的寫法。

时间： 2024-10-14 00:38:21

ANDROID – TOOLBAR STEP BY STEP（转）的相关文章

ANDROID – TOOLBAR 上的 NAVIGATION DRAWER（转）

在 Material Design 釋出後,Google 也開始陸續更新了 Google app 的介面,讓大家有個範例可以看.而過去大力推動的 actionbar 自然而然也成了眾開發者觀注的部份:其中的 up button 的設定在前一篇所介紹的 Toolbar 也已看到.這邊還未提到的一個部份是 material design 中有提到的人機互動效果,簡言之,就是讓使用者明顯地感受到在操作 app 時,可以獲得明顯的回應,從而得到豐富地操作體驗感:因此,在剛開始釋出的幾支 Google a

数论之高次同余方程（Baby Step Giant Step + 拓展BSGS）

什么叫高次同余方程?说白了就是解决这样一个问题: A^x=B(mod C),求最小的x值. baby step giant step算法 题目条件:C是素数(事实上,A与C互质就可以.为什么?在BSGS算法中是要求a^m在%c条件下的逆元的,如果a.c不互质根本就没有逆元.) 如果x有解,那么0<=x<C,为什么? 我们可以回忆一下欧拉定理: 对于c是素数的情况,φ(c)=c-1 那么既然我们知道a^0=1,a^φ(c)=1(在%c的条件下).那么0~φ(c)必定是一个循环节(不一定是最小的)

Git Step by Step – (8) Git的merge和rebase

前面一篇文章中提到了"git pull"等价于"git fetch"加上"git merge",然后还提到了pull命令支持rebase模式,这篇文章就介绍一下merge和rebase之间有什么差别. 由于我们主要是想看看merge跟rebase之间的区别,这里就是用本地仓库的分支进行演示了. merge 其实在介绍分支的那篇文章中已经介绍过了一些分支merge的内容,这里就进行一些补充和总结. 下面我们基于本地一个仓库开始介绍,当前仓库的分支情

C# 2012 step by step 学习笔记8 CHAPTER 9 Creating Value types with enumerations and Structures

C# 2012 step by step 学习笔记8 CHAPTER 9 Creating Value types with enumerations and Structures things about 1. Declare an enumeration type. 2. Create and use an enumeration type. 3. Declare a structure type. 4. Create and use a structure type. 5. Explain

Linux Booting Process: A step by step tutorial for understanding Linux boot sequence

One of the most remarkable achievement in the history of mankind is computers. Another amazing fact about this remarkable achievement called computers is that its a collection of different electronic components, and they work together in coordination

C++开发WPF，Step by Step

示例代码 使用C++来开发WPF,主要是如何在MFC(Win32)的窗口中Host WPF的Page.下面我就做个详细的介绍. 一.创建工程, 由于MFC的Wizard会生成很多用不到的代码,所以我准备从一个空的工程开始创建一个MFC的工程. a)         打开VS2005,菜单File->New->Projects-, 左面选择Visual C++->Win32,右面选择Win32 Console Application,给工程起个名字CPlusPlus_WPF, Ok进入下一

数据库设计 Step by Step (1)——扬帆启航

引言:一直在从事数据库开发和设计工作,也看了一些书籍,算是略有心得.很久之前就想针 对关系数据库设计进行整理.总结,但因为种种原因迟迟没有动手,主要还是惰性使然.今天也算是痛下决心开始这项卓绝又令我兴奋的工作.这将是一个系列的文 章,我将以讲座式的口吻展开讨论(个人偷懒,这里的总结直接拿去公司培训新人用). 系列的第一讲我们先来回答下面几个问题 数据库是大楼的根基 大多数程序员都很急切,在了解基本需求之后希望很快的进入到编码阶段(可能只有产出代码才能反映工作量),对于数据库设计思考得比较少. 这

数据库设计 Step by Step (2)——数据库生命周期

引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整,需要花很多时间整理.思考数据库设计的各种资料,所以文章的更新速度可能会慢一些,也希望大家能够谅解. 系列的第二讲我们将站在高处俯瞰一下数据库的生命周期,了解数据库设计的整体流程 数据库生命周期 大家对软件生命周期较为熟悉,数据库也有其生命周期,如下图所示. 图(1)数据库生命周期 数据库的生命周期

Shell Step by Step (3) —— Stdin &amp;amp; if

4.输入输出 #! /bin/bash # Read users input and then get his name read -p "Please input your first name: " firstName read -p "Please input your last name: " lastName echo -e "Your full name is: $firstName $lastName" read使用方法: read

WPF Step By Step 自定义模板

WPF Step By Step 自定义模板 回顾 上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现的方案和最终的运行效果. 本文大纲 1.控件模板及数据模板 2.ListBox深度定制模板. 3.TreeView高级模板使用实例. 控件模板及数据模板 控件模板 什么是控件模板,指定可以在控件的多个实例之间共享 Control 的可视结构和性能方面的方面.控件模板其实就是我们在可视方面的自定义模板