Titanium SDK 中的 Android CollapseToolbar 组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00915/article/details/148782598

Titanium SDK 中的 Android CollapseToolbar 组件详解

titanium-sdk 🚀 Native iOS and Android Apps with JavaScript 项目地址: https://gitcode.com/gh_mirrors/ti/titanium-sdk

概述

CollapseToolbar 是 Titanium SDK 中一个专为 Android 平台设计的 UI 组件，它实现了 Material Design 中的可折叠工具栏（Collapsing Toolbar）效果。这个组件自 Titanium SDK 12.1.0 版本开始引入，为开发者提供了一种简单的方式来创建具有视觉吸引力的顶部工具栏布局。

核心功能

CollapseToolbar 主要提供以下功能：

可折叠效果：当用户滚动内容时，工具栏可以平滑地折叠和展开
视差效果：背景图片在滚动时会产生视差效果，增强视觉体验
标题动画：工具栏标题在折叠/展开过程中有大小变化的动画
内容区域：下方的内容区域自动支持滚动

主要属性详解

基本外观控制

barColor：设置扩展状态下工具栏的背景色（当没有设置图片时）
contentScrimColor：设置折叠状态下工具栏的背景色
image：设置工具栏的背景图片，支持本地和远程图片
imageHeight：设置背景图片的高度，默认为 250 像素

标题相关

title：设置工具栏显示的标题文本
color：设置标题文本的颜色
navigationIconColor：设置返回箭头图标的颜色

布局控制

contentView：设置主要内容区域，这个区域会自动支持滚动
displayHomeAsUp：布尔值，控制是否显示返回箭头图标
flags：控制滚动行为的标志位，使用 Titanium.UI.Android.SCROLL_FLAG_* 常量

事件处理

onHomeIconItemSelected：当用户点击返回箭头图标时的回调函数

使用示例

纯代码实现

const win = Ti.UI.createWindow({
    theme: "Theme.Titanium.DayNight.NoTitleBar"
});

// 创建内容视图
const contentView = Ti.UI.createView({
    layout: "vertical",
    height: Ti.UI.SIZE
});

// 添加一些内容
for (let i = 0; i < 40; ++i) {
    contentView.add(Ti.UI.createLabel({
        text: "项目 " + i,
        height: 40
    }));
}

// 创建 CollapseToolbar
const toolbar = Ti.UI.Android.createCollapseToolbar({
    contentScrimColor: "#2196F3", // 折叠状态颜色
    image: "header.jpg",          // 背景图片
    title: "我的应用",             // 标题
    imageHeight: 300              // 图片高度
});

win.addEventListener('open', function() {
    toolbar.contentView = contentView; // 设置内容视图
    toolbar.displayHomeAsUp = true;   // 显示返回箭头
    toolbar.onHomeIconItemSelected = function() {
        win.close();                  // 点击返回关闭窗口
    };
});

win.add(toolbar);
win.open();

Alloy XML 实现

<Alloy>
    <Window>
        <CollapseToolbar platform="android" 
            contentScrimColor="#4CAF50"
            image="header.jpg"
            title="Alloy示例"
            imageHeight="250">
            
            <ContentView>
                <View layout="vertical" height="Ti.UI.SIZE">
                    <!-- 这里添加你的内容 -->
                    <Label>这是内容区域</Label>
                    <Label>可以添加任意内容</Label>
                </View>
            </ContentView>
        </CollapseToolbar>
    </Window>
</Alloy>