NSLayoutContraints

Let's have a closer look at where we are initializing our UI elements. The TranslatesAutoresizingMaskIntoConstraints property is used to determine whether we are going to use NSLayoutConstraints to build our user interface. When we set it to false, it means we have to implement the layout constraints for this element.

Now we want to build the user interface using layout constraints. Let's add the following after the elements are added to mainView:

View.AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[mainView]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("mainView", mainView))); 
            View.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|[mainView]|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("mainView", mainView))); 
 
            mainView.AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|-80-[welcomeLabel]-[audioPlayerButton]-[exitButton]", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("welcomeLabel", welcomeLabel, "audioPlayerButton", audioPlayerButton, "exitButton", exitButton))); 
            mainView.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-5-[welcomeLabel]-5-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("welcomeLabel", welcomeLabel))); 
            mainView.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-5-[audioPlayerButton]-5-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("audioPlayerButton", audioPlayerButton))); 
            mainView.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-5-[exitButton]-5-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("exitButton", exitButton))); 

In the first two lines, we are adding constraints for the UIView. As the view contains only one UIView, we create two constraints for the vertical and horizontal properties of the mainView object. The vertical property is set to the following:

"V:|[mainView]|" 

This means mainView will be stretched to the entire height of the containing view, and the same applies for the horizontal property:

"H:|[mainView]|" 

The width of the mainView object will be stretched to the entire width of the containing view. These two text lines are known as VisualFormat.NSLayoutContraints, and they use text input as a visual representation, describing how views present in their parent views.

Looking at the other properties we pass into the AddConstraints function, we pass in NSLayoutFormatOption used for the view to abide by (that is, aligned left/top), then the metrics and NSDictionary, which will contain the UI elements involved in the constraint. You will notice some other constraints, such as these:

"H:|-5-[audioPlayerButton]-5-|" 

These constraints include padding around the UI element:

"H:|-[audioPlayerButton]-|" 

We can even simply place a dash character around the UI element, which will place a default padding of 8.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.173.199