Android 使用Toolbar实现应用栏实例详解

时间:2022-11-30 ChenYhong 人气:0

使用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

加载全部内容