在 UITableViewCell 中居中视图？看起来以 UI 层次结构为中心，但不在实际应用程序中？

Posted 2023-03-04

【中文标题】在 UITableViewCell 中居中视图？看起来以 UI 层次结构为中心，但不在实际应用程序中？

【英文标题】：Center a view inside of an UITableViewCell? Looks centered in the UI hierarchy, but not in the actual app?

【发布时间】：2020-01-14 14:05:01

【问题描述】：

我正在尝试将自定义 UIView 置于 UITableViewCell 中。一些相当基本的imo。我用这段代码创建了 UIView，我在 *** 上找到了它：

class SkeletonView: UIView 

    var startLocations : [NSNumber] = [-1.0,-0.5, 0.0]
    var endLocations : [NSNumber] = [1.0,1.5, 2.0]

    var gradientBackgroundColor : CGColor = UIColor(white: 0.85, alpha: 1.0).cgColor
    var gradientMovingColor : CGColor = UIColor(white: 0.75, alpha: 1.0).cgColor

    var movingAnimationDuration : CFTimeInterval = 0.8
    var delayBetweenAnimationLoops : CFTimeInterval = 1.0


    lazy var gradientLayer : CAGradientLayer = 

        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.colors = [
            gradientBackgroundColor,
            gradientMovingColor,
            gradientBackgroundColor
        ]
        gradientLayer.locations = self.startLocations
        self.layer.addSublayer(gradientLayer)
        return gradientLayer
    ()


    func startAnimating()
        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = self.startLocations
        animation.toValue = self.endLocations
        animation.duration = self.movingAnimationDuration
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)


        let animationGroup = CAAnimationGroup()
        animationGroup.duration = self.movingAnimationDuration + self.delayBetweenAnimationLoops
        animationGroup.animations = [animation]
        animationGroup.repeatCount = .infinity
        self.gradientLayer.add(animationGroup, forKey: animation.keyPath)
    

    func stopAnimating() 
        self.gradientLayer.removeAllAnimations()
    

然后我只是在我的单元格 xib 中添加了一个视图，水平居中，前沿 +15，顶部 +15 和底部 +15（优先级为 900，这样自动布局就不会因为高度为 320 而不是计算出来的值为 320.1）。这样它就在 xib 预览中居中。

运行应用程序时，它看起来像这样，你可以看到左侧有一个间隙，但右侧没有，所以它没有居中：

但是当我查看 UI 层次结构时，它是居中的？！

【问题讨论】：

显示您的 xib 文件...添加约束的位置

我认为您将前导添加到边距而不是边缘

我已经添加了 xib 文件的截图。

但它没有显示您添加的约束

我需要查看约束...前导和尾随约束

【参考方案1】：

Remove centered horizontally 约束并将trailing constraint 添加到 15 将解决您的问题

对我来说足够好

【讨论】：

这应该可以。这适用于我制作的另一个单元格。添加尾随约束 15 会产生相同的结果。

你有teamviewer吗？

或者把这个样本发给我……我会看看是什么问题，或者我可以通过teamviewer连接来解决它

不，也不打算为此安装它，不过感谢您提供帮助。你不能创建一个快速项目，添加一个表格视图，添加一个单元格并使用我提供的这个 UIView 吗？

嗯，超级奇怪

【参考方案2】：

没关系，我发现了问题。 UIView 放置正确，但是我放置在顶部的 gradientLayer 的大小错误。所以我添加了这一行

gradientLayer.frame = self.bounds

在骨架 UIView 类里面的 layoutSubviews 函数中。