郑州新闻,上海网站搜索引擎优化,原墨网站建设,网页源代码和框架源代码文章目录 前言实现行高自适应实现评论展开效果解决cell中的buttom的复用问题 前言
在知乎日报的评论区中#xff0c;用到了Masonry行高自适应来实现评论的展开#xff0c;这里设计许多控件的约束问题#xff0c;当时困扰了笔者许久#xff0c;特此撰写博客记录
实现行高自… 文章目录 前言实现行高自适应实现评论展开效果解决cell中的buttom的复用问题 前言
在知乎日报的评论区中用到了Masonry行高自适应来实现评论的展开这里设计许多控件的约束问题当时困扰了笔者许久特此撰写博客记录
实现行高自适应
步骤1: 设置tableView.rowHeight UITableViewAutomaticDimension。
步骤2 设置tableView.estimatedRowHeight 100。
解释设置一个预估的行高为了代码的易读性还是尽量要设置一个跟cell的高差不多的值。
步骤3 到了此步就涉及到了我们行高自适应的核心思想根据内容长短将我们的控件撑开从而实现tableviewcell撑开
方法便是对控件设置上下约束但是不设置其高度这里需要注意我们的bottom的约束一定要与contentview的bottom有关否则无法撑开我们的contentview
我们以一段小demo为例来讲解 [_name mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(30);make.top.equalTo(30);make.height.equalTo(40);make.width.equalTo(100);}];// [_time mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.equalTo(30);
// make.height.equalTo(40);
// make.width.equalTo(100);
// make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);
// }];[_content mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(30);make.top.equalTo(self-_name.mas_bottom).offset(10);
// make.bottom.equalTo(self-_reply.mas_top).offset(-20);make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);make.right.equalTo(self.contentView.mas_right).offset(-20);}];当我们没有给_content的文本进行赋值时视图层级是这样的 同时我们的_content控件甚至没有在层级图上出现但是一旦我们对其进行赋值就会自动撑开cell的高度 cell.content.text FMDB中有三个常用的类FMDatabase 表示一个SQLite数据库用来执行SQL语句。;实现评论展开效果
现在我们已经实现用Masonry实现行高自适应接下来我们讲讲我们知乎日报评论区中评论的展开。 思路 1.首先我们可以得到回复的一段文本我们需要根据文本的长短来判断我们的评论是否需要展开也就是说我们的展开效果是否需要实现是与我们评论的长短有关的。
-(CGSize)textHeightFromTextString:(NSString *)text width:(CGFloat)textWidth fontSize:(CGFloat)size {// 计算 label 需要的宽度和高度NSDictionary *dict {NSFontAttributeName:[UIFont systemFontOfSize:size]};CGRect rect [text boundingRectWithSize:CGSizeMake(textWidth, MAXFLOAT) options:NSStringDrawingTruncatesLastVisibleLine|NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];CGSize size1 [text sizeWithAttributes:{NSFontAttributeName: [UIFont systemFontOfSize:size]}];return CGSizeMake(size1.width, rect.size.height);
}NSInteger count [self textHeightFromTextString:reply width:303.667 fontSize:15.5].height /cell.replyLabel.font.lineHeight;if (count 2) {cell.foldButton.hidden YES;} else {cell.foldButton.hidden NO;}这里需要注意我们的回复label也需要实现行高自适应的效果与content的代码结合起来便是 [_name mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(30);make.top.equalTo(30);make.height.equalTo(40);make.width.equalTo(100);}];[_time mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(30);make.height.equalTo(40);make.width.equalTo(100);make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);}];[_content mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(30);make.top.equalTo(self-_name.mas_bottom).offset(10);make.bottom.equalTo(self-_reply.mas_top).offset(-20);make.right.equalTo(self.contentView.mas_right).offset(-20);}];[_reply mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self-_content.mas_bottom).offset(20);make.bottom.equalTo(self.time.mas_top).offset(-10);make.right.equalTo(self.contentView.mas_right).offset(-20);make.left.equalTo(30);}];[_foldButton mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(140);make.height.equalTo(40);make.bottom.equalTo(self.contentView.mas_bottom).offset(-20);make.width.equalTo(100);}];这样我们的content与reply就都与我们的contentView的底部又了约束关系从而实现了行高自适应
解决cell中的buttom的复用问题
我们可以通过上面的动画看到我们的评论区确实实现了评论展开但是出现了buttom的复用问题这里笔者将一下解决方案
首先为每一个buttom设置一个tag值并且我们需要通过我们的buttom得到我们的cell
笔者使用的方法是- (nullable __kindof UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;
通过buttom的tag来确定我们的row从而定位到我们选择的cell replyTableViewCell *cell (replyTableViewCell *)[_commentTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:buttom.tag inSection:0]];
当然还有另外的办法就是通过查找父视图的方法来得到对应的cell 1.button.superView cell.contentView; 2.button.superView.superView cell; 3.button.superView.superView.superView UITableviewWrapperView; 4.button.superView.superView.superView.superView UITableView; 这样一来就实现了得到对应buttom的cell
replyTableViewCell *cell (replyTableViewCell *)[_commentTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:buttom.tag inSection:0]];
replyTableViewCell *cell (replyTableViewCell *)buttom.superview.superview;然后我们对对应的cell的reply.numberOfLines进行修改 if (cell.reply.numberOfLines 0) {NSLog(1);cell.reply.numberOfLines 2;[buttom setTitle: · 展示更多 forState:UIControlStateNormal];} else {NSLog(2);cell.reply.numberOfLines 0;[buttom setTitle: · 收起 forState:UIControlStateNormal];}最后使用[_commentTableView beginUpdates]; [_commentTableView endUpdates];这两个方式刷新我们的tabelView
注意这里必须使用[_commentTableView beginUpdates];[_commentTableView endUpdates];否则仍然会发生按钮的复用原因是
[_commentTableView reloadData]:重新加载整个表格视图的数据。 此方法会重新调用数据源和代理方法并刷新所有的行和部分。 [_commentTableView beginUpdates] 和 [_commentTableView endUpdates]:用于执行一系列的插入、删除、选择和重新加载的动画而不需要调用 reloadData。 通常与 insertRowsAtIndexPaths:withRowAnimation:、deleteRowsAtIndexPaths:withRowAnimation:、reloadRowsAtIndexPaths:withRowAnimation: 等方法一起使用。 UITableView 的 reloadData 方法会重新加载整个表格视图的数据包括所有的行和部分。这会导致表格的重绘所有的可见单元格都会被重新加载也就是会调用 cellForRowAtIndexPath: 方法获取新的单元格。 如果在 cellForRowAtIndexPath: 方法中没有正确处理单元格的重用标识符和状态就会导致按钮等子视图的状态混乱因为这些子视图的状态没有被正确更新。 而使用 beginUpdates 和 endUpdates 方法执行一系列的插入、删除、选择和重新加载的操作时系统会尽量保持现有单元格的状态而不是重新加载整个单元格。这样单元格的复用机制仍然有效减少了对整个表格的重绘从而减小了混乱的可能性。 同时使用[_commentTableView beginUpdates];[_commentTableView endUpdates];还优化了tableview的cell加载与刷新的性能开销
