Last active
July 14, 2019 22:01
-
-
Save JoseMiralles/f72d1fa71c44f4b564385c0fcc0df246 to your computer and use it in GitHub Desktop.
Example of using autolayout programmatically in Xamarin.iOS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public partial class ViewController : UIViewController | |
{ | |
#region properties | |
// Top Views setup | |
private readonly UITextView textView = new UITextView | |
{ TranslatesAutoresizingMaskIntoConstraints = false }; | |
private readonly UIView topImageContainer = new UIView | |
{ TranslatesAutoresizingMaskIntoConstraints = false }; | |
private readonly UIImageView imageView = new UIImageView { | |
TranslatesAutoresizingMaskIntoConstraints = false, | |
Image = UIImage.FromFile("clover.png"), | |
ContentMode = UIViewContentMode.ScaleAspectFit //Mantian aspect ratio | |
}; | |
//Bottom Controls Layout Setup | |
private readonly UIButton previousButton = new UIButton(UIButtonType.System) | |
{ TranslatesAutoresizingMaskIntoConstraints = false }; | |
private readonly UIButton nextButton = new UIButton(UIButtonType.System) | |
{ TranslatesAutoresizingMaskIntoConstraints = false }; | |
private readonly UIPageControl uIPageControl = new UIPageControl() | |
{ | |
CurrentPage = 0, | |
Pages = 4, | |
CurrentPageIndicatorTintColor = UIColor.Green, | |
PageIndicatorTintColor = UIColor.LightGray | |
}; | |
private UIStackView bottomControlsStackView; | |
#endregion | |
public override void ViewDidLoad() | |
{ | |
base.ViewDidLoad(); | |
this.SetUpBottomControlls(); | |
this.SetupLayout(); | |
} | |
/// <summary> | |
/// Generates the top layout | |
/// </summary> | |
private void SetupLayout() | |
{ | |
View.AddSubview(textView); | |
View.AddSubview(topImageContainer); | |
topImageContainer.AddSubview(imageView); | |
//Add the text and the sub text. | |
NSMutableAttributedString attributedText = //NS'Mutable'AttributedString can be appended to. | |
new NSMutableAttributedString( //Constructor with multiple optional params | |
str: "Join us for some fun!", | |
font: UIFont.BoldSystemFontOfSize(18)); | |
//This attributed string gets appended to attributedText so that only one UITextView is needed. | |
NSAttributedString attribtedSubText = | |
new NSAttributedString( | |
str: "\n\n\nAre you ready for loads and loads of fun? Don't wait any longer! We hope to see you in our stroes soon.", | |
font: UIFont.SystemFontOfSize(13), | |
foregroundColor: UIColor.DarkGray); | |
attributedText.Append(attribtedSubText); //One single string now has multiple subs strings with diferent styles. | |
textView.AttributedText = attributedText; //Make sure that the string is already appended before adding it to the textview. | |
textView.TextAlignment = UITextAlignment.Center; | |
textView.Editable = false; | |
textView.ScrollEnabled = false; | |
// Make imageViewContainer occupy the top half of the screen. | |
topImageContainer.TopAnchor.ConstraintEqualTo(View.TopAnchor).Active = true; | |
topImageContainer.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor).Active = true; | |
topImageContainer.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor).Active = true; | |
topImageContainer.HeightAnchor.ConstraintEqualTo(View.HeightAnchor, 0.5f).Active = true; //Second argument acts as a percentage float multiplier. | |
// Layout imageView in realtion to the XYcenter anchors of topImageViewContainer. | |
imageView.CenterYAnchor.ConstraintEqualTo(topImageContainer.CenterYAnchor).Active = true; | |
imageView.CenterXAnchor.ConstraintEqualTo(topImageContainer.CenterXAnchor).Active = true; | |
imageView.HeightAnchor.ConstraintEqualTo(topImageContainer.HeightAnchor, 0.6f).Active = true; | |
textView.TopAnchor.ConstraintEqualTo(topImageContainer.BottomAnchor).Active = true; | |
textView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor, 24).Active = true; //Anchor with offset | |
textView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor, -24).Active = true; //Negative means to the left. | |
} | |
/// <summary> | |
/// Generates the navigation controlls at the bottom. | |
/// </summary> | |
private void SetUpBottomControlls() | |
{ | |
previousButton.SetTitle("PREV", UIControlState.Normal); | |
previousButton.TitleLabel.Font = UIFont.BoldSystemFontOfSize(14); | |
previousButton.SetTitleColor(UIColor.DarkGray, UIControlState.Normal); | |
nextButton.SetTitle("NEXT", UIControlState.Normal); | |
nextButton.TitleLabel.Font = UIFont.BoldSystemFontOfSize(14); | |
nextButton.SetTitleColor(UIColor.Green, UIControlState.Normal); | |
bottomControlsStackView = new UIStackView //Child views need to be added during assignation. | |
(views: new UIView[] { previousButton, uIPageControl, nextButton }) | |
{ | |
TranslatesAutoresizingMaskIntoConstraints = false, | |
Distribution = UIStackViewDistribution.FillEqually | |
}; | |
View.AddSubview(bottomControlsStackView); | |
//Alternative way of activating constraints. | |
NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] { | |
//Top Stack View | |
bottomControlsStackView.BottomAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.BottomAnchor),//Safe Area Bottom Anchor | |
bottomControlsStackView.LeadingAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.LeadingAnchor), | |
bottomControlsStackView.TrailingAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TrailingAnchor), | |
bottomControlsStackView.HeightAnchor.ConstraintEqualTo(50) | |
}); | |
} | |
public ViewController(IntPtr handle) : base(handle) { } | |
public override void DidReceiveMemoryWarning() | |
{ | |
base.DidReceiveMemoryWarning(); | |
// Release any cached data, images, etc that aren't in use. | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment