如何使用AutoLayout（iOS / Xamarin.iOS）使ScrollView适合其内容？

Posted 2021-04-06

目前我正在尝试使用ios 10.0

假设我有一个带有一个子子视图的ScrollView（这是一个包含三个其他视图的视图）。架构看起来像这样：

UIView
->ScrollView
-->View Container
--->TopView
--->MiddleView
--->BottomView 

TopView和MiddleView都具有动态高度（根据内容可能更小或更大）。

我相信我已经正确设置了约束（我一直在关注本教程 - https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/）

Here is my view heirarchy

问题本身看起来像这样：BottomView被截断（或换句话说不想增长）。虽然显示了BottomView的内容 - 但它显示在View Container的边界下方。所以无法看到BottomView的所有子视图和控件（'导致滚动视图的弹跳效果发挥作用）

有什么建议或问题可能出在哪里？

答案

关于布局功能，使用Frame比较清楚，我根据你的描述写了一个样本：

using System;
using UIKit;
using CoreGraphics;

namespace LayoutSample
{
    public class MainViewController : UIViewController
    {
        private MainView mainView;

        public override void LoadView()
        {
            mainView = new MainView();
            this.View = mainView;
        }

        public override void ViewDidLoad()
        {
            //If you don't know what is this code meaning, try to comment it, then you will get what it is.
            this.AutomaticallyAdjustsScrollViewInsets = false;

            UIBarButtonItem left0 = new UIBarButtonItem("-Frame", UIBarButtonItemStyle.Done, delegate
            {
                mainView.DecreaseScrollViewFrame();
            });

            UIBarButtonItem left1 = new UIBarButtonItem("-CS", UIBarButtonItemStyle.Done, delegate
            {
                mainView.DecreaseScrollViewContentSize();
            });

            UIBarButtonItem right0 = new UIBarButtonItem("+Frame", UIBarButtonItemStyle.Done, delegate
            {
                mainView.IncreaseScrollViewFrame();
            });

            UIBarButtonItem right1 = new UIBarButtonItem("+CS", UIBarButtonItemStyle.Done, delegate
            {
                mainView.IncreaseScrollViewContentSize();
            });

            this.NavigationItem.SetLeftBarButtonItems(new UIBarButtonItem[] { left0,left1 }, true);

            this.NavigationItem.SetRightBarButtonItems(new UIBarButtonItem[] { right0, right1 }, true);

        }
    }

    class MainView : UIView
    {
        private UIScrollView scrollView;
        private UIView containerView;
        private UIView topView;
        private UIView midView;
        private UIView bottomView;

        public MainView()
        {
            scrollView = new UIScrollView();
            scrollView.BackgroundColor = UIColor.Red;
            nfloat navigationBarHeight = 64;
            scrollView.Frame = new CGRect(0, navigationBarHeight, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height - 100 - navigationBarHeight);
            scrollView.ContentSize = scrollView.Frame.Size;
            this.AddSubview(scrollView);

            containerView = new UIView();
            containerView.BackgroundColor = UIColor.Green;
            scrollView.AddSubview(containerView);

            topView = new UIView();
            topView.BackgroundColor = UIColor.Blue;
            containerView.AddSubview(topView);

            midView = new UIView();
            midView.BackgroundColor = UIColor.Purple;
            containerView.AddSubview(midView);

            bottomView = new UIView();
            bottomView.BackgroundColor = UIColor.Yellow;
            containerView.AddSubview(bottomView);
        }

        //It will also be invoked when your view's Frame is changed, and of cause you can invoke it whenever you want
        public override void LayoutSubviews()
        {
            Console.WriteLine("LayoutSubviews");

            nfloat padding = 10;

            CGRect containerFrame = new CGRect(new CGPoint(0,0),scrollView.ContentSize);
            containerFrame.X += padding;
            containerFrame.Y += padding;
            containerFrame.Width -= 2 * padding;
            containerFrame.Height -= 2 * padding;
            containerView.Frame = containerFrame;

            nfloat bottomHeight = 100;
            nfloat topHeight = 0.3f * containerView.Frame.Height;
            nfloat midHeight = containerView.Frame.Height - topHeight - bottomHeight - 4 * padding;

            nfloat containerSubviewWidth = containerView.Frame.Width - 2 * padding;
            topView.Frame = new CGRect(padding, padding, containerSubviewWidth, topHeight);
            midView.Frame = new CGRect(padding, padding + topView.Frame.Y + topView.Frame.Height, containerSubviewWidth, midHeight);
            bottomView.Frame = new CGRect(padding, padding + midView.Frame.Y + midView.Frame.Height, containerSubviewWidth, bottomHeight);
        }

        public void IncreaseScrollViewContentSize()
        {
            CGSize tmpSize = scrollView.ContentSize;
            tmpSize.Height += 100;
            scrollView.ContentSize = tmpSize;
            LayoutSubviews();
        }

        public void DecreaseScrollViewContentSize()
        {
            CGSize tmpSize = scrollView.ContentSize;
            tmpSize.Height -= 100;
            scrollView.ContentSize = tmpSize;
            LayoutSubviews();
        }

        public void IncreaseScrollViewFrame()
        {
            CGRect tmpRect = scrollView.Frame;
            tmpRect.Height += 10;
            scrollView.ContentSize = new CGSize(tmpRect.Width, tmpRect.Height);
            scrollView.Frame = tmpRect;
        }

        public void DecreaseScrollViewFrame()
        {
            CGRect tmpRect = scrollView.Frame;
            tmpRect.Height -= 10;
            scrollView.ContentSize = new CGSize(tmpRect.Width, tmpRect.Height);
            scrollView.Frame = tmpRect;
        }
    }
}

您可以更改参数以获得您想要的内容，这是我的GitHub中的完整解决方案：

lwnwowone/LayoutSample

看看你是否需要。希望它可以帮到你。

另一答案

解决了

以下是诀窍：我将ScrollView放在View中，所以现在的层次结构看起来像这样（见图）

我唯一需要做的就是弄清楚如何正确处理从MiddleView和TopView中隐藏一些视图后剩余的额外空间（将这些视图高度约束常量值设置为0是不够的......）。但这完全超出了我的问题范围:)

编辑：

对于那些想知道如何用上面描述的额外空间解决问题的人来说，这里是帮助我解决它的链接 - solution