在Xamarin.iOS中使用Masonry进行自动布局

当我第一次看见苹果官方提供的自动布局的接口时，我吐了，比我预想的要繁琐好多，于是我立即寻找替代方案。像这种看起来就不像是人用的东西，肯定会有人想办法进行改进的，问题只在于解决方案做出来了没有。果不其然，我很快发现了Masonry，一个轻量级的布局框架，采用更优雅的链式语法封装自动布局，简洁明了，并具有高可读性，据说现在搞iOS开发的青年们都用它。不过我用的是Xamarin，在Xamarin上也可以用Masonry吗？

答案是：Yes!

点击Add Package之后，我们就可以在项目中进行Masonry了。

Masonry的使用方法在原先环境中和Xamarin基本一样，两者接口定义几乎别无二致，此处大家可以参考一下Masonry原先环境下的使用方法。但所使用的语言毕竟不同，加之Xamarin官方给出的教程也不够细致，如果此前没有接触过iOS开发，照猫画虎不免会遇到坑，这里我简单地介绍一下Masonry在Xamarin.iOS中的使用方法。

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

            var uiView = new UIView();
            uiView.BackgroundColor = UIColor.Red;
            base.View.AddSubview(uiView);

            uiView.MakeConstraints(make => {
            make.Edges.EqualTo(View).Insets(new UIEdgeInsets(20, 20, 20, 20));
            });

            /* 等价于
           uiView.MakeConstraints(make =>{
              make.Top.EqualTo(View).Offset(20);
              make.Left.EqualTo(View).Offset(20);
              make.Bottom.EqualTo(View).Offset(-20);
              make.Right.EqualTo(View).Offset(-20);
              } );
                 */
}

上面的代码所得到的界面如下：

如果想使控件的长宽与另一个控件的长宽成比例关系，可以这样写：

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


            var uiView = new UIView();
            uiView.BackgroundColor = UIColor.Red;
            base.View.AddSubview(uiView);

            uiView.MakeConstraints(make =>{
                make.Top.EqualTo(View).Offset(20);
                make.Left.EqualTo(View).Offset(20);
                make.Width.EqualTo(View).MultipliedBy(0.5f);
                make.Height.EqualTo(View).MultipliedBy(0.5f);
            });
}

可以很简单地把控件放到中心位置：

    public override void ViewDidLoad() {
            base.ViewDidLoad();
        
            var uiView = new UIView();
            uiView.BackgroundColor = UIColor.Red;
            base.View.AddSubview(uiView);

            uiView.MakeConstraints(make =>{
                make.Center.EqualTo(View);
                make.Width.EqualTo(View).MultipliedBy(0.5f);
                make.Height.EqualTo(View).MultipliedBy(0.5f);
            });
}

也可以把长度写成固定值，不过需要将数值转换成NSNumber类型(这一点官方并没有说明)：

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

            var uiView = new UIView();
            uiView.BackgroundColor = UIColor.Red;
            base.View.AddSubview(uiView);

            uiView.MakeConstraints(make =>{
                make.Center.EqualTo(View);
                make.Width.EqualTo(new NSNumber(100));
                make.Height.EqualTo(new NSNumber(100));
            });
}

关于Masonry的简单使用就介绍到这里，后面如有其它发现再来与大家分享。

链接

Xamarin/masonry