使用Storyboard基于内部内容的UIScrollView的contentView的高度

时间:2016-07-20 15:47:27

标签: ios objective-c uiscrollview xcode-storyboard

我实际上在使用故事板约束UIScrollView完全响应时遇到了困难。

这是我的层次结构:

> - UIViewController
>  - UIView
>   - UIScrollView
>    - contentView
>     - module1View
>     - module2View
>     - module3View

所有模块都用于显示图表。 我希望他们能够做出回应。我希望它们的宽度为屏幕的100%,并且它们的高度由使用约束添加的比率定义。模块彼此相邻显示,就像新闻源中的新闻一样。

我的问题是:如何将contentView高度设置为等于所有模块的总和(模块1 + 2 + 3)?

换句话说,我想实现:

  
      
  • content of TopView =模块1的顶部
  •   
  • 模块2的顶部=模块1的底部
  •   
  • 模块2的顶部=模块2的底部
  •   
  • contentView的底部=模块3的底部
  •   

为了做到这一点,我按照在互联网上找到的一些教程。以下是我遵循的步骤:

  1. 设置UIScrollView约束以定义其地点和位置
  2. UIScrollView 顶部底部左侧右侧间距设置为最近邻居 0 即可。
  3. 在模块之间设置约束以将它们“堆叠”在一个上 其他
  4. (我在这里封锁)contentView的底部设置为 模块3的底部允许UIScrollview滚动直到结束 内容。
  5. 我试图强制UIScrollView的高度:它有效,但没有响应。由于模块的高度是通过比率计算的,取决于设备,更改时的高度“模块1 + 2 + 3”。

    我尝试将模块3中的约束添加到contentView,以设置模块3的底部= contentView的底部。所有约束都变成红色,并且随处可见警告。

    您是否知道如何根据自适应内容设置contentView的高度? (就像“在某种程度上包装内容”。)

    先谢谢你的帮助!

5 个答案:

答案 0 :(得分:42)

我已经能够通过故事板完成动态滚动视图,无需代码,具有以下步骤:

1)在故事板中,添加滚动视图并将其边缘约束到主视图的边缘或以任何适当的方式

2)在滚动视图中,添加一个普通的旧UIView作为容器。将其约束到滚动视图的所有4个边缘,但是相对于滚动视图添加等宽约束,并且向滚动视图添加相等高度约束

3)非常重要:为等高度约束设置低优先级,例如250。

4)在步骤2中添加的容器视图中,添加3个模块。将第一个模块的上边缘约束到容器视图的顶部,将最后一个模块的下边缘约束到容器视图的底部,并将所有中间模块约束到链中的前一个模块。这应该会在容器视图中为您提供完整的垂直约束链。您还需要为每个模块添加任何适当的x定位/宽度设置约束。

5)构建并运行!您的滚动视图内容大小应自动等于所有模块的总高度加上它们之间的间距,并且动态更改模块内容将通过自动布局更新滚动视图内容大小,而不是要求显式代码来计算和更新。

答案 1 :(得分:0)

尝试定义模块运行时的高度,并以编程方式为模块添加自动布局约束。

 #define kDeviceHeight                   [UIScreen mainScreen].bounds.size.height
 #define kDeviceWidth                    [UIScreen mainScreen].bounds.size.width

    - (void)viewDidLoad {

        [super viewDidLoad];
        [self setScrollViewHeight];

    }

    -(void)setScrollViewHeight{

        float module1_Height,module2_Height,module3_Height;// Calculate the height of modules over here and assign it to respective variables
        float viewVerticalSpacing = 5; // Provides space between two views
        float YAxis = 0;
        module1View.frame = CGRectMake(0, 0, kDeviceWidth, module1_Height);

        YAxis = YAxis + module1_Height + viewVerticalSpacing;
        module2View.frame = CGRectMake(0, YAxis, kDeviceWidth, module2_Height);

        YAxis = YAxis + module2_Height + viewVerticalSpacing;
        module3View.frame = CGRectMake(0, YAxis, kDeviceWidth, module3_Height);

        float scrollView_height = YAxis + module3_Height + viewVerticalSpacing;
        scroll_view.contentSize = CGSizeMake(kDeviceWidth, scrollView_height);
        scroll_view.frame = CGRectMake(0, 0, kDeviceWidth, kDeviceHeight);
    }

答案 2 :(得分:0)

对我而言,丹尼尔的解决方案非常有帮助但却无法正常工作。 以下是更新的步骤:

1)在故事板中,添加滚动视图并将其边缘约束到主视图的边缘或以任何适当的方式

2)在滚动视图中,添加一个普通的旧UIView作为容器。将它约束到滚动视图的所有4个边缘,但也相对于滚动视图的(最高视图)添加相等的宽度约束,并且向滚动视图添加相等的高度约束&#39 ; s 父级

3)非常重要:为等高度约束设置低优先级,例如250。

答案 3 :(得分:0)

我没有将内容视图的高度设置为任何高度来工作。

答案 4 :(得分:0)

对我来说,推荐的解决方案不起作用。我不得不稍微修改一下:

  1. 执行推荐解决方案中的所有步骤。
  2. 将 ScrollView 高度设置为 0 并为其设置低优先级。
  3. 将 scrollView 的父级的底部空间约束设置为低优先级。

我认为我的解决方案只有在滚动视图的父视图不是根内容视图时才有效。