Android ActionBar與Toolbar

簡要

ActionBar是預設App的應用欄，但由於Android演化過程，ActionBar取決於使用哪個Android版本

相較之下最新的Toolbar可以在任何能使用支持庫的設備上使用

因此應使用Toolbar

最小能搭載在Android2.1，如果使用Material Design最小能搭載在Android5.0或更高的版本

Toolbar可以做到相同的功能且比Action Bar更靈活，能做的事情更多

接下來是本文所介紹的內容，以上內容參考Android官網

1. 如何將預設ActionBar關閉，改用Toolbar呢？
2. Toolbar Title如何置中呢？
3. 為Toolbar設定Menu

1. 如何將預設ActionBar關閉，改用Toolbar呢？

首先先至app Bundle內，新增下列內容

dependencies {
    ...
    implementation 'androidx.appcompat:appcompat:1.3.1'
    ...
}

繼承Theme.AppCompat.NoActionBar幫style設定風格顏色

app/src/main/res/values新建一個style.xml，然後加入以下程式碼

<style name="MainNoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="color">@color/purple_200</item>
    <item name="colorAccent">@color/purple_500</item>
    <item name="colorPrimary">@color/purple_700</item>
</style>

再來到AndroidManifest.xml將android:theme變更為下方

android:theme="@style/MainNoActionBar"

便可以在設定背景時，直接使用當前風格顏色

android:background="?attr/colorPrimary"

這樣設定好後，編譯並運行手機，會發現App ActionBar已經消失囉！

再來確保Activity是繼承AppCompatActivity

class MainActivity : AppCompatActivity() {
}

然後在Activity onCreate內新增以下程式碼，Toolbar就支援ActionBar囉！

setSupportActionBar(binding.mToolbar)

2. Toolbar Title如何置中呢？

如下預設的title文字只能靠左

Toolbar裡面的app:title="title"設定的時候文字會靠左，如下圖

左邊的Icon btn設定方式如下

supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_baseline_chevron_left_24)
supportActionBar?.setDisplayHomeAsUpEnabled(true)

監聽按鈕方式

mToolbar.setNavigationOnClickListener
或onOptionsItemSelected監聽item.itemId == android.R.id.home

設定後，title文字又被往右推一點

該如何把文字置中呢？

首先先把title刪除，改為下方程式碼

但title沒有設定時，會自動變成AndroidManifest.xml裡面android:label

可以在Activity onCreate裡面直接設定title = “"，就可以清掉囉！

<androidx.appcompat.widget.Toolbar
    android:id="@+id/mToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
    app:layout_constraintVertical_bias="0"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">
    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="title"
        android:textColor="@color/white"
        android:layout_gravity="center"/>
</androidx.appcompat.widget.Toolbar>

上方程式碼效果圖

3. 為Toolbar設定Menu

經過上面設定後，Toolbar已經支援ActionBar了，所以設定的方式也跟ActionBar一樣

這裡舉例最簡單的Menu設定方式，其他的可以參考Android Menu showAsAction屬性

詳細Activity擁有應用欄、Fragment擁有應用欄

參考這裡–>Android Activity、Fragment應用欄(AppBar)使用

以下為簡略的使用方法

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.activity_menu, menu)
    return true
}

監聽Menu點擊事件

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when(item.itemId) {
        R.id.searchMenu -> {
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

以上內容參考Android 官網

---

相關文章

Android Menu showAsAction屬性	Android Activity、Fragment應用欄(AppBar)使用
1. 簡要 2. Menu的showAsAction屬性介紹	簡要 1. Activity擁有應用欄 2. Fragment擁有應用欄 3. 動態修改Menu是否顯示 4. Menu點擊事件處理

訂閱Codeilin的旅程，若有最新消息會通知。

廣告