iOS 设计具有可定制内容的 UITableViewCell

Posted

技术标签:

【中文标题】iOS 设计具有可定制内容的 UITableViewCell【英文标题】:iOS designing UITableViewCell with customizable content 【发布时间】:2015-09-05 04:52:01 【问题描述】:

我这几天一直在摆弄这个问题,但我似乎无法正确解决。

我正在尝试构建一个类似于以下模型的 UITableView:

外部布局:UITableViewCell 红色布局:带有单个 UIView 的独立 .xib UIView 蓝色布局:内部布局。如第二个单元格中所述,其中几个应该能够存在于单个 Red 布局中,彼此重叠。

据我所知,这是在 UI 上进行布局的最佳方式。但是,无论我尝试什么,我似乎都无法获得单元格的高度(对于 GetHeightForRow 方法)。

加载和添加视图不是问题,问题在于加载它们之后,用数据填充不同的 UI 元素,并获取它们的大小。

我尝试过使用 SizeToFit,但它似乎影响的唯一元素是 UILabels。即使当 UILabel 的框架更改为 300 高度并且我在包含标签的 UI 上调用 SizeToFit 时,它(UIView)仍然保持在 320x100。这意味着当它被渲染时,它看起来完全不对。

我试图计算高度的方式与https://***.com/a/18746930/2520789 接受的答案中的第 4 点非常相似。也就是说,在内存中创建一个单元格,并用每一行的数据填充它,然后获取该单元格的高度。

【问题讨论】:

几个问题:首先你需要支持ios 8及以下还是你需要支持iOS 8及以上?其次,您是在做基于 XIB/Storboard 的 View Contollers 还是所有代码?第三,您是否在视图定义中使用自动布局? 首先:支持iOS8以下会很好,但不需要。第二:我正在使用 Storyboards 来制作视图控制器。对于所有其他单独的视图,我正在制作单独的 xib。第三:据我了解,Autolayout 基本上是附加视图约束,并让视图“解析”自己的 Frame 和 Bounds。在这种情况下,是的。 首先要注意的是原型单元格没有大小类,所以如果你有特定于大小类的字体等,它们往往会布局错误。你可以通过添加 contentView 来解决这个问题单元格到表格,进行大小调整并将其删除。其次,对于 UILabel,您需要设置 preferredMaxLayoutWidth 使其以正确的宽度换行:默认情况下,任何大小类都不能以 600 结束。第三,确保 UILabel 最大行数为 0,并且我总是添加表单高度 >=(最小高度)的高度约束,以便它知道它可以在其包含的视图中垂直增长。 【参考方案1】:

使用这个

-(CGFloat) heightForText:(NSString *)text withWidth:(CGFloat) textWidth

    CGSize constraint = CGSizeMake(textWidth, 20000.0f);
    CGRect rect = [text boundingRectWithSize:constraint
                       options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
                    attributes:@NSFontAttributeName:[UIFont systemFontOfSize:14]
                       context:nil];
    CGFloat height = rect.size.height;

    height = ceilf(height);
//    NSLog(@"height %f", height);
    return height;

【讨论】:

这仅解决了调整标签大小的部分。在调整标签大小后,我还需要调整包含标签的 UIView 的大小,以便视图可以容纳标签。 @BjarkeSøgaard 只计算高度,然后视图高度 = 标签高度 + 填充 我不确定我明白你的意思......当我得到视图的高度时,它会不正确,因为标签将继续超出视图的底部。我想要做的是,在调整标签大小后,还要调整包含标签的视图的大小,以适应新框架的标签。 @BjarkeSøgaard:是的,首先计算所有标签的高度,如果它在表格视图中,那么你需要实现 heightForRowAtIndexPath: 目前,如果我对包含标签的视图执行“SizeToFit”,即使标签更改为 320x328 之类的大小,视图仍将保持相同的大小 (320x100)。当我真的需要它变成 320x428 之类的东西时。将包含标签和其他控件的任何内容,包括它们可能具有的任何约束。【参考方案2】:

嗯。您可以通过以下方法实现所需的布局

    使用 VFL(视觉格式语言)编程向每个单元格添加一个 ContentHolderview 并 ping ContentHolderView 的所有侧面到单元格 ContentView。

    现在您可以通过 VFL 将所有内容堆叠在其他程序之上。

3.在heightForRowIndex委托方法中,如果每个xib元素的高度是固定的,则返回值(这将是所有xib高度的总和,并且必须在配置每个单元格时计算)

    如果每个 xib 的高度是动态的,则计算

在配置单元格时,通过以下方法获得每个项目的高度。

GSize 约束 = CGSizeMake(200, 20000.0f); CGRect rect = [Celltext boundingRectWithSize:constraint 选项:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) 属性:@NSFontAttributeName:[UIFont systemFontOfSize:14] 上下文:无]; CGFloat height = rect.size.height;

您需要通过对每个子视图应用相同的逻辑来找到每个单元格的总高度。

【讨论】:

【参考方案3】:

正如我在您的评论中读到的,您不需要支持低于 iOS 8.0 的版本,您不需要手动指定行高。你可以这样做,当你使用 AutoLayout 时,它会自动调整你的布局高度。

this.TableView.EstimatedRowHeight = 600;
this.TableView.RowHeight = UITableView.AutomaticDimension;

红色的xib里面是蓝色的布局吗?我以前从不使用 xib,但要使用自动布局,您需要在单元格中定义底部和顶部边距

【讨论】:

以上是关于iOS 设计具有可定制内容的 UITableViewCell的主要内容,如果未能解决你的问题,请参考以下文章

浅析CSV----内有代码,,去掉定制化的内容,可直接使用

具有可更新订阅的 iOS 内容块扩展

具有本地存储、可同步、可搜索的只读内容的移动应用程序。石榴石?

RBPlayer 教程:iOS 高度可定制的播放器

黑莓用户界面设计 - 可定制的用户界面?

了解Swift中最流行的iOS设计模式