美文网首页无题iOS学习输入法开发
在Xamarin.iOS中使用Masonry进行自动布局

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

作者: 临岁之寒 | 来源:发表于2016-11-16 15:40 被阅读435次

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

    相关文章

      网友评论

      • LeeCen:您好!请问,第一张图片是什么软件?
        LeeCen:@临岁之寒 Xamarin在集成第三方开源库超级麻烦,要死要死的感觉
        临岁之寒:@Lee_Cen 是点击Add Package之后的界面

      本文标题:在Xamarin.iOS中使用Masonry进行自动布局

      本文链接:https://www.haomeiwen.com/subject/splrpttx.html