如何让单个UIStackView的行高动态调整满屏?

How to make a single UIStackView's row height dynamically adjusted to fill the entire screen?

我有以下布局:

我希望 Stack View 填满整个屏幕。我希望绿色 View 在上面的行和底部视图之间表现得像 space。绿色行应该有一个最小高度(比如 20 点)并且它应该根据设备的高度调整自己的高度以填满整个屏幕。如果设备的高度较小,则布局应该是可滚动的(我使用的是 Scroll View)。

注意:底部的圆圈代表 "empty space" 左边,因为布局没有完全填满(实际上它是内容 View 的背景颜色)。内容 View 不应该可见。

"menu stack view" 具有以下属性:

  • Green View 的高度限制应为 >= 20
  • StackView 的宽度约束应等于 ScrollView 的宽度
  • StackView 的高度约束应等于 ScrollView 的高度,Priority: 750
  • StackView 应在 ScrollView 的所有 4 个边上受到限制

应该可以!


编辑:

刚刚看到您有一个 UIView 持有 StackView...

你真的不需要那个,所以你可以:

删除那个视图,让 StackView 成为滚动视图的 "root" 视图,或者

  • Green View 的高度限制应为 >= 20
  • StackView 应在 UIView
  • 的所有 4 个边上进行约束
  • UIView 的宽度约束应等于 ScrollView 的宽度
  • UIView 的高度约束应等于 ScrollView 的高度,Priority: 750

编辑 2:

如果您在 contentView / StackView 高度约束上看到带有 Priority: 250 的答案,它可以工作,但并不总是在 IB / Storyboard 中立即更新(更改“View As: device”时)。设置它 750 在 run-time 工作,并且更好地维护 Storyboard 中的布局。

这是一个故事板示例。它有两个视图 "matching" 控制器 - 一个 with a "content view" 和一个 without:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="lQ9-cT-kGJ">
    <device id="retina6_1" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Without Content View-->
        <scene sceneID="fpf-XB-SxY">
            <objects>
                <viewController id="lQ9-cT-kGJ" userLabel="Without Content View" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="fIT-Xh-wDY">
                        <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="V9k-Oj-b66">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Iia-IH-hjS">
                                        <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                        <subviews>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="KHw-zC-OPn">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99806135890000003" green="0.96808904409999996" blue="0.12760734560000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="bv0-aW-7AU"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="uGD-v3-lUW">
                                                <rect key="frame" x="0.0" y="150" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.9981210828" green="0.7443595529" blue="0.3907994628" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="E1D-ib-QRx"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Mje-14-Tbd">
                                                <rect key="frame" x="0.0" y="300" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99805814029999995" green="0.40440851449999998" blue="0.31141346689999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="fMn-Hk-F5G"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="D49-Gt-N8s">
                                                <rect key="frame" x="0.0" y="450" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99912148710000004" green="0.17214331029999999" blue="0.38572910430000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="5BE-5m-P8B"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="O9M-qj-KPE">
                                                <rect key="frame" x="0.0" y="600" width="414" height="178"/>
                                                <color key="backgroundColor" red="0.33141675590000003" green="0.98072248699999998" blue="0.40079861880000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="20" id="giA-Vz-78H"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Lhc-kd-s85">
                                                <rect key="frame" x="0.0" y="778" width="414" height="40"/>
                                                <color key="backgroundColor" red="1" green="0.2503993511" blue="0.97168940309999996" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="40" id="G0c-fN-TP7"/>
                                                </constraints>
                                            </view>
                                        </subviews>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="width" secondItem="V9k-Oj-b66" secondAttribute="width" id="36y-ht-1ZL"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="height" secondItem="V9k-Oj-b66" secondAttribute="height" priority="750" id="BAJ-IB-R4g"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="top" secondItem="V9k-Oj-b66" secondAttribute="top" id="QHY-7z-ekV"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="leading" secondItem="V9k-Oj-b66" secondAttribute="leading" id="cKH-2e-Ovg"/>
                                    <constraint firstAttribute="bottom" secondItem="Iia-IH-hjS" secondAttribute="bottom" id="cye-Ww-qAH"/>
                                    <constraint firstAttribute="trailing" secondItem="Iia-IH-hjS" secondAttribute="trailing" id="udZ-yd-vnu"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="sd1-79-0ea" firstAttribute="trailing" secondItem="V9k-Oj-b66" secondAttribute="trailing" id="WGi-oU-rbN"/>
                            <constraint firstItem="sd1-79-0ea" firstAttribute="bottom" secondItem="V9k-Oj-b66" secondAttribute="bottom" id="fnq-aB-tb0"/>
                            <constraint firstItem="V9k-Oj-b66" firstAttribute="leading" secondItem="sd1-79-0ea" secondAttribute="leading" id="g91-1x-kaM"/>
                            <constraint firstItem="V9k-Oj-b66" firstAttribute="top" secondItem="sd1-79-0ea" secondAttribute="top" id="reB-s3-Un5"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="sd1-79-0ea"/>
                    </view>
                    <navigationItem key="navigationItem" id="1y7-cc-tli"/>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="2g2-ck-IEI" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="2565" y="163"/>
        </scene>
        <!--With Content View-->
        <scene sceneID="vq1-pI-V6t">
            <objects>
                <viewController id="lR1-JQ-SAe" userLabel="With Content View" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="rsN-vT-52r">
                        <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="8Lg-op-1W1">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ygo-gK-BzW" userLabel="ContentView">
                                        <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                        <subviews>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="eZ0-N0-ecD">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                                <subviews>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Fta-Vk-7rB">
                                                        <rect key="frame" x="0.0" y="0.0" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99806135890000003" green="0.96808904409999996" blue="0.12760734560000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="qG6-fb-qL0"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="NQ2-Wg-vx6">
                                                        <rect key="frame" x="0.0" y="150" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.9981210828" green="0.7443595529" blue="0.3907994628" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="gYm-9M-VUm"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Y11-gj-s20">
                                                        <rect key="frame" x="0.0" y="300" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99805814029999995" green="0.40440851449999998" blue="0.31141346689999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="qvn-Nt-dCb"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="8iH-mi-wRX">
                                                        <rect key="frame" x="0.0" y="450" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99912148710000004" green="0.17214331029999999" blue="0.38572910430000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="ZF1-YH-sre"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="983-cl-csE">
                                                        <rect key="frame" x="0.0" y="600" width="414" height="178"/>
                                                        <color key="backgroundColor" red="0.33141675590000003" green="0.98072248699999998" blue="0.40079861880000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="20" id="LrL-s0-6aa"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Awz-rO-vcs">
                                                        <rect key="frame" x="0.0" y="778" width="414" height="40"/>
                                                        <color key="backgroundColor" red="1" green="0.2503993511" blue="0.97168940309999996" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="40" id="lCa-X5-V4P"/>
                                                        </constraints>
                                                    </view>
                                                </subviews>
                                            </stackView>
                                        </subviews>
                                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <constraints>
                                            <constraint firstAttribute="bottom" secondItem="eZ0-N0-ecD" secondAttribute="bottom" id="Mqb-fG-5zQ"/>
                                            <constraint firstAttribute="trailing" secondItem="eZ0-N0-ecD" secondAttribute="trailing" id="RBn-5m-9po"/>
                                            <constraint firstItem="eZ0-N0-ecD" firstAttribute="leading" secondItem="ygo-gK-BzW" secondAttribute="leading" id="dpF-aq-8uV"/>
                                            <constraint firstItem="eZ0-N0-ecD" firstAttribute="top" secondItem="ygo-gK-BzW" secondAttribute="top" id="uye-i9-kBk"/>
                                        </constraints>
                                    </view>
                                </subviews>
                                <color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="height" secondItem="8Lg-op-1W1" secondAttribute="height" priority="750" id="34X-Z2-gJg"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="top" secondItem="8Lg-op-1W1" secondAttribute="top" id="34X-Z4-WAK"/>
                                    <constraint firstAttribute="bottom" secondItem="ygo-gK-BzW" secondAttribute="bottom" id="Me7-yt-8gX"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="width" secondItem="8Lg-op-1W1" secondAttribute="width" id="XFS-SE-QbM"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="leading" secondItem="8Lg-op-1W1" secondAttribute="leading" id="mqg-gZ-hEy"/>
                                    <constraint firstAttribute="trailing" secondItem="ygo-gK-BzW" secondAttribute="trailing" id="us5-aT-tnP"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="8Lg-op-1W1" firstAttribute="top" secondItem="N1d-br-dMg" secondAttribute="top" id="NHA-1q-iN5"/>
                            <constraint firstItem="N1d-br-dMg" firstAttribute="trailing" secondItem="8Lg-op-1W1" secondAttribute="trailing" id="TGg-ig-3O1"/>
                            <constraint firstItem="N1d-br-dMg" firstAttribute="bottom" secondItem="8Lg-op-1W1" secondAttribute="bottom" id="da0-Ux-sH0"/>
                            <constraint firstItem="8Lg-op-1W1" firstAttribute="leading" secondItem="N1d-br-dMg" secondAttribute="leading" id="e0A-Yr-Bnq"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="N1d-br-dMg"/>
                    </view>
                    <navigationItem key="navigationItem" id="ZJ5-xB-PxK"/>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="ssf-O0-6hP" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="3361" y="163"/>
        </scene>
    </scenes>
</document>