Android 使用Toolbar實(shí)現(xiàn)應(yīng)用欄實(shí)例詳解

更新時(shí)間：2022年11月27日 15:28:23 作者：ChenYhong

這篇文章主要為大家介紹了Android 使用Toolbar實(shí)現(xiàn)應(yīng)用欄實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

使用Toolbar實(shí)現(xiàn)應(yīng)用欄

App中應(yīng)用欄是十分常見(jiàn)的，通常應(yīng)用欄會(huì)顯示當(dāng)前頁(yè)面的標(biāo)題，還有一些操作按鈕，例如返回、搜索、掃碼等。本文介紹如何通過(guò)Toolbar實(shí)現(xiàn)應(yīng)用欄。

使用Toolbar來(lái)實(shí)現(xiàn)應(yīng)用欄，需要在AndroidManifest中設(shè)置NoActionBar的主題，并且Activity需要繼承AppCompatActivity。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:theme="Theme.MaterialComponents.DayNight.NoActionBar">
        ...
    </application>
</manifest>
class ToolbarActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

在布局文件中添加Toolbar控件，如下：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/color_23242a"
            android:elevation="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:titleTextColor="@color/white" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

在Activiy的onCreate方法中使用setSupportActionBar來(lái)設(shè)置Toolbar，代碼如下：

class ToolbarActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: LayoutToolbarActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_toolbar_activity)
        setSupportActionBar(binding.toolbar)
    }
}

至此，一個(gè)簡(jiǎn)單的應(yīng)用欄已經(jīng)實(shí)現(xiàn)了，效果如圖：

應(yīng)用欄功能擴(kuò)展

返回是應(yīng)用欄中最常使用的功能，在Toolbar上使用返回功能，需要進(jìn)行如下操作。

在AndroidManifest中配置父Activity，如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:theme="Theme.MaterialComponents.DayNight.NoActionBar">
        ...
        <activity
            android:name="com.chenyihong.exampledemo.toolbar.ToolbarActivity"
            android:parentActivityName="com.chenyihong.exampledemo.home.HomeActivity"
            android:screenOrientation="portrait">
            <!--適配 Android 4.0及以下的設(shè)備-->
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.chenyihong.exampledemo.home.HomeActivity" />
        </activity>
    </application>
</manifest>

在Activiy的onCreate方法中使用setDisplayHomeAsUpEnabled來(lái)顯示返回按鈕，代碼如下：

class ToolbarActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: LayoutToolbarActivityBinding = DataBindingUtil.setContentView(this, R.layout.layout_toolbar_activity)
        setSupportActionBar(binding.toolbar)
        supportActionBar?.run {
            // 可以自定義圖標(biāo)的樣式
            setHomeAsUpIndicator(R.drawable.icon_back)
            setDisplayHomeAsUpEnabled(true)
        }
    }
}

效果如圖：

菜單

應(yīng)用欄可能還會(huì)包含一些功能按鈕，例如搜索、掃一掃、打開(kāi)設(shè)置頁(yè)面等，可以通過(guò)OptionsMenu快速實(shí)現(xiàn)。

在res/menu目錄下創(chuàng)建Menu Resource File，如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/icon_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_scan"
        android:icon="@drawable/icon_scan"
        android:title="Scan"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_setting"
        android:icon="@drawable/icon_setting"
        android:title="Setting"
        app:showAsAction="never" />
</menu>

調(diào)整菜單的樣式

由于我這邊對(duì)Toolbar的背景顏色進(jìn)行了修改，需要調(diào)整OptionsMenu的圖標(biāo)顏色和文字顏色來(lái)適配，如下：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--android:theme用于指定Toolbar的樣式-->
        <!--app:popupTheme用于指定Menu的樣式-->
        <androidx.appcompat.widget.Toolbar
            ...
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight.ActionBar"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

在Activity中配置菜單

class ToolbarActivity : AppCompatActivity() {
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.example_menu, menu)
        return true
    }
    override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
        // 如果需要在運(yùn)行時(shí)對(duì)菜單進(jìn)行調(diào)整(刪除或增加)，在此處理
        return super.onPrepareOptionsMenu(menu)
    }
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // 在此處理菜單項(xiàng)的點(diǎn)擊事件
        when (item.itemId) {
            R.id.action_search -> {
                showToast("click search menu")
            }
            R.id.action_scan -> {
                showToast("click scan menu")
            }
            R.id.action_setting -> {
                showToast("click setting menu")
            }
        }
        return super.onOptionsItemSelected(item)
    }
    private fun showToast(message: String) {
        runOnUiThread { Toast.makeText(this, message, Toast.LENGTH_SHORT).show() }
    }
    ...
}

效果如圖：