Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Anthia Tillbury
Anthia Tillbury
3,388 Points

Coding a view to respect border proportions

I am new to the IDE and am having difficulty understanding how to keep proportions for visual UI items. I can set the leader and trailer measurements in the IDE, but when it comes to re-positioning in code, I can't move it?

import UIKit


class ViewController: UIViewController {



 //   @IBOutlet weak var imgURL2: UIImageView!

    @IBOutlet weak var FunFactLabel: UILabel!
    let factProvider = FactProvider()

    @IBOutlet weak var button: UIButton!

    //A random fact is immediately loaded when first stared
    override func viewDidLoad() {
        super.viewDidLoad()
        FunFactLabel.text = factProvider.randomFact()

        button.center.x = self.view.frame.height
//        button.center = CGPoint(x: 100, y: 100)

        UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 20, initialSpringVelocity: 15, options: UIViewAnimationOptions.curveEaseIn, animations: ({

                    self.button.center.x = self.view.frame.height * 2
            //self.button.center = CGPoint(x: 100 + 100, y: 100)


            }), completion: nil)



//    override func didReceiveMemoryWarning() {
//        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    //on button press the code will link to the model that contains the data
    //and guided by an instance of the method will return random data
    @IBAction func showFact() {

        FunFactLabel.text = factProvider.randomFact()

//        FunFactLabel.center.y = self.view.frame.height
//        FunFactLabel.center.x = self.view.frame.height


        UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 20, initialSpringVelocity: 15, options: UIViewAnimationOptions.curveEaseIn, animations: {

            self.FunFactLabel.center.y = self.view.frame.height * 2
            //self.FunFactLabel.center = CGPoint(x: 10, y: 10 + 10)

        }, completion: nil)


    }
}

I took the example of a quotation app (triggered by a button) and wanted to animate the quoted text with SpringWithDampening, but I am unsure how to code UI elements where I want them. I tried CGPoint but thought the self.view.frame.height option would respect resolutions better, else text can get chopped off?

What is the best way to position UIView elements please, I can't seem to find the info I am looking for in the Apple documentation, any links?

Thanks!

1 Answer

Hey Anthia,

If you're going to use auto-layout, you don't want to adjust views' frames manually like that.

If you're creating your auto-layout constraints on a storyboard/nib, the easiest way to control the constants for those constraints is to create @IBOutlets for them. You'd create these outlets using the same process you'd use for any other object in a storyboar/nib: control-drag into the appropriate source file.

Once you have an outlet setup for a given constraint, you'll want to first adjust the constraint's constant value to whatever you desire and then — inside your animation block — call self.view.layoutIfNeeded().

Finally, remember that you'll only need to setup @IBOutlets for constraints that you plan on manipulating at run-time, as opposed to every single constraint you've set on a view.

Hope that helps ;)