如何在另一个视图内约束UIImageView？

Question

I have a universal iOS swift project in xcode, and am having trouble getting the sizes of a UIImageView right. The XIB structure is as follows:

View |-- Card (View) |-- CoverImage (UIImageView)

View is loaded into a UIScrollView by ViewController.swift . Card has top, bottom, trailing, and leading constraints set up so that there is a 20px 'margin' around it. Card also has rounded corners. CoverImage has similar constraints, with top, trailing, and leading being set to superview and bottom being defined in viewDidLoad() as 40% of the height of Card . The problem is that the width of CoverImage exceeds the width of Card , with the excess not being displayed. As a result, when I try to round the top corners of CoverImage , only the Top Left corner is rounded.

Setting leadingConstraint.constant or trailingConstraint.constant to 0 seems to have no effect, as the top right corner still remains unrounded.

How can I set CoverImage 's constraints properly so that it has the correct size? Is it an issue with the constraints I'm setting in the XIB, or is there a better way to define the size of a child view?

For reference, this is the controller swift file for the View containing Card and CoverImage :

class CardViewController: UIViewController {

// MARK: Connect All Subviews/Objects
@IBOutlet weak var card: UIView!
@IBOutlet weak var coverImage: UIImageView!
@IBOutlet weak var bottomConstraint: NSLayoutConstraint!
@IBOutlet weak var topConstraint: NSLayoutConstraint!
@IBOutlet weak var trailingConstraint: NSLayoutConstraint!
@IBOutlet weak var leadingConstraint: NSLayoutConstraint!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    // MARK: Draw Card
    card.layer.cornerRadius = 2
    card.layer.shadowRadius = 3
    card.layer.shadowOpacity = 0.15;
    card.layer.shadowOffset = CGSizeMake(1, 1)
    card.backgroundColor = UIColor.whiteColor()

    // MARK: Draw Cover Image
    let imageViewShape : CAShapeLayer = CAShapeLayer()
    imageViewShape.bounds = coverImage.frame
    imageViewShape.position = coverImage.center
    imageViewShape.path = UIBezierPath(roundedRect: coverImage.bounds, byRoundingCorners: [UIRectCorner.TopRight, UIRectCorner.TopLeft], cornerRadii: CGSize(width: 2, height: 2)).CGPath
    coverImage.layer.mask = imageViewShape
    bottomConstraint.constant = card.frame.height * 0.4

}
}

Thanks to anyone who can help!

Answer 1

First of all, if you try to set the bounds of CAShapeLayer on viewDidLoad you'll get incorrect dimensions as for the superview isn't rendered on the device at the moment yet; it should be created on viewDidAppear .

Now that we have the correct frame we have to position it properly in superview and by default the mask we append does inherit the constraints of the view it's applied to, thus we have to adjust the origin point of it by 20 pixels on both axis.

The code I used to make it all look fine as you requested it to:

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(true)

    let imageViewShape : CAShapeLayer = CAShapeLayer()
    imageViewShape.frame = coverImage.frame
    imageViewShape.bounds = CGRect(origin: CGPoint(x: coverImage.bounds.origin.x + 20, y: coverImage.bounds.origin.y + 20), size: coverImage.bounds.size)
    imageViewShape.path = UIBezierPath(roundedRect: coverImage.bounds, byRoundingCorners: [UIRectCorner.TopRight, UIRectCorner.TopLeft, UIRectCorner.BottomLeft, UIRectCorner.BottomRight], cornerRadii: CGSize(width: 10, height: 10)).CGPath
    coverImage.layer.mask = imageViewShape

}