UDN-企业互联网技术人气社区

板块导航

浏览  : 1175
回复  : 0

[干货] 砌体布局单元格高度适应的一种方案(实现类似朋友圈简...

[复制链接]
呵呵燕的头像 楼主
发表于 2016-9-24 19:11:57 | 显示全部楼层 |阅读模式
  前言:我模仿的是微博的布局所以也就没有评论动态刷新细胞。

  什么人群适合看?

  好奇砌体使用的,听过没用过,没有深入的接触过的可以看。

  为什么要写?

  很多文章都是这个原因1备忘2给需要的人-.-

  这篇可以了解哪些?

  砌体+ HYBMasonryAutoCellHeight + TTTAttributedLabel +话题正则+表情正则+同时链接作者感谢开源

  这里图片浏览器使用的SDPhotoBrowser

  使用方便吗?

  使用很方便,不需要通过文本的宽度计算高度来自适应标签了,使用砖石在iOS10貌似没有出现因为像素点原因,而显示不完全的问题〜

i.png

  我用类似于微博界面的样式进行测试的这样最帅的头像就是我的微博啦

h.png

  我用类似于微博界面的样式进行测试的这样最帅的头像就是我的微博啦

g.png

  我用类似于微博界面的样式进行测试的这样最帅的头像就是我的微博啦

  下面进入正题代码的实现〜

  布局单元格上的子控件

  1.   // Masonry布局

  2.   // 头像

  3.   [_headerImageView mas_makeConstraints:^(MASConstraintMaker *make) {

  4.   // 进行约束设置

  5.   make.top.left.equalTo(self.contentView).with.offset(SPACE);

  6.   make.width.height.mas_equalTo(33);

  7.   }];

  8.   // 昵称

  9.   // 文本内容要显示多长

  10.   _labelName.preferredMaxLayoutWidth = SCREEN_W - 63;

  11.   _labelName.numberOfLines = 0;

  12.   [_labelName mas_makeConstraints:^(MASConstraintMaker *make) {

  13.   make.top.equalTo(self.contentView).with.offset(SPACE);

  14.   make.left.equalTo(self.headerImageView.mas_right).with.offset(SPACE);

  15.   make.right.equalTo(self.contentView).with.offset(-SPACE);

  16.   }];

  17.   // 时间

  18.   _labelTime.preferredMaxLayoutWidth = SCREEN_W - 63;

  19.   _labelTime.numberOfLines = 0;

  20.   [_labelTime mas_makeConstraints:^(MASConstraintMaker *make) {

  21.   make.top.equalTo(self.labelName.mas_bottom).with.offset(SPACE); // 空隙 为 10(SPACE)

  22.   make.left.right.equalTo(self.labelName);

  23.   }];

  24.   // 发布的内容

  25.   // 视图是多宽的 进行相应的设置

  26.   self.labelText.preferredMaxLayoutWidth = SCREEN_W - 63;

  27.   _labelText.numberOfLines = 0;

  28.   [_labelText mas_makeConstraints:^(MASConstraintMaker *make) {

  29.   make.top.equalTo(self.labelTime.mas_bottom).with.offset(SPACE);

  30.   make.left.right.mas_equalTo(self.labelTime);

  31.   }];

  32.   // 自动检测链接

  33.   _labelText.enabledTextCheckingTypes = NSTextCheckingTypeLink;

  34.   // 图片浏览器

  35.   [_photosGroup mas_makeConstraints:^(MASConstraintMaker *make) {

  36.   //

  37.   make.top.equalTo(self.labelText.mas_bottom).with.offset(SPACE);

  38.   make.left.equalTo(self.labelText);

  39.   make.width.mas_equalTo(SCREEN_W - 63);

  40.   }];
复制代码


  方法赋值赋值 - 并且更新需要更新的布局

  1.   #pragma mark - 赋值

  2.   - (void)configCellWithModel:(CommonModel *)model user:(User *)userModel

  3.   {

  4.   // 头像

  5.   [_headerImageView sd_setImageWithURL:[NSURL URLWithString:userModel.profile_image_url] placeholderImage:nil];

  6.   _labelName.text = [NSString stringWithFormat:@"%@ %@", userModel.name, @"我测试cell的高度是否准确, 我测试cell的高度是否准确"];

  7.   _labelTime.text = [NSString stringWithFormat:@"%@ %@", model.created_at, @"我测试cell的高度是否准确, 我测试cell的高度是否准确"];;

  8.   // 发布的内容

  9.   _labelText.text = model.text;

  10.   // 计算Photo的height

  11.   // 这里用到了类似朋友圈的九宫格布局所以我进行了相应的计算

  12.   CGFloat pg_Height = 0.0;

  13.   if (model.pic_urls.count > 1 && model.pic_urls.count <= 3) {

  14.   pg_Height = (SCREEN_W - 73) / 3 + 5;

  15.   }else if(model.pic_urls.count > 3 && model.pic_urls.count <= 6)

  16.   {

  17.   pg_Height = (SCREEN_W - 73) / 3 * 2 + 10;

  18.   }else if (model.pic_urls.count > 6 && model.pic_urls.count <= 9)

  19.   {

  20.   pg_Height = (SCREEN_W - 73) + 15;

  21.   }else if (model.pic_urls.count == 1)

  22.   {

  23.   // 单张图片 为 4/7

  24.   pg_Height = (SCREEN_W - 63) * 4 / 7 + 5;

  25.   }

  26.   else

  27.   {

  28.   pg_Height = 0.0;

  29.   }

  30.   // 同时九宫格进行更新约束

  31.   [_photosGroup mas_updateConstraints:^(MASConstraintMaker *make) {

  32.   make.height.mas_equalTo(pg_Height);

  33.   }];

  34.   }
复制代码


  在返回单元高度的方法中

  1.   #pragma mark - 返回 Cell的高度

  2.   - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

  3.   {

  4.   CommonModel *model = self.dataArray[indexPath.row];

  5.   User *user = self.userArray[indexPath.row];

  6.   CGFloat cellHeight = [CommonTableViewCell hyb_heightForTableView:tableView config:^(UITableViewCell *sourceCell) {

  7.   //

  8.   CommonTableViewCell *cell = (CommonTableViewCell *)sourceCell;

  9.   // 进行模型方法赋值-传进cell

  10.   [cell configCellWithModel:model user:user];

  11.   } cache:^NSDictionary *{

  12.   return @{kHYBCacheUniqueKey: [NSString stringWithFormat:@"%@", model.id],

  13.   kHYBCacheStateKey : @"",

  14.   kHYBRecalculateForStateKey : @(NO) // 标识不用重新更新

  15.   };

  16.   }];

  17.   return cellHeight;

  18.   }
复制代码


  除去以上这些你可能还好奇话题+表情+如何链接实现识别柯林斯点击的

  写一个工具类

  1.   // .h

  2.   /// 话题正则 例如 #夏天帅不帅#

  3.   + (NSRegularExpression *)regexTopic;

  4.   /// 表情正则 例如 [偷笑]

  5.   + (NSRegularExpression *)regexEmoticon;
复制代码

  1.   // .m

  2.   + (NSRegularExpression *)regexTopic {

  3.   static NSRegularExpression *regex;

  4.   static dispatch_once_t onceToken;

  5.   dispatch_once(&onceToken, ^{

  6.   regex = [NSRegularExpression regularExpressionWithPattern:@"#[^@#]+?#" options:kNilOptions error:NULL];

  7.   });

  8.   return regex;

  9.   }

  10.   + (NSRegularExpression *)regexEmoticon {

  11.   static NSRegularExpression *regex;

  12.   static dispatch_once_t onceToken;

  13.   dispatch_once(&onceToken, ^{

  14.   regex = [NSRegularExpression regularExpressionWithPattern:@"\\[[^ \\[\\]]+?\\]" options:kNilOptions error:NULL];

  15.   });

  16.   return regex;

  17.   }
复制代码


  然后在细胞中进行使用检测文字

 
  1.  // 话题检测

  2.   NSArray *results = [[XTWBStatusHelper regexTopic] matchesInString:model.text options:0 range:NSMakeRange(0, model.text.length)];

  3.   for (NSTextCheckingResult *result in results) {

  4.   // 话题范围

  5.   NSLog(@"range === %@", NSStringFromRange(result.range));

  6.   [_labelText addLinkWithTextCheckingResult:result];

  7.   }

  8.   // 表情检测

  9.   NSArray *results1 = [[XTWBStatusHelper regexEmoticon] matchesInString:model.text options:0 range:NSMakeRange(0, model.text.length)];

  10.   for (NSTextCheckingResult *result in results1) {

  11.   // 表情范围

  12.   NSLog(@"range === %@", NSStringFromRange(result.range));

  13.   [_labelText addLinkWithTextCheckingResult:result];

  14.  }
复制代码


  TTTAttributedLabel的简单使用---点击了话题和链接 - 签订协议指定代理人实现协议方法

  1.    /// 点击链接的方法

  2.   - (void)attributedLabel:(TTTAttributedLabel *)label

  3.   didSelectLinkWithURL:(NSURL *)url

  4.   {

  5.   NSLog(@"被点击的url === %@", url);

  6.   }

  7.   /// 点击长按数据

  8.   - (void)attributedLabel:(TTTAttributedLabel *)label

  9.   didSelectLinkWithDate:(NSDate *)date

  10.   {

  11.   }

  12.   /// 点击文本链接

  13.   - (void)attributedLabel:(TTTAttributedLabel *)label

  14.   didSelectLinkWithTextCheckingResult:(NSTextCheckingResult *)result

  15.   {

  16.   NSLog(@"被点击的话题 === %@", NSStringFromRange(result.range))

  17.   }

  18.   /// 长按链接的方法

  19.   - (void)attributedLabel:(TTTAttributedLabel *)label

  20.   didLongPressLinkWithURL:(NSURL *)url

  21.   atPoint:(CGPoint)point

  22.   {

  23.   NSLog(@"被长按的url === %@", url);

  24.   }

  25.   /// 可以长按的文本

  26.   - (void)attributedLabel:(TTTAttributedLabel *)label

  27.   didLongPressLinkWithTextCheckingResult:(NSTextCheckingResult *)result

  28.   atPoint:(CGPoint)point

  29.   {

  30.   NSLog(@"被长按的话题 === %@", NSStringFromRange(result.range))

  31.   }
复制代码


f.png

  检测结果打印

  总结:砌体对细胞的处理我的逻辑是这样的,对你有帮助点个喜欢/关注,如果您有更好的方案,请与我交流,谢谢〜。

  疑问:为什么简书降价不支持HTML标签

  文/夏天然后

  结束

  我的微博-点我@的英文夏天个大人了 || QQ群:498143780群进我与一起玩耍啊

  队最近还写了一些比较实用的文章比如:1。如何把自己写的库添加的CocoaPods支持2。Hexo + GitHub的建站最详细教程-程序员还是写作爱好者都可以拥有这样一个个人站3。关于推送的文

原文作者:夏天然后 来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部