应用条

  • 更新时间:2025-12-02 10:12:45

应用条-appbar

原生类型:{com.google.android.material.appbar.MaterialToolbar}

在使用的时候最好配合[appbar-layout]组件一起使用

应用条是一个软件的顶部条,用来显示标题、操作按钮等。

一、常用属性

标题 - 标题

设置标题

<界面>
    <!-- 状态栏 -->
    <状态栏/>
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 标题="我是标题" ="最大" />
    </应用条布局>
</界面>

副标题 - 副标题

设置副标题

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 副标题="副标题" 标题="我是标题" ="最大" />
    </应用条布局>
</界面>

标题颜色 - 标题颜色

设置标题颜色

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 ="最大" 标题="我是标题" 标题颜色="#B44A4A" />
    </应用条布局>
</界面>

副标题颜色 - 副标题颜色

设置副标题颜色

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 副标题="副标题" 副标题颜色="#B44A4A" ="最大" 标题="我是标题" />
    </应用条布局>
</界面>

背景颜色 - 背景颜色

设置背景颜色

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 副标题="副标题" ="最大" 标题="我是标题" 背景颜色="#345de6ff" />
    </应用条布局>
</界面>

背景图片 - 背景图片

设置背景图片

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 ="最大" 标题颜色="#FFFFFF" 标题="我是标题" 背景图片="/res/appbar-bg.png" />
    </应用条布局>
</界面>

菜单 - 菜单节点

菜单节点

菜单节点中拥有如下属性:

  • 文本 {string} 设置文本
  • 图标 {string} 设置图标
  • 图标颜色 {string} 设置图标颜色
  • 显示方式 {string} 菜单显示方式(总是:总是显示;有空间:如果有空间才显示;从不:从不显示;带文字:携带文本显示)
  • 项目 {xml} 子菜单节点

项目节点拥有如下属性:

  • 文本 {string} 设置文本
  • 项目 {xml} 为子菜单设置子菜单节点(因此项目节点中可以嵌套写自己的项目子菜单节点)
<!--[用法一]只用主菜单-->
<应用条 返回="" 背景颜色="#F1F0FA" 副标题="安卓自动化平台..." 标题="主菜单"
    宽度="最大">
    <菜单 图标="ic_menu_line" 图标颜色="#000000" 文本="菜单" />
    <菜单 图标="ic_home_fill" 图标颜色="#000000" 文本="主页" />
    <菜单 图标="ic_3d" 图标颜色="#000000" 文本="转换" />
</应用条>
<!--[用法二]多级子菜单-->
<应用条 返回="" 背景颜色="#F1F0FA" 副标题="可设置多级子菜单" 标题="子菜单" 宽度="最大">
    <菜单>
        <项目 文本="菜单1" />
        <项目 文本="菜单2" />
        <项目 文本="菜单3">
            <!--项目中还允许添加项目子菜单-->
            <项目 文本="菜单3-1" />
            <项目 文本="菜单3-2">
                <项目 文本="菜单3-2-1" />
                <项目 文本="菜单3-2-2" />
                <项目 文本="菜单3-2-3" />
            </项目>
            <项目 文本="菜单3-3" />
        </项目>
    </菜单>
</应用条>

示例:主菜单

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 标题="我是标题" ="最大">
            <菜单 图标="ic_menu_line" 图标颜色="#000000" 文本="菜单" />
            <菜单 图标="ic_home_fill" 图标颜色="#000000" 文本="主页" />
            <菜单 图标="ic_3d" 图标颜色="#000000" 文本="转换" />
        </应用条>
    </应用条布局>
</界面>

示例:多级子菜单

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 ="最大" 标题="我是标题">
            <菜单 图标="ic_menu_line" 图标颜色="#000000" 文本="菜单" />
            <菜单 图标="ic_home_fill" 图标颜色="#000000" 文本="主页" />
            <菜单 图标="ic_more" 图标颜色="#000000" 文本="更多">
                <项目 文本="菜单1-1" />
                <项目 文本="菜单1-2" />
                <项目 文本="菜单1-3">
                    <!-- 项目 中还可以继续嵌套子项目 -->
                    <项目 文本="菜单2-1" />
                    <项目 文本="菜单3-2" />
                </项目>
            </菜单>
        </应用条>
    </应用条布局>
</界面>

返回 - 启用返回按钮

设置启用返回按钮

<界面>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 ="最大" 标题="我是标题" 返回="" />
    </应用条布局>
</界面>

内边距 - 内边距

设置内边距

参数顺序:左,上,右,下(单位:dp)

<ui>
    <!-- 状态栏 -->
    <状态栏 />
    <!-- 应用条需要配合此布局才能生效 -->
    <应用条布局 ="最大">
        <应用条 副标题="我没有内边距" ="最大" 标题="我是标题" />
    </应用条布局>
    <!-- 分割线 -->
    <分割线 />
    <应用条布局 ="最大">
        <!--内边距 顺序是:左,上,右,下-->
        <!--内边距 只设置一个值:则设置所有方向的内边距-->
        <!--内边距 只设置两个值:则设置左右和上下方向的内边距-->
        <应用条 内边距="50" 副标题="我有内边距" ="最大" 标题="我是标题" />
    </应用条布局>
</ui>

二、常用函数

设置标题(标题)

设置标题

  • 参数 : 标题 {string} 标题内容

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题
应用条.设置标题("新标题");

设置副标题(副标题)

设置副标题

  • 参数 : 副标题 {string} 副标题内容

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题
应用条.设置副标题("新副标题");

设置标题颜色(颜色)

设置标题颜色

  • 参数 : 颜色 {int} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题颜色
应用条.设置标题颜色($颜色.红色);

设置标题颜色(颜色)

设置标题颜色

  • 参数 : 颜色 {string} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置标题颜色
应用条.设置标题颜色("#1E1F22");

设置副标题颜色(颜色)

设置副标题颜色

  • 参数 : 颜色 {int} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题颜色
应用条.设置副标题颜色($颜色.红色);

设置副标题颜色(颜色)

设置副标题颜色

  • 参数 : 颜色 {string} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置副标题颜色
应用条.设置副标题颜色("#1E1F22");

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {int} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置背景颜色
应用条.设置背景颜色($颜色.红色);

设置背景颜色(颜色)

设置背景颜色

  • 参数 : 颜色 {string} 颜色值

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//设置背景颜色
应用条.设置背景颜色("#1E1F22");

监听返回(回调)

监听返回事件

  • 参数 : 回调 {(视图)=>{}} 返回按钮点击事件

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//返回按钮点击事件
应用条.监听返回((视图)=>{
    //一般标题的返回按钮就是退出界面:
    界面.结束();
});

监听菜单(回调)

监听菜单事件

  • 参数 : 回调 {(标题)=>{}} 菜单点击事件

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
//返回菜单点击事件
应用条.监听菜单((标题)=>{
    如果(标题 == "菜单1"){
          //菜单1点击事件
    }
});

绑定(抽屉)

绑定抽屉

  • 参数 : 抽屉 {drawer}

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./资源/主界面.xml");
//拿到控件
定义 应用条 = 界面.找控件("我的应用条");
定义 抽屉 = 界面.找控件("我的抽屉");
//让应用条与抽屉联动
应用条.绑定(抽屉);