点9

点9

一、概念

使用.9.png图可以保证在图片拉伸时不会失真和变形。

其中：上、左2个方向的黑边是图片的拉伸区域。

二、实现

• 方法

ImageView提供setNineImage方法来实现加载.9图。目前仅支持加载本地.9图片

注意：
Android中.9 是Label的方法，可以实现.9图控制文本内容的区域。
ArgoUI中是ImageView的方法，因此无法实现.9图控制文本内容的区域，需自行设置Label的padding等。

• 步骤

下面我们来完成一个.9的实用场景-聊天气泡。ui效果如下图：

1. 编写布局：ImageView设置聊天气泡.9图。Label设置聊天本文内容，并设置绝对定位使其浮在气泡之上。

HStack()
    .subs(
        ImageView().ID(img)
        .setNineImage(System.Android() and "chat_qp" or "chat_qp.9.png")
        ,
        Label()
        .positionType(PositionType.ABSOLUTE)
        .padding(40, 30, 20, 30)
    )

2. 设置ImageView气泡的尺寸跟随Label尺寸。

（1）StyleString提供calculateSize方法计算Label设置不同文本时的实际尺寸。
（2）步骤(1)计算出Label尺寸后，根据需求设置ImageView尺寸即可。

model(mData)

msgLabel(item) {
    HStack()
    .subs(
        ImageView().ID(img)
        .setNineImage(System.Android() and "chat_qp" or "chat_qp.9.png")
        ,
        Label()
        .lines(0)
        .positionType(PositionType.ABSOLUTE)
        .padding(40, 30, 20, 30)
        .bind(function()
            styleStr = StyleString(item)
            size = styleStr.calculateSize(200)

            w = size.width() + self.paddingLeft() + self.paddingRight() + 30
            h = size.height() + self.paddingTop() + self.paddingBottom() + 30

            self.width(w).height(h).styleText(styleStr)

            img.width(w).height(h)
        end)
    )
}
---
--- UI
ui {
    --- layout views
    List()
    .bindData(mData.str)
    .bindCell(function(item)
        return msgLabel(item)
    end)
}

---
--- preview
local function preview()
    mData.str = {
        "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
        ,
        "哈哈哈"
        ,
        "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
    }
end