每种屏幕尺寸的自动布局看起来都不同答案

【问题标题】：Autolayout looks different with each screen size每种屏幕尺寸的自动布局看起来都不同
【发布时间】：2019-05-09 16:05:47
【问题描述】：

我正在尝试创建自定义 UICollectionViewCell。我给 Cell 本身设置了屏幕本身的高度和宽度：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = UIScreen.main.bounds.width * 0.95
    let height = UIScreen.main.bounds.height * 0.5

    return CGSize(width: width, height: height)
}

所以没有固定的数字可以导致这种情况。我的自定义单元格包含 3 个 UILabel 和 3 个 UIImageviews。我将 2 个标签和 2 个图像放在一个堆栈中，另外 2 个放在一个堆栈中，然后将 2 个堆栈放在一个堆栈中。这是代码：

    func setupStacks(){
    dislikeImage.frame.size.width = likeImage.frame.width
    dislikeImage.frame.size.height = likeImage.frame.height

    let likesStackView = UIStackView(arrangedSubviews: [likeImage, numberOfLikes, dislikeImage, numberOfDislikes])
    likesStackView.axis = .horizontal
    likesStackView.distribution = .fill
    likesStackView.translatesAutoresizingMaskIntoConstraints = false

    let titleAndImageStack = UIStackView(arrangedSubviews: [postTitle, postImage])
    titleAndImageStack.axis = .vertical
    titleAndImageStack.distribution = .fill
    titleAndImageStack.spacing = 8
    titleAndImageStack.translatesAutoresizingMaskIntoConstraints = false

    let stack = UIStackView(arrangedSubviews: [titleAndImageStack, likesStackView])
    stack.axis = .vertical
    stack.distribution = .fillProportionally
    stack.translatesAutoresizingMaskIntoConstraints = false

    self.contentView.addSubview(stack)
    NSLayoutConstraint.activate([
        likesStackView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
        likesStackView.widthAnchor.constraint(lessThanOrEqualTo: self.contentView.widthAnchor, multiplier: 0.4),
        stack.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 8),
        stack.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -8),
        stack.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor),
//            stack.leftAnchor.constraint(equalTo: self.contentView.leftAnchor, constant: 1),
//            stack.rightAnchor.constraint(equalTo: self.contentView.rightAnchor, constant: -1)
            stack.leadingAnchor.constraint(equalToSystemSpacingAfter: self.contentView.leadingAnchor, multiplier: 0.98),
            stack.trailingAnchor.constraint(equalToSystemSpacingAfter: self.contentView.trailingAnchor, multiplier: -0.98)
        ])
    }

问题在于它在非 iPhone X iphone 上看起来很糟糕。例如，这是一张图片：

我试过了，但找不到问题以及为什么会发生这种情况。

编辑：为了更清楚，我希望它看起来尽可能接近 iPhone Xs 模拟器，我尝试更改 titleAndImage 堆栈的宽度、尾随和前导锚点，但没有成功。问题是，我是否将 titleAndImageStack.spacing 更改为尽可能小，标题消失但图像向两侧伸展，我该如何解决？

【问题讨论】：

不清楚是什么问题。您的哪个屏幕截图“看起来很糟糕”，以及它到底是什么“糟糕”。在我看来，它们都很好。
对不起，我不清楚，例如，问题是 iPhone 8 上的“图片”不会伸展到两侧，我尝试了拖尾和更改宽度等，但都没有奏效。 iPhone Xs 图片是我想要的样子。
好吧，我看不出您将堆栈视图的 alignment 设置为 .fill 的位置。设置它，看看是否更好。
如果您希望图片与设备一样宽（95%），那么您应该将其设置为布局约束。将单元格大小的硬编码替换为自动布局，以确保单元格大小足以容纳内容。（总而言之，问题在于您已经确定了单元格大小。相反，您需要其内容来确定其大小）
@AgRizzo 谢谢，我该怎么做？

标签： swift autolayout uicollectionviewcell

【解决方案1】：

问题在于 X 型 iPhone 的宽高比与旧款 iPhone 不同。我通过根据屏幕更改单元格大小来修复它，这不是最优雅的修复方式，但它确实有效。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let screenHeight = UIScreen.main.nativeBounds.height
    var width: CGFloat!
    var height: CGFloat!

    //iPhone X and above.
    if screenHeight > 2208{
        width = UIScreen.main.bounds.width * 0.95
        height = UIScreen.main.bounds.height * 0.5
    }
    //iPhone Xr
    else if screenHeight == 1792{
        width = UIScreen.main.bounds.width * 0.85
        height = UIScreen.main.bounds.height * 0.45
    }
    //iPhone 8+ and below
    else{
        width = UIScreen.main.bounds.width * 0.85
        height = UIScreen.main.bounds.height * 0.55
    }
    return CGSize(width: width, height: height)
}

【讨论】：