Xamarin.iOS下的UIScrollView+Masonry

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;
            }
        }

水平滚动的效果