当我第一次看见苹果官方提供的自动布局的接口时,我吐了,比我预想的要繁琐好多,于是我立即寻找替代方案。像这种看起来就不像是人用的东西,肯定会有人想办法进行改进的,问题只在于解决方案做出来了没有。果不其然,我很快发现了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