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的旅程,若有最新消息會通知。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

WordPress.com.

向上 ↑

%d 位部落客按了讚: