iOS 的自定大小单元格和动态大小控件

Question

问题定义

我正在尝试构建一个行为类似于UILabel 的自定义控件。我应该能够将这样的控件放置在自调整大小的表格单元格中，它应该：

• 包装它的内容（就像 UILabel 和 numberOfLines=0 一样）
• 自动扩展自定尺寸的单元格高度尺寸
• 处理设备旋转
• 不需要 UITableCellView 或 ViewControll 中的任何特殊代码来实现此功能（UILabel 不需要任何特殊代码）。

研究

我做的第一件事很简单。我决定观察 UILabel 是如何工作的。我做了以下操作：

• 创建了一个包含自行调整大小的单元格的表格
• 创建了一个自定义单元格，放入 UILabel（其中有 numberOfLines=0)
• 创建约束以确保 UILabel 占据整个单元格
• 继承 UILabel 并覆盖一堆方法以查看其行为方式

我检查了以下内容

• 纵向运行（标签在多行上正确显示）并且单元格高度正确
• 旋转它。表格的宽度和高度已更新，它们也是正确的。

我观察到它表现良好。它不需要任何特殊代码，我看到了系统渲染它的（一些）调用的顺序。

部分解决方案

@Wingzero 在下面写了一个部分解决方案。它创建正确大小的单元格。

但是，他的解决方案有两个问题：

• 它使用“self.superview.bounds.size.width”。如果您的控件占据整个单元格，则可以使用此选项。但是，如果单元格中还有其他使用约束的内容，则此类代码将无法正确计算宽度。

• 它根本不处理旋转。我很确定它不会处理其他调整大小事件（有一堆不太常见的调整大小事件 - 例如状态栏在电话中变大等）。

你知道如何解决这个案例的这些问题吗？ 我发现了一堆关于构建更多静态自定义控件和在自调整单元格中使用预构建控件的文章。

但是，我还没有找到任何可以解决这两个问题的解决方案。

Answer 1

我必须使用答案部分来发表我的想法并继续前进，尽管这可能不是你的答案，因为我不完全理解是什么阻碍了你，因为我认为你已经知道内在大小，仅此而已。

基于 cmets，我尝试使用文本属性创建视图并覆盖内在：

头文件，后来发现maxPreferredWidth没有完全使用，所以忽略它：

@interface LabelView : UIView

IB_DESIGNABLE
@property (nonatomic, copy) IBInspectable NSString *text;
@property (nonatomic, assign) IBInspectable CGFloat maxPreferredWidth;

@end

.m 文件：

#import "LabelView.h"

@implementation LabelView

-(void)setText:(NSString *)text {
    if (![_text isEqualToString:text]) {
        _text = text;
        [self invalidateIntrinsicContentSize];
    }
}

-(CGSize)intrinsicContentSize {
    CGRect boundingRect = [self.text boundingRectWithSize:CGSizeMake(self.superview.bounds.size.width, CGFLOAT_MAX)
                                           options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading
                                        attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:16]}
                                           context:nil];
    return boundingRect.size;
}

@end

还有一个带有 xib 的 UITableViewCell：

头文件：

@interface LabelCell : UITableViewCell

@property (weak, nonatomic) IBOutlet LabelView *labelView;

@end

.m 文件：

@implementation LabelCell

- (void)awakeFromNib {
    [super awakeFromNib];
}

@end

xib，很简单，就是顶部、底部、前导、尾随约束：

所以运行它，根据文本的边界矩形，单元格的高度是不同的，在我的例子中，我有两个文本要循环：1.“哈哈”，2.“asdf”{重复多次以创建一个长字符串}

所以奇数单元格的高度为 19，偶数单元格的高度为 58：

这就是你要找的东西吗？

我的想法：

UITableView 的单元格的宽度总是和表格视图一样，所以这就是宽度。 UICollectionView 可能存在更多问题，但关键是我们将计算它并返回它就足够了。

演示项目：https://github.com/liuxuan30/StackOverflow-DynamicSize
（我根据我的旧项目进行了更改，其中有一些图像，忽略那些。）

Answer 2

这是一个满足您的要求的解决方案，它也是 IBDesignable，因此它可以在 Interface Builder 中实时预览。此类将布置一系列正方形（总数等于 IBInspectable count 属性）。默认情况下，它只会将它们全部排成一排。但是，如果您将wrap IBInspectable 属性设置为On，它将包裹正方形并根据其约束宽度增加其高度（如带有numberOfLines == 0 的UILabel）。在自调整大小的表格视图单元格中，这将具有推出顶部和底部以适应自定义视图的包装固有尺寸的效果。

代码：

import Foundation
import UIKit


@IBDesignable class WrappingView : UIView {

    private class InnerWrappingView : UIView {

        private var lastPoint:CGPoint = CGPointZero
        private var wrap = false
        private var count:Int = 100
        private var size:Int = 8
        private var spacing:Int = 3

        private func calculatedSize() -> CGSize {
            lastPoint = CGPoint(x:-(size + spacing), y: 0)
            for _ in 0..<count {
                var nextPoint:CGPoint!
                if wrap {
                    nextPoint = lastPoint.x + CGFloat(size + spacing + size) <= bounds.width ? CGPoint(x: lastPoint.x + CGFloat(size + spacing), y: lastPoint.y) : CGPoint(x: 0, y: lastPoint.y + CGFloat(size + spacing))
                } else {
                    nextPoint = CGPoint(x: lastPoint.x + CGFloat(size + spacing), y: lastPoint.y)
                }
                lastPoint = nextPoint
            }
            return CGSize(width: wrap ? bounds.width : lastPoint.x + CGFloat(size), height: lastPoint.y + CGFloat(size))
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            guard bounds.size != calculatedSize() || subviews.count == 0 else {
                return
            }
            for subview in subviews {
                subview.removeFromSuperview()
            }
            lastPoint = CGPoint(x:-(size + spacing), y: 0)
            for _ in 0..<count {
                let square = createSquareView()
                var nextPoint:CGPoint!
                if wrap {
                    nextPoint = lastPoint.x + CGFloat(size + spacing + size) <= bounds.width ? CGPoint(x: lastPoint.x + CGFloat(size + spacing), y: lastPoint.y) : CGPoint(x: 0, y: lastPoint.y + CGFloat(size + spacing))
                } else {
                    nextPoint = CGPoint(x: lastPoint.x + CGFloat(size + spacing), y: lastPoint.y)
                }
                square.frame = CGRect(origin: nextPoint, size: square.bounds.size)
                addSubview(square)
                lastPoint = nextPoint
            }
            let newframe = CGRect(origin: frame.origin, size: calculatedSize())
            frame = newframe
            invalidateIntrinsicContentSize()
            setNeedsLayout()
        }


        private func createSquareView() -> UIView {
            let square = UIView(frame: CGRect(x: 0, y: 0, width: size, height: size))
            square.backgroundColor = UIColor.blueColor()
            return square
        }

        override func intrinsicContentSize() -> CGSize {
            return calculatedSize()
        }
    }

    @IBInspectable var count:Int = 500 {
        didSet {
            innerView.count = count
            layoutSubviews()
        }
    }

    @IBInspectable var size:Int = 8 {
        didSet {
            innerView.size = size
            layoutSubviews()
        }
    }

    @IBInspectable var spacing:Int = 3 {
        didSet {
            innerView.spacing = spacing
            layoutSubviews()
        }
    }

    @IBInspectable var wrap:Bool = false {
        didSet {
            innerView.wrap = wrap
            layoutSubviews()
        }
    }

    private var _innerView:InnerWrappingView! {
        didSet {
            clipsToBounds = true
            addSubview(_innerView)
            _innerView.clipsToBounds = true
            _innerView.frame = bounds
            _innerView.wrap = wrap
            _innerView.translatesAutoresizingMaskIntoConstraints = false
            _innerView.leftAnchor.constraintEqualToAnchor(leftAnchor).active = true
            _innerView.rightAnchor.constraintEqualToAnchor(rightAnchor).active = true
            _innerView.topAnchor.constraintEqualToAnchor(topAnchor).active = true
            _innerView.bottomAnchor.constraintEqualToAnchor(bottomAnchor).active = true
            _innerView.setContentCompressionResistancePriority(750, forAxis: .Vertical)
            _innerView.setContentHuggingPriority(251, forAxis: .Vertical)
        }
    }

    private var innerView:InnerWrappingView! {
        if _innerView == nil {
            _innerView = InnerWrappingView()
        }
        return _innerView
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if innerView.bounds.width != bounds.width {
            innerView.frame = CGRect(origin: CGPointZero, size: CGSize(width: bounds.width, height: 0))
        }
        innerView.layoutSubviews()
        if innerView.bounds.height != bounds.height {
            invalidateIntrinsicContentSize()
            superview?.layoutIfNeeded()
        }
    }

    override func intrinsicContentSize() -> CGSize {
        return innerView.calculatedSize()
    }
}

在我的示例应用程序中，我将表格视图设置为将包含此自定义视图的每行的单元格出列，并将自定义视图的 count 属性设置为 20 * indexPath 的行。自定义视图被限制为单元格宽度的 50%，因此在横向和纵向之间移动时其宽度会自动更改。因为每个连续的表格单元格都包裹着越来越长的方格串，所以每个单元格的大小都会自动变得越来越高。

运行时是这样的（包括旋转演示）：

Answer 3

以@Wingzero 的另一个答案为基础，布局是一个复杂的问题...

提到的maxPreferredWidth 很重要，并且与UILabel 的preferredMaxLayoutWidth 相关。该属性的重点是告诉标签不要只是一条长线，而是在宽度达到该值时更愿意换行。因此，在计算内在尺寸时，您将使用 preferredMaxLayoutWidth（如果设置）或视图宽度的最小值作为最大宽度。

另一个关键方面是invalidateIntrinsicContentSize，每当发生变化并意味着需要新的布局时，视图应该调用它自己。

UILabel 不处理旋转 - 它不知道。视图控制器负责检测和处理旋转，通常是在触发新的布局运行之前使布局无效并更新视图大小。标签（和其他视图）只是用来处理生成的布局。作为旋转的一部分，您（即视图控制器）可以更改 preferredMaxLayoutWidth，例如在横向布局中允许更大的宽度是有意义的。

Answer 4

您是否正在寻找这样的东西^^？单元格具有动态高度以方便 UILabel 的内容，并且没有任何代码来计算大小/宽度/高度 - 只是一些限制。

本质上，左侧的标签具有单元格的顶部、底部和前导边距，右侧标签具有单元格的尾随边距。只需要一个标签？然后忽略右侧标签，并将左侧标签配置为单元格的尾随约束。

如果您需要多行标签，请进行配置。将 numberOfLines 设置为 2、3 或 0，由您决定。

您不需要计算表格视图单元格的高度，自动布局会为您计算；但是你需要让它知道，通过告诉它使用自动尺寸：self.tableView.rowHeight = UITableViewAutomaticDimension，或者在tableView:heightForRowAtIndexPath: 中返回它。您还可以在tableView:estimatedHeightForRowAtIndexPath: 中告诉表格视图“粗略”估计以获得更好的性能。

还是不行？将相关 UILabel 的 Content Compression Resistance Priority - Vertical 设置为 1000 / 必需，以便标签的内容会尽力“抵抗压缩”，并且 numberOfLines 配置将被完全确认。

它会旋转吗？尝试观察旋转（有方向更改通知），然后更新布局（setNeedsLayout）。

还是不行？更多阅读：Using Auto Layout in UITableView for dynamic cell layouts & variable row heights