ios - 按单词包装 UILabel 并以编程方式扩展 UITableViewCell 高度
问题描述
我以编程方式创建布局约束以在表格单元格中排列 UI 组件。
以下是我正在实施的约束:
- 单元格的左侧部分包含
nameUIView
(完成) - 单元格的右侧部分包含
valueUIView
(完成) nameUIView
和部分的宽度valueUIView
应该相等(完成)nameUIView
高度和宽度valueUIView
应该是可用空间的 100%(完成)nameUIView
包含一个(nameUILabel
完成)- 应该使用
nameUILabel
单词换行(需要建议) nameUILabel
如果文本中的文本变得太大,则 UITableViewCell 单元格的高度应扩大(需要建议)
如何以编程方式实现该布局的换行和高度扩展?
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
NSString *reuseID = reuseIdentifier;
// The view containing the label (left, red)
UIView *nameUIView = [[UIView alloc] init];
self.nameUIView = attributeNameView;
[self.nameUIView setBackgroundColor:[UIColor redColor]];
[self.nameUIView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView addSubview:self.nameUIView];
// The label (green)
UILabel *nameUILabel = [[UILabel alloc] init];
self.nameUILabel = nameUILabel;
[self.nameUILabel setTextColor:[UIColor blackColor]];
[self.nameUILabel setBackgroundColor:[UIColor greenColor]];
[self.nameUILabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.nameUILabel setLineBreakMode:NSLineBreakByWordWrapping];
[self.nameUIView addSubview:self.nameUILabel];
// The view containing the value (right, blue)
UIView *valueUIView = [[UIView alloc] init];
self.valueUIView = valueUIView;
[self.valueUIView setBackgroundColor:[UIColor blueColor]];
[self.valueUIView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView addSubview:self.valueUIView];
NSDictionary *views = NSDictionaryOfVariableBindings(nameUIView, nameUILabel, valueUIView);
NSArray *constraints;
// The constraint to align the views horizonzally (1:1) sizing
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[nameUIView][valueUIView(==nameUIView)]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
// 100% height for name view
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
NSLayoutConstraint *constraint;
// Center name label horizontally
constraint = [NSLayoutConstraint constraintWithItem:nameUILabel
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:nameUIView
attribute:NSLayoutAttributeCenterX
multiplier:1.f constant:0.f];// Not possible via VFL
[self.contentView addConstraint:constraint];
// Center name label vertically
constraint = [NSLayoutConstraint constraintWithItem:nameUILabel
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:nameUIView
attribute:NSLayoutAttributeCenterY
multiplier:1.f constant:0.f];// Not possible via VFL
[self.contentView addConstraint:constraint];
// 100% height for value view
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[valueUIView]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
}
return self;
}
解决方案
- 按单词换行
添加这个额外的约束(将标签的宽度设置到父视图)确实启用了自动换行:
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[attributeNameLabel(==attributeNameView)]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
最后,我不得不将文本居中:
[self.attributeNameLabel setTextAlignment:NSTextAlignmentCenter];
- 根据内容扩展单元格高度
UITableView也需要设置这些属性
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight =
将包装超级视图的高度设置为它包含的标签
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView(==nameUILabel)]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
最小高度约束(可选)
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView(>=50)]|"
options: 0
metrics:nil
views:views];
[self.contentView addConstraints:constraints];
推荐阅读
- file - 文件状态信息实际存储在哪里?
- php - 需要设置自动增量和重置 id
- python - 为什么 pyperclip “找不到”,即使它已明确安装?
- imagemagick - Imagemagick c api:如何从 gif 文件中读取 png 图像帧,使用什么调用
- java - 使用来自另一个片段的按钮打开片段
- apache - JPEG 图像未通过 apache Web 服务器加载到 IE11 浏览器中
- rust - Rust 如何处理阴影变量?
- python - 选择正确的解释器时,VS Code 集成终端未启动虚拟环境
- java - 如何修复 javadoc 中的“MavenInvocationException”:修复
- c++ - 这个 C++ 结构如何从函数转移到“你的”成员