如果兩個元素並排放置在 swift 中，如何管理底部空間？

Question

我有一個視圖，在這個視圖中我拍了一張 label 的圖像和一個按鈕。 每當文本增長時，我想要的東西也會增加具有恆定底部空間的視圖的大小。 但是我沒有為圖像指定底部約束，因為當我為圖像和按鈕設置底部約束時，label 不會增長。 無論 label 上有一個單詞還是 100 個單詞，我只希望從底部開始留出 20 個空間。

Answer 1

您將要添加幾個底部約束...

給 imageView 一個greater-than-or-equal-to 20的底部約束，以及一個equal to 20且優先級為250的底部約束。

這將告訴視圖與圖像視圖的底部保持 20 分的距離，但它會允許該空間變得更大。

還要給按鈕一個greater-than-or-equal-to 20的底部約束。

以下是布局的外觀：

而且，當 label 中有更多文本時，它會自動增長為如下所示：

---

編輯

這是 storyboard 的來源：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="qlo-K9-3eT">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="DhH-lE-V2N">
            <objects>
                <viewController id="qlo-K9-3eT" customClass="ViewController" customModule="DrawingTutorial" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="AyW-lR-Dj3">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="PhX-2t-cf7">
                                <rect key="frame" x="0.0" y="0.0" width="375" height="160"/>
                                <subviews>
                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="house" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="WVu-O3-UfA">
                                        <rect key="frame" x="20" y="20" width="120" height="120"/>
                                        <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" secondItem="WVu-O3-UfA" secondAttribute="height" multiplier="1:1" id="aL0-It-LjB"/>
                                            <constraint firstAttribute="width" constant="120" id="v7R-9q-5iq"/>
                                        </constraints>
                                    </imageView>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Only one line." textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Pf-5V-aRf" userLabel="TheLabel">
                                        <rect key="frame" x="160" y="20" width="195" height="20.5"/>
                                        <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="6Ht-9F-AUh">
                                        <rect key="frame" x="160" y="56.5" width="195" height="30"/>
                                        <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="30" id="bpJ-5f-Urq"/>
                                        </constraints>
                                        <state key="normal" title="Button"/>
                                        <connections>
                                            <action selector="btnTap:" destination="qlo-K9-3eT" eventType="touchUpInside" id="s0R-gv-MaY"/>
                                        </connections>
                                    </button>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                <constraints>
                                    <constraint firstAttribute="trailing" secondItem="6Ht-9F-AUh" secondAttribute="trailing" constant="20" id="9lj-p7-J3m"/>
                                    <constraint firstItem="WVu-O3-UfA" firstAttribute="top" secondItem="PhX-2t-cf7" secondAttribute="top" constant="20" id="JVP-by-SpH"/>
                                    <constraint firstAttribute="trailing" secondItem="1Pf-5V-aRf" secondAttribute="trailing" constant="20" id="MOr-Nr-iPs"/>
                                    <constraint firstItem="WVu-O3-UfA" firstAttribute="leading" secondItem="PhX-2t-cf7" secondAttribute="leading" constant="20" id="TFi-Pn-YcZ"/>
                                    <constraint firstAttribute="bottom" secondItem="WVu-O3-UfA" secondAttribute="bottom" priority="250" constant="20" id="U7V-8K-Abr"/>
                                    <constraint firstItem="6Ht-9F-AUh" firstAttribute="top" secondItem="1Pf-5V-aRf" secondAttribute="bottom" constant="16" id="dE9-jk-5aH"/>
                                    <constraint firstItem="6Ht-9F-AUh" firstAttribute="leading" secondItem="WVu-O3-UfA" secondAttribute="trailing" constant="20" id="nvb-OM-7Up"/>
                                    <constraint firstItem="1Pf-5V-aRf" firstAttribute="top" secondItem="PhX-2t-cf7" secondAttribute="top" constant="20" id="qTv-o1-Hkn"/>
                                    <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="6Ht-9F-AUh" secondAttribute="bottom" constant="20" id="vYt-R2-Dh5"/>
                                    <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="WVu-O3-UfA" secondAttribute="bottom" constant="20" id="vkk-mK-j9e"/>
                                    <constraint firstItem="1Pf-5V-aRf" firstAttribute="leading" secondItem="WVu-O3-UfA" secondAttribute="trailing" constant="20" id="xrt-lW-Sdm"/>
                                </constraints>
                            </view>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="FTF-nk-iFB">
                                <rect key="frame" x="0.0" y="160" width="375" height="128"/>
                                <color key="backgroundColor" systemColor="systemYellowColor"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="128" id="wwZ-tH-MCz"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="AZw-Nk-iVO"/>
                        <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="FTF-nk-iFB" firstAttribute="leading" secondItem="AZw-Nk-iVO" secondAttribute="leading" id="FuT-Ei-Gwn"/>
                            <constraint firstItem="AZw-Nk-iVO" firstAttribute="trailing" secondItem="FTF-nk-iFB" secondAttribute="trailing" id="RLa-gS-t8x"/>
                            <constraint firstItem="PhX-2t-cf7" firstAttribute="top" secondItem="AZw-Nk-iVO" secondAttribute="top" id="gJH-43-8w8"/>
                            <constraint firstItem="FTF-nk-iFB" firstAttribute="top" secondItem="PhX-2t-cf7" secondAttribute="bottom" id="hoJ-BN-V2Y"/>
                            <constraint firstItem="AZw-Nk-iVO" firstAttribute="trailing" secondItem="PhX-2t-cf7" secondAttribute="trailing" id="q09-lS-o78"/>
                            <constraint firstItem="PhX-2t-cf7" firstAttribute="leading" secondItem="AZw-Nk-iVO" secondAttribute="leading" id="wAz-9g-bxE"/>
                        </constraints>
                    </view>
                    <connections>
                        <outlet property="theLabel" destination="1Pf-5V-aRf" id="JeO-bi-Fbc"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="mdE-ey-IGH" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="306.39999999999998" y="69.715142428785612"/>
        </scene>
    </scenes>
    <resources>
        <image name="house" catalog="system" width="128" height="106"/>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemYellowColor">
            <color red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>

和樣品 controller。 這將在每次點擊按鈕時更改 label 中的文本，顯示自動布局設置：

class ViewController: UIViewController {
    
    @IBOutlet var theLabel: UILabel!
    
    let sampleText: [String] = [
        "One Line",
        "This is a longer line of text.",
        "This is enough text that the label will need to wrap onto multiple lines. It will demonstrate how auto-layout is setup for this view.",
        "Line 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9",
    ]
    
    var idx: Int = 0
    
    @IBAction func btnTap(_ sender: Any) {
        idx += 1
        theLabel.text = sampleText[idx % sampleText.count]
    }
    
}

Answer 2

給 imageView 一個大於或等於 20 的底部約束，以及一個等於 20 的底部約束，並將優先級設置為 250。

這將告訴視圖與圖像視圖底部保持 20 磅的距離，但它會允許該空間變大。

還為按鈕提供大於或等於 20 的底部約束。因此，如果 Label 文本增加，則 TableViewCell 的高度也會增加。