ios - UITableView 单元格内容未正确显示 - 知识问答 - OGeek|极客世界-中国程序员成长平台

菜鸟教程小白 发表于 2022-12-13 06:14:09

ios - UITableView 单元格内容未正确显示

我使用自动布局并希望显示具有自定义单元格的 <code>UITableView</code>，该单元格的 <code>UITextView</code> 具有可变内容。

单元格显示如下。对于聊天消息，第一次显示单元格时单行仅显示 2-3 个字符，并且下一个字符被强制转到下一行。但是，当我滚动 tableView 以使这些单元格不可见并向后滚动以使它们可见时(我这样做是为了当它们再次可见时 cellForRowAtIndexPath: 再次调用方法来渲染单元格)，它们会正确渲染单元格，如图所示第二张图片。

 <img src="/image/2UaHs.png" alt="enter image description here"/>
<img src="/image/sVl0A.png" alt="enter image description here"/> 

代码:

<pre><code>- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return ;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
RS_User *user = [init];
chatCell *cell = (chatCell *);
NSUInteger row = indexPath.row;
cell.chatCellBackground.image = nil;

 NSString *chatText = [ objectForKey:TEXT]; // get text string(message) from array

 cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
 UIFont *font = ;
 cell.textString.font = ; // set text font
 cell.textString.text = chatText;

 // set text
 CGSize size = ;
 cell.textString.frame = ...;
 ;

 NSDate *theDate = [ objectForKey:DATE];
 NSDateFormatter *formatter = [ init];
 ;
 NSString *timeString = ;
 cell.timeLabel.text = timeString; // set timeLabel to display date and time
 cell.timeLabel.font = ;

 cell.userLabel.text = @"Name";//[ objectForKey:NAME]; // set userLabel to display userName

 CGSize size1 = ;

 // check cell contains sender name or receiver name
 if (thisCellIsForSender)
 {
 // Set bubble for sender
 cell.chatCellBackground.image = [ stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
 cell.chatCellBackground.frame = ...;
 }
 else
 {
 // set bubble for receiver
 cell.chatCellBackground.image = [ stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
 cell.chatCellBackground.frame = ...;
 }

;
;
return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
RS_User *user = [init];
chatCell *cell = (chatCell *);
NSUInteger row = indexPath.row;
cell.chatCellBackground.image = nil;

NSString *chatText = [ objectForKey:TEXT]; // get text string(message) from array

cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
UIFont *font = ;
cell.textString.font = ; // set text font
cell.textString.text = chatText;

// set text
CGSize size = ;
cell.textString.frame = ...;
;

NSDate *theDate = [ objectForKey:DATE];
NSDateFormatter *formatter = [ init];
;
NSString *timeString = ;
cell.timeLabel.text = timeString; // set timeLabel to display date and time
cell.timeLabel.font = ;

cell.userLabel.text = [ objectForKey:NAME]; // set userLabel to display userName

;
;

CGSize size1 = ;

// check cell contains sender name or receiver name
 if (thisCellIsForSender)
 {
 // Set bubble for sender
 cell.chatCellBackground.image = [ stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
 cell.chatCellBackground.frame = ...;
 }
 else
 {
 // set bubble for receiver
 cell.chatCellBackground.image = [ stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];
 cell.chatCellBackground.frame = ...;
 }

cell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(tableView.bounds), CGRectGetHeight(cell.bounds));

;
;

return cell.bounds.size.height;
}
</code></pre>

更新:我可以从 <code>coverback</code> 的回答中解决一些问题。静止单元格布局不正确。我正在为单元格中每个 UI 对象的约束添加照片。

用户名:

 <img src="/image/taVmQ.png" alt="enter image description here"/> <img src="/image/9fj4h.png" alt="enter image description here"/> 

时间戳: 

 <img src="/image/4BiQc.png" alt="enter image description here"/> <img src="/image/q1CPp.png" alt="enter image description here"/> 

聊天消息: 

 <img src="/image/sqm9v.png" alt="enter image description here"/> <img src="/image/3KDPb.png" alt="enter image description here"/> 

气泡图:

 <img src="/image/IqY6k.png" alt="enter image description here"/> <img src="/image/Qybf0.png" alt="enter image description here"/> 

单元格布局: 

<ul>
<li><code>cellForRowAtIndexPath:</code> 中的单元格高度始终为 100，即使我从 <code>heightForRowAtIndexPath:</code> 方法返回不同的值。 Storyboard中的单元格高度为 100。</li>
<li>第三个单元格中的聊天消息被从底部剪掉。</li>
<li>时间戳和聊天消息标签有时彼此没有正确对齐，即使两者都有限制<code>与用户名标签的垂直间距</code>。</li>
<li>第三个单元格中的用户名标签消失了。</li>
</ul>

 <img src="/image/Ic9a7.png" alt="enter image description here"/> 

你发现约束有什么问题吗？你可以问我分析约束是否困难。
 <hr><h1>Best Answer-推荐答案</h1> 
 结合thandasoru和coverback的答案解决了我的问题。下面是我使用的代码。

我在自定义 <code>UITableViewCell</code> 的类中添加了以下方法。

<pre><code>- (void)layoutSubviews
{
;
CGFloat maxTextWidth = .bounds.size.width * 0.40;
self.userLabel.preferredMaxLayoutWidth = maxTextWidth;
self.chatMessage.preferredMaxLayoutWidth = maxTextWidth;
self.timeLabel.preferredMaxLayoutWidth = self.timeLabel.frame.size.width;
;
}
</code></pre>

UITableView 数据源方法:

<pre><code>- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomCell * cell = (CustomCell *);
// Set all label's text and image to ImageView
...

// Update layout
;
;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
customCell * cell = (customCell *);

NSString * userName = cell.userLabel.text;
NSString * chatText = cell.chatMessage.text;

// Get bounding rect of userName label
CGRect userNameFrame = ;

// Get bounding rect of chatMessage label
CGRect chatTextFrame = ;

// Calculate cell height from its contents
height = userNameFrame.size.height + chatTextFrame.size.height + PADDING_ABOVE_TOP_LABEL + DISTANCE_BETWEEN_TWO_LABELS + PADDING_BELOW_BOTTOM_LABEL;

return height;
</code></pre>

关于ios - UITableView 单元格内容未正确显示，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/21474157/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/21474157/
</a>

页: [1]

OGeek|极客世界-中国程序员成长平台's Archiver

ios - UITableView 单元格内容未正确显示