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