Masonry是一個(gè)非常好用的布局工具，如果不知道如何在Xamarin.iOS中使用Masonry，可以參考我寫的另一篇文章《在Xamarin.iOS中使用Masonry進(jìn)行自動(dòng)布局》。本文將討論如何在UIScrollView中運(yùn)用Masonry進(jìn)行布局。
本文的做法是參考自《UIScrollview與Autolayout的那點(diǎn)事》，簡單地說就是，使用單一一個(gè)containerView去占滿整個(gè)scrollView，然后把所有的子視圖都放在containerView中。
這里舉一個(gè)垂直方向滾動(dòng)的例子：
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);//關(guān)鍵點(diǎn)1；
make.Width.EqualTo(scrollView);
})；
//放置10個(gè)子視圖到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);//關(guān)鍵點(diǎn)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);//關(guān)鍵點(diǎn)3
}
});
lastview = view;
}
}
代碼實(shí)現(xiàn)的效果如下：
這段代碼有這么幾個(gè)關(guān)鍵點(diǎn)需要注意：
- 關(guān)鍵點(diǎn)1
make.Edges.EqualTo(scrollView);
make.Width.EqualTo(scrollView);
這里已經(jīng)對(duì)Edges進(jìn)行了約束，為什么還要對(duì)Width進(jìn)行約束呢？這是因?yàn)閁IScrollView是個(gè)非常特殊的view，UIScrollView與其subview之間相對(duì)位置的約束并不會(huì)直接用于frame的計(jì)算，而是轉(zhuǎn)化為對(duì)contentSize的計(jì)算。contentSize是UIScrollView可以滾動(dòng)的區(qū)域。
- 關(guān)鍵點(diǎn)2和關(guān)鍵點(diǎn)3
...
make.Top.EqualTo(container);
...
make.Bottom.EqualTo(container);
...
關(guān)鍵點(diǎn)2和關(guān)鍵點(diǎn)3其實(shí)應(yīng)該算一個(gè)點(diǎn)。此時(shí)，container的Edges已與scrollView的contentSize一致，其Width與scrollView的Width也一致，哪container的height呢？沒錯(cuò)，依靠子視圖來對(duì)其進(jìn)行約束。因此，第一個(gè)子視圖的頂部要與container的頂部有約束，最后一個(gè)子視圖的底部要與container的底部有約束。scrollView才能根據(jù)container的大小正確地計(jì)算出contentSize的大小，這一點(diǎn)是《UIScrollview與Autolayout的那點(diǎn)事》一文沒有強(qiáng)調(diào)的。
- 還有一點(diǎn)
視圖裝入的順序同樣很重要，即如果打亂上面代碼中Add(UIView)的順序，都會(huì)導(dǎo)致scrollView的顯示不正確。
對(duì)水平滾動(dòng)的處理
水平方向的滾動(dòng)設(shè)置與垂直方向大同小異。
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，則是水平滾動(dòng)。
});
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;
}
}
