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

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

ActiviyonCreate方法中使用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>
  • ActiviyonCreate方法中使用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

作者:ChenYhong

%s 个评论

要回复文章请先登录注册