Android 使用Toolbar實現應用欄實例詳解

Posted on by

使用Toolbar實現應用欄

App中應用欄是十分常見的，通常應用欄會顯示當前頁面的標題，還有一些操作按鈕，例如返回、搜索、掃碼等。本文介紹如何通過Toolbar實現應用欄。

使用Toolbar來實現應用欄，需要在AndroidManifest中設置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來設置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)
    }
}

至此，一個簡單的應用欄已經實現瞭，效果如圖：

應用欄功能擴展

返回

返回是應用欄中最常使用的功能，在Toolbar上使用返回功能，需要進行如下操作。

  • 在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及以下的設備-->
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.chenyihong.exampledemo.home.HomeActivity" />
        </activity>
    </application>
</manifest>
  • 在Activiy的onCreate方法中使用setDisplayHomeAsUpEnabled來顯示返回按鈕，代碼如下：
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 {
            // 可以自定義圖標的樣式
            setHomeAsUpIndicator(R.drawable.icon_back)
            setDisplayHomeAsUpEnabled(true)
        }
    }
}

效果如圖：

菜單

應用欄可能還會包含一些功能按鈕，例如搜索、掃一掃、打開設置頁面等，可以通過OptionsMenu快速實現。

  • 在res/menu目錄下創建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>
  • 調整菜單的樣式

由於我這邊對Toolbar的背景顏色進行瞭修改，需要調整OptionsMenu的圖標顏色和文字顏色來適配，如下：

<?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 {
        // 如果需要在運行時對菜單進行調整(刪除或增加)，在此處理
        return super.onPrepareOptionsMenu(menu)
    }
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // 在此處理菜單項的點擊事件
        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() }
    }
    ...
}

效果如圖：

示例

完整示例代碼可以在demo中查看，項目地址如下：

ExampleDemo github

ExampleDemo gitee

以上就是Android 使用Toolbar實現應用欄的詳細內容，更多關於Android 使用Toolbar實現應用欄的資料請關註WalkonNet其它相關文章！

推薦閱讀：