Center a view inside of an UITableViewCell? Looks centered in the UI hierarchy, but not in the actual app? - swift

Question

I'm trying to center a custom UIView in a UITableViewCell. Something fairly basic imo. I used this code to create the UIView, I found it here on stackoverflow:
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()
}
}
Then I just added a view to my cell xib, centered horizontally, leading edge +15, top +15 and bottom +15 (with priority 900 so that autolayout doesn't freak out about the height being 320 instead of its calculated value of 320.1). This way it is centered in the xib preview.
When running the app it looks like this, as you can see there is a gap on the left side, but not on the right side, so its not centered:
But then when I take a look at the UI hierarchy, it is centered?!

Answer 1

Remove centered horizontally contraint and add trailing constraint to 15 will resolve your issue
its good enough on my side

Answer 2

Nevermind, I found the problem. The UIView was placed correctly, however the gradientLayer I placed overtop was getting a wrong size. So I added the line
gradientLayer.frame = self.bounds
in the layoutSubviews function inside the skeleton UIView class.