在 B 站的 up 主動(dòng)態(tài)頁(yè)面中，如果文本的動(dòng)態(tài)內(nèi)容超過(guò)四行翅敌，剩下的內(nèi)容就會(huì)被隱藏羞福，末尾會(huì)有一個(gè)展開(kāi)按鈕。
展開(kāi)文本內(nèi)容后蚯涮，內(nèi)容的末尾會(huì)有一個(gè)收起按鈕治专，可以還原到原來(lái)的狀態(tài)卖陵。
我們可以使用 YYText 框架，實(shí)現(xiàn)多行文本的展開(kāi)/收起邏輯张峰。
這是我需要展示的一段文本內(nèi)容：
Hero 9 Black 的感光器升級(jí)到 20MP泪蔫，讓它可以錄影最多 5K 30p 的視頻，并保留 4K 60p 和 2.7K 240p 的高流暢度錄影能力挟炬。\nHero 9 Black 的電池容量為 1,720mAh，比上一代提升 30%嗦哆，且在低溫環(huán)境下的性能提高谤祖。\n內(nèi)置地平線修正功能，支持 30 秒視頻預(yù)錄老速，定時(shí)拍攝粥喜、限時(shí)拍攝、實(shí)況照片多種模式橘券。還可實(shí)現(xiàn) 1080P 視頻直播额湘。
默認(rèn)情況下，假設(shè)我的頁(yè)面最多只能顯示三行文本旁舰，超出的部分截?cái)嗖伙@示锋华。我通過(guò) YYLabel 實(shí)現(xiàn)這個(gè) Label 標(biāo)簽：
首先，在當(dāng)前視圖控制器頁(yè)面中箭窜，導(dǎo)入 <YYKit> 框架毯焕，你也可以根據(jù)需要只導(dǎo)入 <YYLabel> 框架。
#import <YYKit.h>
然后將 YYLabel 聲明為當(dāng)前視圖控制器下的屬性：
@interface TestViewController ()
@property (nonatomic, strong) YYLabel *textLabel;
@end
創(chuàng)建并添加 YYLabel 到當(dāng)前頁(yè)面中：
- (void)addYYLabel {
self.textLabel = [[YYLabel alloc] init];
NSString *string = @"Hero 9 Black 的感光器升級(jí)到 20MP磺樱，讓它可以錄影最多 5K 30p 的視頻纳猫，并保留 4K 60p 和 2.7K 240p 的高流暢度錄影能力。\nHero 9 Black 的電池容量為 1,720mAh竹捉，比上一代提升 30%芜辕，且在低溫環(huán)境下的性能提高。\n內(nèi)置地平線修正功能块差，支持 30 秒視頻預(yù)錄侵续，定時(shí)拍攝、限時(shí)拍攝憨闰、實(shí)況照片多種模式询兴。還可實(shí)現(xiàn) 1080P 視頻直播。";
self.textLabel.text = string;
self.textLabel.font = [UIFont systemFontOfSize:17.0f];
self.textLabel.textColor = [UIColor blackColor];
self.textLabel.numberOfLines = 0;
self.textLabel.textVerticalAlignment = YYTextVerticalAlignmentTop;
self.textLabel.frame = CGRectMake(0, 0, kScreenWidth - 20, 63);
self.textLabel.center = self.view.center;
[self.view addSubview:self.textLabel];
}
接下來(lái)就是起趾，...展開(kāi) 按鈕的實(shí)現(xiàn)诗舰。首先，...展開(kāi) 也是一個(gè) YYLabel训裆，我們把這個(gè) YYLabel 設(shè)置為整個(gè)標(biāo)簽的的truncationToken 截?cái)喾?/strong>即可眶根。
YYLabel 有一個(gè) truncationToken 屬性蜀铲，如果不設(shè)置，就是默認(rèn)的 ...属百。
@property (nullable, nonatomic, copy) NSAttributedString *truncationToken;
...展開(kāi) 標(biāo)簽的實(shí)現(xiàn)如下：
// MARK: 創(chuàng)建一個(gè)有展開(kāi)/收起按鈕的 YYLabel
- (void)addYYLabel {
// 創(chuàng)建并添加 YYLabel ...
// 創(chuàng)建屬性字符串"...展開(kāi)"
NSMutableAttributedString *expandString = [[NSMutableAttributedString alloc] initWithString:@"...展開(kāi)"];
expandString.font = self.textLabel.font;
NSRange highlightRange = [expandString.string rangeOfString:@"展開(kāi)"];
[expandString setColor:[UIColor colorWithRed:0.000 green:0.449 blue:1.000 alpha:1.000]
range:highlightRange];
// 創(chuàng)建一個(gè)“高亮”屬性
YYTextHighlight *highlight = [YYTextHighlight new];
[highlight setFont:self.textLabel.font];
[highlight setColor:[UIColor colorWithRed:0.578 green:0.790 blue:1.000 alpha:1.000]];
// !!!: 點(diǎn)擊「展開(kāi)」按鈕记劝，執(zhí)行的動(dòng)作
highlight.tapAction = ^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
// TODO: 點(diǎn)擊展開(kāi)按鈕后，完整顯示所有內(nèi)容
[self.textLabel sizeToFit];
};
[expandString setTextHighlight:highlight range:highlightRange];
// 將屬性字符串設(shè)置到 YYLabel 中
YYLabel *expandLabel = [[YYLabel alloc] init];
expandLabel.attributedText = expandString;
[expandLabel sizeToFit];
// 將此帶高亮屬性的 YYLabel 設(shè)置為整個(gè) YYLabel 的截?cái)喾? NSAttributedString *truncationToken = [NSAttributedString attachmentStringWithContent:expandLabel contentMode:UIViewContentModeCenter attachmentSize:expandLabel.size alignToFont:expandString.font alignment:YYTextVerticalAlignmentCenter];
self.textLabel.truncationToken = truncationToken;
}
...展開(kāi) 字符串是一個(gè) NSMutableAttributedString 類(lèi)型的屬性字符串族扰，我在上面附著了點(diǎn)擊高亮效果厌丑、支持點(diǎn)擊執(zhí)行 Block 代碼。
然后渔呵，通過(guò)該屬性字符串重新創(chuàng)建一個(gè)新的 YYLabel 實(shí)例對(duì)象怒竿。
最后，將該 YYLabel 實(shí)例對(duì)象設(shè)置為整個(gè) YYLabel的截?cái)喾┣猓?dāng)文本字符串無(wú)法完整顯示所有內(nèi)容時(shí)耕驰，它就會(huì)自動(dòng)顯示...展開(kāi)`。
接下來(lái)录豺，我們繼續(xù)實(shí)現(xiàn)顯示完整內(nèi)容時(shí)的“收起”功能朦肘。
“收起” 功能其實(shí)很簡(jiǎn)單，當(dāng)完全顯示所有內(nèi)容時(shí)双饥，就是在整個(gè)文本末尾 appendAttributedString: 一個(gè)內(nèi)容為“收起”的屬性字符串媒抠。
設(shè)置文本內(nèi)容為“收起”的屬性字符串：
// 創(chuàng)建屬性字符串“收起”
NSMutableAttributedString *collapseString = [[NSMutableAttributedString alloc] initWithString:@"收起"];
collapseString.font = self.textLabel.font;
collapseString.color = [UIColor colorWithRed:0.000 green:0.449 blue:1.000 alpha:1.000];
// 創(chuàng)建一個(gè)“高亮屬性”
YYTextHighlight *highlight = [YYTextHighlight new];
[highlight setFont:self.textLabel.font];
[highlight setColor:[UIColor colorWithRed:0.578 green:0.790 blue:1.000 alpha:1.000]];
// !!!: 點(diǎn)擊「收起」按鈕，執(zhí)行的動(dòng)作
__weak __typeof(self)weakSelf = self;
highlight.tapAction = ^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
__strong __typeof(weakSelf)strongSelf = weakSelf;
// 點(diǎn)擊“收起”文本后咏花，重新設(shè)置 YYLabel 的尺寸
strongSelf.textLabel.frame = CGRectMake(0, 0, kScreenWidth - 20, 63);
strongSelf.textLabel.center = self.view.center;
// 別忘了领舰，重設(shè)整個(gè)文本字符串
};
[collapseString setTextHighlight:highlight range:collapseString.rangeOfAll];
源碼見(jiàn) GitHub 源碼
