如何使用AutoLayout(iOS / Xamarin.iOS)使ScrollView适合其内容?

时间:2016-09-26 13:51:28

标签: ios xcode uiscrollview xamarin.ios ios-autolayout

目前我正在尝试使用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的所有子视图和控件('导致滚动视图的弹跳效果发挥作用)

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

2 个答案:

答案 0 :(得分:0)

关于布局功能,使用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

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

答案 1 :(得分:0)

<强>解决

以下诀窍: 我已将ScrollView放在View中,所以现在的层次结构看起来像这样(见图)

Updated view hierarchy

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

修改

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