前言: 我模仿的是微博的布局所以也就沒有 評論動態(tài)刷新cell.
- 什么人群適合看?
好奇Masonry使用的, 聽過沒用過, 沒有深入的接觸過的 可以看.
- 為什么要寫?
很多文章都是這個原因 1 備忘 2 給需要的人 -.-
- 這篇可以了解哪些?
Masonry + HYBMasonryAutoCellHeight + TTTAttributedLabel + 話題正則 + 表情正則 + 鏈接 同時感謝作者開源
這里圖片瀏覽器使用的 SDPhotoBrowser
- 使用方便嗎?
使用很方便, 不需要通過文本的寬度計算高度來自適應(yīng)label了, 使用Masonry 在iOS10 貌似沒有出現(xiàn)因為像素點原因, 而顯示不完全的問題~
我用類似于微博界面的樣式進行測試的 so最帥的頭像就是我的微博啦
我用類似于微博界面的樣式進行測試的 so最帥的頭像就是我的微博啦
我用類似于微博界面的樣式進行測試的 so最帥的頭像就是我的微博啦
下面進入正題代碼的實現(xiàn)~
布局cell上的子控件
// Masonry布局
// 頭像
[_headerImageView mas_makeConstraints:^(MASConstraintMaker *make) {
// 進行約束設(shè)置
make.top.left.equalTo(self.contentView).with.offset(SPACE);
make.width.height.mas_equalTo(33);
}];
// 昵稱
// 文本內(nèi)容要顯示多長
_labelName.preferredMaxLayoutWidth = SCREEN_W - 63;
_labelName.numberOfLines = 0;
[_labelName mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentView).with.offset(SPACE);
make.left.equalTo(self.headerImageView.mas_right).with.offset(SPACE);
make.right.equalTo(self.contentView).with.offset(-SPACE);
}];
// 時間
_labelTime.preferredMaxLayoutWidth = SCREEN_W - 63;
_labelTime.numberOfLines = 0;
[_labelTime mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.labelName.mas_bottom).with.offset(SPACE); // 空隙 為 10(SPACE)
make.left.right.equalTo(self.labelName);
}];
// 發(fā)布的內(nèi)容
// 視圖是多寬的 進行相應(yīng)的設(shè)置
self.labelText.preferredMaxLayoutWidth = SCREEN_W - 63;
_labelText.numberOfLines = 0;
[_labelText mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.labelTime.mas_bottom).with.offset(SPACE);
make.left.right.mas_equalTo(self.labelTime);
}];
// 自動檢測鏈接
_labelText.enabledTextCheckingTypes = NSTextCheckingTypeLink;
// 圖片瀏覽器
[_photosGroup mas_makeConstraints:^(MASConstraintMaker *make) {
//
make.top.equalTo(self.labelText.mas_bottom).with.offset(SPACE);
make.left.equalTo(self.labelText);
make.width.mas_equalTo(SCREEN_W - 63);
}];
方法賦值 賦值 - 并且更新需要更新的布局
#pragma mark - 賦值
- (void)configCellWithModel:(CommonModel *)model user:(User *)userModel
{
// 頭像
[_headerImageView sd_setImageWithURL:[NSURL URLWithString:userModel.profile_image_url] placeholderImage:nil];
_labelName.text = [NSString stringWithFormat:@"%@ %@", userModel.name, @"我測試cell的高度是否準(zhǔn)確, 我測試cell的高度是否準(zhǔn)確"];
_labelTime.text = [NSString stringWithFormat:@"%@ %@", model.created_at, @"我測試cell的高度是否準(zhǔn)確, 我測試cell的高度是否準(zhǔn)確"];;
// 發(fā)布的內(nèi)容
_labelText.text = model.text;
// 計算Photo的height
// 這里用到了類似朋友圈的九宮格布局所以我進行了相應(yīng)的計算
CGFloat pg_Height = 0.0;
if (model.pic_urls.count > 1 && model.pic_urls.count <= 3) {
pg_Height = (SCREEN_W - 73) / 3 + 5;
}else if(model.pic_urls.count > 3 && model.pic_urls.count <= 6)
{
pg_Height = (SCREEN_W - 73) / 3 * 2 + 10;
}else if (model.pic_urls.count > 6 && model.pic_urls.count <= 9)
{
pg_Height = (SCREEN_W - 73) + 15;
}else if (model.pic_urls.count == 1)
{
// 單張圖片 為 4/7
pg_Height = (SCREEN_W - 63) * 4 / 7 + 5;
}
else
{
pg_Height = 0.0;
}
// 同時九宮格進行更新約束
[_photosGroup mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(pg_Height);
}];
}
在返回cell高度的方法中
#pragma mark - 返回 Cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CommonModel *model = self.dataArray[indexPath.row];
User *user = self.userArray[indexPath.row];
CGFloat cellHeight = [CommonTableViewCell hyb_heightForTableView:tableView config:^(UITableViewCell *sourceCell) {
//
CommonTableViewCell *cell = (CommonTableViewCell *)sourceCell;
// 進行模型方法賦值-傳進cell
[cell configCellWithModel:model user:user];
} cache:^NSDictionary *{
return @{kHYBCacheUniqueKey: [NSString stringWithFormat:@"%@", model.id],
kHYBCacheStateKey : @"",
kHYBRecalculateForStateKey : @(NO) // 標(biāo)識不用重新更新
};
}];
return cellHeight;
}
除去以上這些你可能還好奇 話題+表情+鏈接如何實現(xiàn)識別可點擊的
寫一個工具類
// .h
/// 話題正則 例如 #夏天帥不帥#
+ (NSRegularExpression *)regexTopic;
/// 表情正則 例如 [偷笑]
+ (NSRegularExpression *)regexEmoticon;
// .m
+ (NSRegularExpression *)regexTopic {
static NSRegularExpression *regex;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
regex = [NSRegularExpression regularExpressionWithPattern:@"#[^@#]+?#" options:kNilOptions error:NULL];
});
return regex;
}
+ (NSRegularExpression *)regexEmoticon {
static NSRegularExpression *regex;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
regex = [NSRegularExpression regularExpressionWithPattern:@"\\[[^ \\[\\]]+?\\]" options:kNilOptions error:NULL];
});
return regex;
}
然后在cell中進行使用檢測文字
// 話題檢測
NSArray *results = [[XTWBStatusHelper regexTopic] matchesInString:model.text options:0 range:NSMakeRange(0, model.text.length)];
for (NSTextCheckingResult *result in results) {
// 話題范圍
NSLog(@"range === %@", NSStringFromRange(result.range));
[_labelText addLinkWithTextCheckingResult:result];
}
// 表情檢測
NSArray *results1 = [[XTWBStatusHelper regexEmoticon] matchesInString:model.text options:0 range:NSMakeRange(0, model.text.length)];
for (NSTextCheckingResult *result in results1) {
// 表情范圍
NSLog(@"range === %@", NSStringFromRange(result.range));
[_labelText addLinkWithTextCheckingResult:result];
}
TTTAttributedLabel的簡單使用 --- 點擊了話題和鏈接 -- 簽訂協(xié)議 指定代理人 實現(xiàn)協(xié)議方法
/// 點擊鏈接的方法
- (void)attributedLabel:(TTTAttributedLabel *)label
didSelectLinkWithURL:(NSURL *)url
{
NSLog(@"被點擊的url === %@", url);
}
/// 點擊長按數(shù)據(jù)
- (void)attributedLabel:(TTTAttributedLabel *)label
didSelectLinkWithDate:(NSDate *)date
{
}
/// 點擊文本鏈接
- (void)attributedLabel:(TTTAttributedLabel *)label
didSelectLinkWithTextCheckingResult:(NSTextCheckingResult *)result
{
NSLog(@"被點擊的話題 === %@", NSStringFromRange(result.range))
}
/// 長按鏈接的方法
- (void)attributedLabel:(TTTAttributedLabel *)label
didLongPressLinkWithURL:(NSURL *)url
atPoint:(CGPoint)point
{
NSLog(@"被長按的url === %@", url);
}
/// 可以長按的文本
- (void)attributedLabel:(TTTAttributedLabel *)label
didLongPressLinkWithTextCheckingResult:(NSTextCheckingResult *)result
atPoint:(CGPoint)point
{
NSLog(@"被長按的話題 === %@", NSStringFromRange(result.range))
}
檢測結(jié)果打印
總結(jié): Masonry對cell的處理 我的邏輯是這樣的, 對你有幫助點個喜歡/關(guān)注, 如果您有更好的方案, 請與我交流, 謝謝~.
疑問: 為什么簡書Markdown不支持html標(biāo)簽
文/ 夏天然后
