在滚动视图中使用 2 个垂直堆栈视图,根据内部视图增加高度

use 2 vertical stackviews within scrollview that increase height according to inner views

我正在尝试创建一个屏幕,其中包含一个包含各种视图的滚动视图以及两个使用自动布局和约束的垂直堆栈视图,同时以编程方式向两个堆栈视图添加项目。 问题是我不能让两个堆栈视图都和它们中的视图一样大。 如果我不向堆栈视图添加任何高度限制,检查员会给我一个警告,并且并非所有视图都显示在屏幕中。 如果我向堆栈视图添加足够的高度,对于高度太大的情况,我会在屏幕上看到空白。 如何使堆栈视图的高度与屏幕上的项目匹配,同时确保显示屏幕上的所有其他视图?

我添加了 2 个屏幕截图,第一个屏幕看起来不错时两个堆栈中都有少量项目,第二个屏幕上两个堆栈中都有很多项目,你可以看到我描述的结果

我还在下面的 link 中的屏幕截图中添加了生成结果的代码

sample project

谢谢

情侣选项...

1) 不要给堆栈视图高度限制,并忽略 Storyboard / IB error/warning(它只是告诉你布局还没有完成 - 它无法知道你是否会满足限制在 运行 时间)。

2) 将堆栈视图高度限制设置为 0,并将高度限制的优先级设置为 250 - 这将允许自动布局在需要时增加高度。

3) 给堆栈视图高度限制,但将它们设置为 Placeholders:

这将满足情节提要,但不会影响 运行 时的高度。


编辑

在评论、截图并查看您的项目后,问题是您的约束不太正确,导致滚动视图的 content 没有一直滚动。

一些可能有帮助的注意事项:

1) 给每个元素一个唯一的名字...更容易思考

"linkTextView as a subview of containerSubView, which is a subview of mainSubView, which is a subview of mainContentView"

相对于

"view as a subview of view, which is a subview of view, which is a subview of view"

2) 在开发过程中,为您的视图提供对比鲜明的背景颜色...使在 运行 时更容易看到布局框架。

下面是如何限制布局的屏幕截图:

这是输出,滚动到底部(我在 "item100" 之后添加了一个标签,其中包含视图背景颜色的键):

并且,这是故事板的来源(只需右键单击故事板文件,select Open As -> Source Code,然后将全部内容替换为以下内容):

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15510"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="swiftTraining2" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="haV-jN-E91">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="13w-Sm-aLB" userLabel="Main Content View">
                                        <rect key="frame" x="0.0" y="10" width="414" height="818"/>
                                        <subviews>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Lk9-K2-0eH" userLabel="Top Stack View">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="200"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="200" placeholder="YES" id="aop-qh-b8I"/>
                                                </constraints>
                                            </stackView>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7od-Vy-8zM" userLabel="Main SubView">
                                                <rect key="frame" x="5" y="205" width="404" height="608"/>
                                                <subviews>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hw6-MO-6K5" userLabel="Stack Link Container View">
                                                        <rect key="frame" x="5" y="5" width="394" height="598"/>
                                                        <subviews>
                                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="uku-Xj-j12">
                                                                <rect key="frame" x="5" y="5" width="384" height="563"/>
                                                            </stackView>
                                                            <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" text="Link" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="bct-cc-3xh">
                                                                <rect key="frame" x="5" y="573" width="384" height="20"/>
                                                                <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                                                <constraints>
                                                                    <constraint firstAttribute="height" constant="20" id="uB8-jy-STI"/>
                                                                </constraints>
                                                                <color key="textColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
                                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                                <textInputTraits key="textInputTraits" autocapitalizationType="sentences" textContentType="url"/>
                                                            </textView>
                                                        </subviews>
                                                        <color key="backgroundColor" systemColor="systemYellowColor" red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstItem="uku-Xj-j12" firstAttribute="top" secondItem="hw6-MO-6K5" secondAttribute="top" constant="5" id="9LG-gX-H3R"/>
                                                            <constraint firstItem="uku-Xj-j12" firstAttribute="leading" secondItem="hw6-MO-6K5" secondAttribute="leading" constant="5" id="K42-bH-xHE"/>
                                                            <constraint firstAttribute="trailing" secondItem="uku-Xj-j12" secondAttribute="trailing" constant="5" id="Lap-sB-h8E"/>
                                                            <constraint firstItem="bct-cc-3xh" firstAttribute="top" secondItem="uku-Xj-j12" secondAttribute="bottom" constant="5" id="PdU-Pu-n8y"/>
                                                            <constraint firstItem="bct-cc-3xh" firstAttribute="leading" secondItem="hw6-MO-6K5" secondAttribute="leading" constant="5" id="Xm4-fL-hzr"/>
                                                            <constraint firstAttribute="trailing" secondItem="bct-cc-3xh" secondAttribute="trailing" constant="5" id="hF9-TI-LZN"/>
                                                            <constraint firstAttribute="bottom" secondItem="bct-cc-3xh" secondAttribute="bottom" constant="5" id="kXT-Wg-s1z"/>
                                                        </constraints>
                                                    </view>
                                                </subviews>
                                                <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="trailing" secondItem="hw6-MO-6K5" secondAttribute="trailing" constant="5" id="JG5-Fh-2k6"/>
                                                    <constraint firstItem="hw6-MO-6K5" firstAttribute="leading" secondItem="7od-Vy-8zM" secondAttribute="leading" constant="5" id="ibg-UH-XTf"/>
                                                    <constraint firstItem="hw6-MO-6K5" firstAttribute="top" secondItem="7od-Vy-8zM" secondAttribute="top" constant="5" id="kuH-dl-gXT"/>
                                                    <constraint firstAttribute="bottom" secondItem="hw6-MO-6K5" secondAttribute="bottom" constant="5" id="qHo-jD-cgV"/>
                                                </constraints>
                                            </view>
                                        </subviews>
                                        <color key="backgroundColor" systemColor="systemTealColor" red="0.35294117650000001" green="0.7843137255" blue="0.98039215690000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstItem="Lk9-K2-0eH" firstAttribute="top" secondItem="13w-Sm-aLB" secondAttribute="top" id="1A1-Yr-m3q"/>
                                            <constraint firstAttribute="trailing" secondItem="7od-Vy-8zM" secondAttribute="trailing" constant="5" id="5rm-XQ-2qJ"/>
                                            <constraint firstItem="Lk9-K2-0eH" firstAttribute="leading" secondItem="13w-Sm-aLB" secondAttribute="leading" id="FGH-Z3-RpE"/>
                                            <constraint firstAttribute="trailing" secondItem="Lk9-K2-0eH" secondAttribute="trailing" id="I6d-e1-OKc"/>
                                            <constraint firstAttribute="bottom" secondItem="7od-Vy-8zM" secondAttribute="bottom" constant="5" id="WXH-MT-LYJ"/>
                                            <constraint firstItem="7od-Vy-8zM" firstAttribute="leading" secondItem="13w-Sm-aLB" secondAttribute="leading" constant="5" id="r68-3o-LzV"/>
                                            <constraint firstItem="7od-Vy-8zM" firstAttribute="top" secondItem="Lk9-K2-0eH" secondAttribute="bottom" constant="5" id="x4w-xp-OAQ"/>
                                        </constraints>
                                    </view>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemRedColor" red="1" green="0.23137254900000001" blue="0.18823529410000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="bottom" secondItem="13w-Sm-aLB" secondAttribute="bottom" constant="10" id="3uZ-9Q-Syi"/>
                                    <constraint firstAttribute="trailing" secondItem="13w-Sm-aLB" secondAttribute="trailing" constant="-10" id="7cN-wV-qLW"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="width" secondItem="haV-jN-E91" secondAttribute="width" id="EEs-NO-GjV"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="leading" secondItem="haV-jN-E91" secondAttribute="leading" id="hwr-sh-sz8"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="top" secondItem="haV-jN-E91" secondAttribute="top" constant="10" id="stQ-Nw-f8o"/>
                                    <constraint firstItem="13w-Sm-aLB" firstAttribute="height" secondItem="haV-jN-E91" secondAttribute="height" priority="250" id="xq5-Ng-LZM"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="2gK-OB-LB9"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="3NE-oL-tLQ"/>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                        <constraints>
                            <constraint firstItem="haV-jN-E91" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="BuP-KW-1bP"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="haV-jN-E91" secondAttribute="trailing" id="gFi-Mo-tEp"/>
                            <constraint firstItem="haV-jN-E91" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="tDm-TP-XSG"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="haV-jN-E91" secondAttribute="bottom" id="vd7-z3-iwb"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <connections>
                        <outlet property="linkTextView" destination="bct-cc-3xh" id="Gq2-NM-Hcn"/>
                        <outlet property="stack2" destination="uku-Xj-j12" id="Jkh-gK-WNx"/>
                        <outlet property="stackView" destination="Lk9-K2-0eH" id="AXb-Za-4To"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="131.8840579710145" y="123.88392857142857"/>
        </scene>
    </scenes>
</document>

编辑 2

这个 Storyboard 源提供了相同的布局,但没有使用 "containing" 视图。如您所见,控制器有一个滚动视图,它只包含两个堆栈视图和一个文本视图。没有 "containing" 次观看:

故事板来源:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="swiftTraining2" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="haV-jN-E91">
                                <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Lk9-K2-0eH" userLabel="Top Stack View">
                                        <rect key="frame" x="0.0" y="8" width="375" height="200"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="200" placeholder="YES" id="aop-qh-b8I"/>
                                        </constraints>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="uku-Xj-j12">
                                        <rect key="frame" x="15" y="220" width="345" height="200"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="200" placeholder="YES" id="l5I-jk-CSZ"/>
                                        </constraints>
                                    </stackView>
                                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" text="Link" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="bct-cc-3xh">
                                        <rect key="frame" x="15" y="428" width="345" height="20"/>
                                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="20" id="uB8-jy-STI"/>
                                        </constraints>
                                        <color key="textColor" systemColor="labelColor" cocoaTouchSystemColor="darkTextColor"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences" textContentType="url"/>
                                    </textView>
                                </subviews>
                                <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="bct-cc-3xh" firstAttribute="top" secondItem="uku-Xj-j12" secondAttribute="bottom" constant="8" id="9m5-Vv-236"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" id="DTb-E5-Cu5"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="trailing" secondItem="2gK-OB-LB9" secondAttribute="trailing" id="O7S-Wk-bj0"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="trailing" secondItem="bct-cc-3xh" secondAttribute="trailing" constant="15" id="Pmk-yq-TQ8"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="bottom" secondItem="bct-cc-3xh" secondAttribute="bottom" constant="8" id="RdG-fP-fRO"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="width" secondItem="3NE-oL-tLQ" secondAttribute="width" id="YRg-O2-9uu"/>
                                    <constraint firstItem="bct-cc-3xh" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" constant="15" id="Z1N-f5-SSG"/>
                                    <constraint firstItem="2gK-OB-LB9" firstAttribute="trailing" secondItem="uku-Xj-j12" secondAttribute="trailing" constant="15" id="emJ-tp-a8p"/>
                                    <constraint firstItem="Lk9-K2-0eH" firstAttribute="top" secondItem="2gK-OB-LB9" secondAttribute="top" constant="8" id="hjJ-5I-6rv"/>
                                    <constraint firstItem="uku-Xj-j12" firstAttribute="top" secondItem="Lk9-K2-0eH" secondAttribute="bottom" constant="12" id="pEG-bG-p79"/>
                                    <constraint firstItem="uku-Xj-j12" firstAttribute="leading" secondItem="2gK-OB-LB9" secondAttribute="leading" constant="15" id="tuG-9C-4K1"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="2gK-OB-LB9"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="3NE-oL-tLQ"/>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                        <constraints>
                            <constraint firstItem="haV-jN-E91" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="BuP-KW-1bP"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="haV-jN-E91" secondAttribute="trailing" id="gFi-Mo-tEp"/>
                            <constraint firstItem="haV-jN-E91" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="tDm-TP-XSG"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="haV-jN-E91" secondAttribute="bottom" id="vd7-z3-iwb"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <connections>
                        <outlet property="linkTextView" destination="bct-cc-3xh" id="Gq2-NM-Hcn"/>
                        <outlet property="stack2" destination="uku-Xj-j12" id="Jkh-gK-WNx"/>
                        <outlet property="stackView" destination="Lk9-K2-0eH" id="AXb-Za-4To"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="131.8840579710145" y="123.88392857142857"/>
        </scene>
    </scenes>
</document>

结果,直接来自您的示例项目: