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
.
3.145.173.199