Masonry是一个非常好用的布局工具，如果不知道如何在Xamarin.iOS中使用Masonry，可以参考我写的另一篇文章《在Xamarin.iOS中使用Masonry进行自动布局》。本文将讨论如何在UIScrollView中运用Masonry进行布局。
本文的做法是参考自《UIScrollview与Autolayout的那点事》，简单地说就是，使用单一一个containerView去占满整个scrollView，然后把所有的子视图都放在containerView中。
这里举一个垂直方向滚动的例子：
public override void ViewDidLoad() {
base.ViewDidLoad();
var scrollView = new UIScrollView();
var container = new UIView();
this.Add(scrollView);
scrollView.MakeConstraints(make =>{
make.Edges.EqualTo(this);
});
scrollView.Add(container);
container.MakeConstraints(make => {
make.Edges.EqualTo(scrollView);//关键点1；
make.Width.EqualTo(scrollView);
})；
//放置10个子视图到container
UIView lastview = null;
for (int i = 0; i < 10; i++) {
var view = new UIView();
view.BackgroundColor = UIColor.Red;
container.Add(view);
view.MakeConstraints(make => {
if (lastview == null) {
make.Top.EqualTo(container);//关键点2
} else {
make.Top.EqualTo(lastview.Bottom()).Offset(5);
}
make.Width.EqualTo(container);
make.Height.EqualTo(this.View.Height()).MultipliedBy(0.2f);
if (i == 9) {
make.Bottom.EqualTo(container);//关键点3
}
});
lastview = view;
}
}
代码实现的效果如下：
这段代码有这么几个关键点需要注意：
- 关键点1
make.Edges.EqualTo(scrollView);
make.Width.EqualTo(scrollView);
这里已经对Edges进行了约束，为什么还要对Width进行约束呢？这是因为UIScrollView是个非常特殊的view，UIScrollView与其subview之间相对位置的约束并不会直接用于frame的计算，而是转化为对contentSize的计算。contentSize是UIScrollView可以滚动的区域。
- 关键点2和关键点3
...
make.Top.EqualTo(container);
...
make.Bottom.EqualTo(container);
...
关键点2和关键点3其实应该算一个点。此时，container的Edges已与scrollView的contentSize一致，其Width与scrollView的Width也一致，哪container的height呢？没错，依靠子视图来对其进行约束。因此，第一个子视图的顶部要与container的顶部有约束，最后一个子视图的底部要与container的底部有约束。scrollView才能根据container的大小正确地计算出contentSize的大小，这一点是《UIScrollview与Autolayout的那点事》一文没有强调的。
- 还有一点
视图装入的顺序同样很重要，即如果打乱上面代码中Add(UIView)的顺序，都会导致scrollView的显示不正确。
对水平滚动的处理
水平方向的滚动设置与垂直方向大同小异。
public override void ViewDidLoad() {
base.ViewDidLoad();
var scrollView = new UIScrollView();
var container = new UIView();
this.Add(scrollView);
scrollView.MakeConstraints(make => {
make.Edges.EqualTo(this);
});
scrollView.Add(container);
container.MakeConstraints(make => {
make.Edges.EqualTo(scrollView);
make.Height.EqualTo(scrollView);//将Width改为Height，则是水平滚动。
});
UIView lastview = null;
for (int i = 0; i < 10; i++) {
var view = new UIView();
view.BackgroundColor = UIColor.Red;
container.Add(view);
view.MakeConstraints(make => {
if (lastview == null) {
make.Left.EqualTo(container);//约束左边界
} else {
make.Left.EqualTo(lastview.Right()).Offset(5);
}
make.Height.EqualTo(container);
make.Width.EqualTo(this.View.Height()).MultipliedBy(0.2f);
if (i == 9) {
make.Right.EqualTo(container);//约束右边界；
}
});
lastview = view;
}
}
