iOS Создание атрибутивной метки, например TTTAttributedLabel, в CKLabelComponent

Question

Я могу легко использовать TTTAttributedlabel иметь URL, имя и т. д.

1) Как я могу создать что-то подобное в CKLabelComponent?

2) мне нужно использовать CKTextComponent?

[CKLabelComponent newWithLabelAttributes:{
                               .string = @"This shall be context This shall be context This shall be context This shall be context",
                               .font = [UIFont fontWithName:@"Baskerville" size:14]
                           }
                           viewAttributes:{
                               {@selector(setBackgroundColor:), [UIColor clearColor]},
                               {@selector(setUserInteractionEnabled:), @NO},
                           }
                           size:{ }]

Answer 1

Мой способ - объединить CK с TTTAttributedLabel. Во-первых, я определяю структуру, она содержит некоторую базовую информацию, которую мне нужно установить в TTTAttributedLabel,

struct ABCKAttributeLabelData {
    NSString *content;
    UIFont *normalFont;
    UIColor *normalColor;
    UIFont *linkFont;
    UIColor *linkColor;
    NSInteger numberOfLines;
};

Затем я создаю новый класс с именем ABCKAttributeLabelComponent подкласс CKComponent и реализует метод инициализации, как показано ниже:

+ (instancetype)newWithData:(ABCKAttributeLabelData)data {
ABCKAttributeLabelComponent *com =
[super newWithView:{
    [TTTAttributedLabel class],
    {
        {@selector(setText:), [data.content attributedStringWithStyle:
        @{NSForegroundColorAttributeName : data.normalColor,
                     NSFontAttributeName : data.normalFont,}]},
        {@selector(setLinkAttributes:), @{ NSForegroundColorAttributeName : data.linkColor,
                                           NSFontAttributeName : data.linkFont}},
        {@selector(setActiveLinkAttributes:), @{ NSForegroundColorAttributeName : data.linkColor,
                                                 NSFontAttributeName : data.linkFont}},
        {@selector(setNumberOfLines:), data.numberOfLines ?: 0},
        {@selector(setLineBreakMode:), NSLineBreakByTruncatingTail},
    }
} size:{}];

com.attributeString = [data.content attributedStringWithStyle:
        @{NSForegroundColorAttributeName : data.normalColor,
                     NSFontAttributeName : data.normalFont,}];
com.normalFont = data.normalFont;
com.numOfLine = data.numberOfLines ?: 0;

return com

В-третьих, рассчитать размер TTTAttributedLabel и вернуть. CK вызовет computeLayoutThatFits: метод для получения размера компонента. Так что переписать это.

- (CKComponentLayout)computeLayoutThatFits:(CKSizeRange)constrainedSize {
// self.attributeString,self.numOfLine and self.normalFont I saved as property in initialize method
CGSize computerSize = [self.attributeString sizeLabelToFitToSize:constrainedSize.max numberLines:self.numOfLine font:self.normalFont];
return {
    self,
    constrainedSize.clamp({
        CKCeilPixelValue(computerSize.width),
        CKCeilPixelValue(computerSize.height)
    }),
    {}
};

}

Все остальное - использовать ABCKAttributeLabelComponent.

это может быть не очень элегантно, но это может работать.

Answer 2

Вы могли бы сделать ваш компонент легко. Обеспечить вид, реализовать computeLayoutThatFits:, CKImageComponent является примером.

Но в ситуации с текстом. Это может быть сложно из-за размера макета. Как только вы используете TTTAttributedLabel в качестве визуализации текста, вы должны указать размер текста вручную. Это определенно не то, что вы хотите.

Как вы могли видеть, CKTextComponent, родительский элемент CKLabelComponent, реализован как подпроект ComponentKit. Он обрабатывает размер макета, рендеринг текста, кэш текстового макета. (Это реализовано с помощью TextKit.) Если вы хотите использовать TTTAttributedLabel, вы должны все обрабатывать самостоятельно с TTTAttributedLabel. Это может замедлить прокрутку, потому что CKTextComponent реализует асинхронную визуализацию, а TTTAttributedLabel - нет.

---

CKTextKitEntityAttributeName может достичь вашей цели