xamarin - 如何在 Xamarin iOS 中使用自动布局？

Question

我正在不使用 Storyboard 或 XIB 来创建 View 。我还在项目中使用 MvvmCross 并绑定(bind)控件，如下所示:

using System;
using System.Drawing;

using CoreFoundation;
using UIKit;
using Foundation;
using Cirrious.MvvmCross.Touch.Views;
using Cirrious.MvvmCross.Binding.BindingContext;

namespace Mobile.iOS.Views
{
    /// <summary>
    ///  Home screen of iPhone
    /// </summary>
    [Register("HomeView")]
    public class HomeView : MvxViewController
    {   
        /// <summary>
        /// Method to load the view
        /// </summary>
        public override void ViewDidLoad()
        {
            View = new UIView() { BackgroundColor = UIColor.White };
            this.Title = "Home";
            base.ViewDidLoad();

            var lblHome = new UILabel(new RectangleF(80, 100, 300, 40));
            lblHome.TextColor = UIColor.Green;
            Add(lblHome);

            var btnSignIn = new UIButton(UIButtonType.RoundedRect);
            btnSignIn.SetTitle("Move to Login Screen", UIControlState.Normal);
            btnSignIn.Frame = new RectangleF(10, 200, 300, 40);
            Add(btnSignIn);

            var set = this.CreateBindingSet<HomeView, HomeViewModel>();
            set.Bind(lblHome).To(vm => vm.HomeTitle);
            set.Bind(btnSignIn).To(vm => vm.LogIn);
            set.Apply();

            // Perform any additional setup after loading the view
        }     
    }
}

我想使用自动布局来设计我的 View 。这样我的 View 在所有 iPhone 设备(4s、5、5s、6)和 View (纵向或横向)中看起来都很好且相似。

Answer 1

不确切知道您希望标签和按钮如何对尺寸变化使用react。我想出了这个:

using System;
using System.Drawing;

using CoreFoundation;
using UIKit;
using Foundation;
using Cirrious.MvvmCross.Touch.Views;
using Cirrious.MvvmCross.Binding.BindingContext;

namespace Mobile.iOS.Views
{
    /// <summary>
    ///  Home screen of iPhone
    /// </summary>
    [Register("HomeView")]
    public class HomeView : MvxViewController
    {  
        UILabel lblHome;
        UIButton btnSignIn;

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            View = new UIView() { BackgroundColor = UIColor.White};
            this.Title = "Home";
            base.ViewDidLoad();

            //          var lblHome = new UILabel( new RectangleF(80,100,300,40) );          
            lblHome = new UILabel();
            lblHome.TranslatesAutoresizingMaskIntoConstraints = false; // need this for autolayout
            lblHome.Text = "HOME LABEL";
            lblHome.TextAlignment = UITextAlignment.Center;
            lblHome.TextColor = UIColor.Green;
            lblHome.BackgroundColor = UIColor.Cyan;
            Add( lblHome );

            btnSignIn = new UIButton( UIButtonType.RoundedRect );
            btnSignIn.SetTitle( "Move to Login Screen", UIControlState.Normal );

            btnSignIn.BackgroundColor = UIColor.Magenta;
            //          btnSignIn.Frame = new RectangleF( 10, 200, 300, 40 );
            btnSignIn.TranslatesAutoresizingMaskIntoConstraints = false;  // need this for autolayout
            Add( btnSignIn );

            SetupAutoLayoutConstraints ();

            var set = this.CreateBindingSet<HomeView, HomeViewModel>();
            set.Bind( lblHome ).To( vm => vm.HomeTitle );
            set.Bind( btnSignIn ).To( vm => vm.LogIn );
            set.Apply();
        }



private void SetupAutoLayoutConstraints()
    {
        View.AddConstraints (new [] {
            // makes the width of lblHome the same width as the View and then -20 from this
            NSLayoutConstraint.Create(lblHome, NSLayoutAttribute.Width, NSLayoutRelation.Equal, View, NSLayoutAttribute.Width, 1, -20),
            // makes the height of lblHome 40
            NSLayoutConstraint.Create(lblHome, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 40),
            // makes the Top of lblHome 100 from the top of the view
            NSLayoutConstraint.Create(lblHome, NSLayoutAttribute.Top, NSLayoutRelation.Equal, View, NSLayoutAttribute.Top, 1, 100),
            // centers lblHome in View along the x-axis
            NSLayoutConstraint.Create(lblHome, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, View, NSLayoutAttribute.CenterX, 1, 0)
        });


        View.AddConstraints (new [] {
            // makes the width of btnSignIn the same width as the lblHome
            NSLayoutConstraint.Create(btnSignIn, NSLayoutAttribute.Width, NSLayoutRelation.Equal, lblHome, NSLayoutAttribute.Width, 1, 0),
            // makes the height of btnSignIn the same height as the lblHome
            NSLayoutConstraint.Create(btnSignIn, NSLayoutAttribute.Height, NSLayoutRelation.Equal, lblHome, NSLayoutAttribute.Height, 1, 0),
            // makes the Top of btnSignIn 60 from the bottom of lblHome
            NSLayoutConstraint.Create(btnSignIn, NSLayoutAttribute.Top, NSLayoutRelation.Equal, lblHome, NSLayoutAttribute.Bottom, 1, 60),
            // centers btnSignIn in View along the x-axis
            NSLayoutConstraint.Create(btnSignIn, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, View, NSLayoutAttribute.CenterX, 1, 0)
        });
    }
    }
}

使用自动布局时，您不想设置框架，而是添加 View ，然后像 SetupAutoLayoutConstraints 方法中那样设置它们的约束。

有关自动布局的有用链接:

Raywenderlich tutorial

Other Tutorial

希望这有帮助!