索引

• 概述
• 标签风格

概述

UI 库提供了标签页布局器 ht.ui.TabLayout，以标签的方式呈现多个子组件；每个子组件的标题、图标、是否可关闭等都是通过布局参数来控制(布局参数列表参考 ht.ui.TabLayout 的 API 文档)

标签头组成请参考下面的示意图：

上图中标出了标签中每个区域的名称，可通过这些名称调整展示效果，比如要设置文本和图标之间的距离，可使用下面的代码：

tabLayout.setIconTextGap(20);

每个标签的宽度默认是计算 tabPadding、icon、text、iconTextGap、closeIcon 每个部分占据的宽度之和得来的，如果需要自定义标签宽度(比如所有的标签使用统一的宽度)，可以单独调整每个部分的宽度(如上面调整 iconTextGap)，也可以重写 getTabWidth(child) 函数实现：

tabLayout.getTabWidth = function(child) {
    return 200;
}

需要注意，closeIcon 的位置是由 closeIconX 和 closeIconY 两个属性控制的(类似于绝对定位，不受 tabPadding 的影响)

closeIconX 和 closeIconY 指定的坐标是指关闭图标中心点的坐标，值格式如下：

• 大于 1：表示从左侧或顶部开始的坐标值，比如 closeIconX 为 10，表示左侧开始计算，往右偏移 10px
• 小于 0：表示从右侧或底部开始的坐标值，比如 closeIconX 为 -10，表示从右侧开始计算，往左偏移 10px
• 0 到 1 之间，表示百分比，比如 closeIconY 默认为 0.5，表示垂直方向居中

下面是 TabLayout 的例子(通过右侧的下拉框可以切换标签头的位置)：

UI 库中内置了两个 tab 头样式： tablayout-line-outside 和 tablayout-line-inside，可通过下面的方式自由切换：

tabLayout.setStyle('tablayout-line-outside');

上面例子中第二个 ComboBox 演示了样式切换后的效果

另一个需要注意的地方是，默认情况下每个标签页的长度是根据自己的内容计算出来的，如果 tabPosition 为 left 或 right，会出现参差不齐的情况，非常不美观，因此需要重写 getTabWidth 返回自定义的宽度：

// 记录下原始的计算函数
var rawGetTabWidth = tabLayout.getTabWidth;
comboBox.addPropertyChangeListener(function (e) {
    if (e.property === 'value') {
        var tabPosition = e.newValue;
        if (tabPosition === 'left' || tabPosition === 'right') {
            // 所有的标签页固定宽度，值为 100
            tabLayout.getTabWidth = function() {
                return 100;
            }
        }
        else {
            // 恢复原始自动计算的方式
            tabLayout.getTabWidth = rawGetTabWidth;
        }
        tabLayout.setTabPosition(e.newValue);
    }
});

tabPosition 为 left-vertical 或 right-vertical 时，文字会自动旋转，我们可以通过重写一些函数实现文字自动换行效果：

标签风格

标签背景默认使用 ht.ui.drawable.TabBackgroundDrawable 渲染，可以手动创建此 Drawable 实例以改变默认的效果(边框宽度、颜色等)：

// TabBackgroundDrawable 构造函数参数请参考其 API 文档
tabLayout.setTabBackgroundDrawable(new ht.ui.drawable.TabBackgroundDrawable(1, '#46ba07', 'white'));

也可以创建自己的 Drawable 完全自定义绘制效果：

这个例子中自定义了 CustomTabBackgroundDrawable 作为标签背景，绘制的内容也很简单，在每个标签的左右两侧各绘制一条竖线，在顶部绘制一条横线：

// draw left border
g.beginPath();
g.rect(x, y, 1, height);
g.fillStyle = borderColor;
g.fill();

// draw right border
g.beginPath();
g.rect(x + width - 1, y, 1, height);
g.fillStyle = borderColor;
g.fill();

// draw top border
g.beginPath();
g.rect(x, y, width, 2);
g.fillStyle = topBorderColor;
g.fill();