Can't add constraints to video programmatically

Question

I am trying to programmatically constraint a video into the center of the page. My AV controller is called avPlayerController .

I have already given its x and y values along with the width and height:

avPlayerController.view.frame = CGRect(x: 36 , y: 20, width: 343, height: 264)

So how do i center it?

I HAVE TRIED: Programmatically Add CenterX/CenterY Constraints

But, as you can guess it did not work :(

Here is my code:

 super.viewDidLoad()
        let filepath: String? = Bundle.main.path(forResource: "rockline", ofType: "mp4")
        let fileURL = URL.init(fileURLWithPath: filepath!)


        avPlayer = AVPlayer(url: fileURL)


        let avPlayerController = AVPlayerViewController()
        avPlayerController.player = avPlayer
        avPlayerController.view.frame = CGRect(x: 36 , y: 20, width: 343, height: 264)

        //  hide/show control
        avPlayerController.showsPlaybackControls = false
        // play video

        avPlayerController.player?.play()
        self.view.addSubview(avPlayerController.view)
    avPlayerController.view.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

Setting the frame is not the same as setting a constraint. The layout is actually done in viewDidLayoutSubviews — Pruthvikar, Aug 26 '17 at 18:39
It's not that you are asking many questions, you are deleting questions and re-asking them! Two hours ago you ask this, and like @Pruthvikar, I commented that you shouldn't be setting frames. I also detailed the three things to do and *you* commented back asking for code. I can do that, but will you delete this question too? — , Aug 26 '17 at 18:52

score 1 · Answer 1 · answered Aug 26 '17 at 19:36

You can try this.

avPlayerController.view.enableAutoLayoutConstraint()
avPlayerController.view.setCenterXConstraint(.equal, constantValue: 0)
avPlayerController.view.setCenterYConstraint(.equal, constantValue: 0)

extension UIView
{
    //Method to making translatesAutoresizingMaskIntoConstraints false.
    func enableAutoLayoutConstraint()
    {
        self.translatesAutoresizingMaskIntoConstraints = false
    }
    //Method to set Center-X Consttraint
    func setCenterXConstraint(_ relationType:NSLayoutRelation , constantValue:CGFloat)->NSLayoutConstraint
    {
        let constraint = NSLayoutConstraint(item: self, attribute:.centerX, relatedBy: relationType, toItem: self.superview, attribute: .centerX, multiplier: 1, constant: constantValue)
        self.superview?.addConstraint(constraint)
        return constraint
    }

    //Method to set Center-Y Consttraint
    func setCenterYConstraint(_ relationType:NSLayoutRelation , constantValue:CGFloat)->NSLayoutConstraint
    {
        let constraint = NSLayoutConstraint(item: self, attribute:.centerY, relatedBy: relationType, toItem: self.superview, attribute: .centerY, multiplier: 1, constant: constantValue)
        self.superview?.addConstraint(constraint)
        return constraint
    }

}

score 1 · Accepted Answer · answered Aug 26 '17 at 19:59

Here's the code, with explanation.

Always remember that if you are using auto layout constraints, do not set frames. The layout engine will walk all over them. If you are instantiating your view in code, don't set a frame, or if necessary, it communicates things best if you set the frame to CGRect.zero.
Understand the view life cycle. Specifically, you can set your constraints in viewDidLoad, where they should be created only once.
Remember to set the auto resizing mask to false. This is the most common error when you learning auto layout in code.
There are actually three ways to create constraints, and a few ways to activate them. In your question, I think the easiest way is to use anchors.

Here's an example of centering a view (any view) with a width of 343 and a height of 264:

let myView = UIView()    // note, I'm not setting any frame

override func viewDidLoad() {
    super.viewDidLoad()
    view.translatesAutoresizingMaskIntoConstraints = false
    myView.translatesAutoresizingMaskIntoConstraints = false
    myView.widthAnchor.constraint(equalToConstant: 343.0).isActive = true
    myView.heightAnchor.constraint(equalToConstant: 264.0).isActive = true
    myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}

That's all there is to it! BUT....

I'd suggest one more thing. Don't use constants in setting the height and width. That's not being "adaptive". Your 4 inch iPhone SE has a screen size of 568x320, where this may look centered and large enough. But on an iPhone Plus with a screen size of 736x414 it may be pretty small. (To say nothing of a 12.9 inch iPad Pro!)

Notice how my code uses the superview for the centerX/centerY anchors. (And instead of equalToConstant it's equalTo.) Do the same with the width and height. Through the use of multiplier and constant, along with UILayoutGuides, you can make your layouts adapt to whatever screen size Apple throws at you.

Can't add constraints to video programmatically

2 Answers2