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快速实现。
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中查看，项目地址如下：
