HarmonyOS 鸿蒙Next中Android的toolbar

HarmonyOS 鸿蒙Next中Android的toolbar

Toolbar

主题： “Theme.AppCompat.NoActionBar” 深色主题
“Theme.AppCompat.Light.NoActionBar” 浅色主题

<item name="colorPrimary">@color/black</item>
<item name="colorPrimaryDark">@color/black</item>

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize" //将Toolbar的高度指定为actionBar的高度
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    //由于前面我们指定主题为浅色，Toolbar也为浅色，它上面的元素就会变成深色，就很难看，所以我们把Toolbar单独指定为深色
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" //如果有菜单也会变成深色，这里指定为浅色
/>

setSupportActionBar(binding.toolbar)

给Toolbar设置标题：在AndroidManifest中

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:label="Fruit" //默认是项目名，用label指定
>

在Toolbar添加按钮

  1. 创建menu文件夹，创建toolbar.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/backup"
    android:icon="@drawable/ic_backup"
    android:title="Backup"
    app:showAsAction="always"
    />
    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"
        />
</menu>

//app：showAsAction指定按钮的展示情况 //always：一直可见 //ifRoom：空间充足是可见 //never：不可见，折叠到菜单中了 //只有在菜单中的按钮才会显示名称

  1. 重写onCreateOptionsMenu和onOptionsItemSelected
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.toolbar,menu) //传入要加载的菜单文件
    return true
}
//设置点击事件
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when(item.itemId){
        R.id.backup-> Toast.makeText(this,"You Click BackUp",Toast.LENGTH_SHORT).show()
        R.id.delete->Toast.makeText(this,"You Click Delete",Toast.LENGTH_SHORT).show()
        R.id.settings->Toast.makeText(this,"You Click Settings",Toast.LENGTH_SHORT).show()
    }
    return true
}

更多关于HarmonyOS 鸿蒙Next中Android的toolbar的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next中不再支持Android的Toolbar控件。鸿蒙系统使用自己的UI框架，提供了类似的导航栏组件称为NavigationBar。开发者需要使用鸿蒙的ohos.agp.components包中的组件来实现类似功能，如DirectionalLayout配合Text和Image组件构建自定义导航栏。鸿蒙的导航组件遵循其设计规范，支持分布式能力，与Android的Toolbar实现机制不同。相关API文档可在鸿蒙开发者文档的UI组件部分查看。

更多关于HarmonyOS 鸿蒙Next中Android的toolbar的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Toolbar的实现方式与Android有所不同。HarmonyOS使用自己的UI框架，不再兼容Android的AppCompat组件。以下是关键区别：

  1. 主题设置： HarmonyOS使用resources/base/theme下的theme.json定义主题，而不是Android的styles.xml

  2. 导航栏实现： 推荐使用NavigationBar组件替代Toolbar：

import { NavigationBar } from '@ohos.arkui.advanced'

NavigationBar({
  title: '页面标题',
  menus: [
    {
      value: '设置',
      icon: $r('app.media.ic_settings'),
      action: () => {
        // 点击处理
      }
    }
  ]
})
  1. 样式控制： 通过通用属性修改样式，如：
.backgroundColor($r('app.color.primary'))
.titleFont({ size: 20, weight: FontWeight.Bold })
  1. 菜单实现： 直接在NavigationBar的menus属性中定义，无需单独创建menu XML文件

注意：HarmonyOS Next不再支持Android的Toolbar相关API，需要按照ArkUI规范重新实现导航栏功能。

回到顶部