《Android》『ToolBar』- ToolBar 之基本用法及如何取代 ActionBar

2018.11.10 / Android 工作筆記, 常用介面元件

Android Developers 參考文獻

➥Toolbar

繼承架構：

extends ViewGroup

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.Toolbar

簡單介紹：

Toolbar 是在 android 5.0(API Level 21) 之後，用來取代 ActionBar 的新元件，我們可以把它想成是一個比 ActionBar 更具設計彈性的通用化元件，與 ActionBar 不同之處在於，ActionBar 是獨立於介面佈局之外的，但 Toolbar 卻會直接在介面佈局檔中定義，讓我們可以在 View 的階層中依照自己的需求任意配置，透過 setActionBar() 或 setSupportActionBar() 方法，我們更可以直接用 Toolbar 來取代 ActionBar 。

實作步驟：

在加入 Toolbar 之前，首先我們必須先檢查控管整個程式風格的 AppTheme 檔之內容，也就是在 AndroidManifest.xml 中，application 標籤中之 android:theme 屬性所參照的風格檔，若這個程式碼原本是使用 ActionBar，則此風格檔的內容必須做出一些修正。

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.xylon.test"
    xmlns:tools="http://schemas.android.com/tools" >

.
.
.
    <application
        android:name="com.xylon.test.MainApplication"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
    .
    .
    .
    </application>
</manifest>

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

<manifest

xmlns:android="http://schemas.android.com/apk/res/android"

package="com.xylon.test"

xmlns:tools="http://schemas.android.com/tools" >

<application

android:name="com.xylon.test.MainApplication"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme">

</application>

</manifest>

AndroidManifest.xml

我們直接將 AppTheme 風格檔之 parent 改為 AppTheme.Base，並在其中設定相關 item 屬性，修改如下 –

<resources>
 
   <style name="AppTheme" parent="AppTheme.Base"></style>
    
   <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primaryDark</item>
        <item name="colorAccent">@color/color_accent</item>
   </style>

</resources>

<item name="android:windowBackground">@color/dim_foreground_material_dark</item>

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

<item name="colorPrimary">@color/color_primary</item>

<item name="colorPrimaryDark">@color/color_primaryDark</item>

<item name="colorAccent">@color/color_accent</item>

</style>

</resources>

styles.xml

其中 windowActionBar 屬性決定是否還需要 ActionBar，colorPrimary、colorPrimaryDark、colorAccent 等屬性則分別決定了 Toolbar 中不同位置的顏色。

接著，我們在介面佈局檔中新增 Toolbar 的元件，相關代碼如下 –

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:titleTextColor="@android:color/white"/>

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?android:attr/actionBarSize"

app:titleTextColor="@android:color/white"/>

Toolbar(layout.xml)

在這裡我們使用了 support.v7 中的 Toolbar 元件，以確保在 android 5.0(API Level 21) 之前的版本亦能兼容。最後，我們在程式碼中加入 Toolbar 之宣告，即完成基本的 Toolbar 設定，亦完成了取代 ActionBar 之工作，程式碼如下 –

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

1 2	Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);

MainActivity.java

其中的 setSupportActionBar() 將我們定義好的 Toolbar 傳入，即表示我們以這個 Toolbar 來取代原本的 ActionBar，之後若我們因為某些需求而需要取得此 Toolbar，直接呼叫 getSupportActionBar() 方法即可。

ActionBar actionbar = getSupportActionBar();
actionbar.setTitle("這是 Toolbar 標題");

1 2	ActionBar actionbar = getSupportActionBar(); actionbar.setTitle("這是 Toolbar 標題");

賽肥膩膩の娛樂生活誌

《Android》『ToolBar』- ToolBar 之基本用法及如何取代 ActionBar

賽肥膩膩

上 / 下一篇文章

上一篇文章《食記》『東央貢泰食堂』- 台北市捷運市政府站信義誠品美食街(已歇業)

下一篇文章《食記》『皇贊牛肉麵坊』- 台北市捷運台北101/世貿站莊敬路 (北醫附近)

您可能也喜歡 You may also like

臉書留言

一般留言

發佈留言取消回覆