ios - 如何为此 View 设置约束？

Question

我有这个观点，我根本无法正确理解这些约束。我什至尝试了堆栈 View ，但仍然无法获取。请单击图像链接以查看布局。

Picture of my current view

我需要帮助在 Storyboard 中设置正确的约束，并确保它是动态的(包括将文本缩小到屏幕的正确大小)。感谢您的帮助!

Answer 1

我编辑了您的 Storyboard。我在此处粘贴了 xml。取出第一个顶部按钮宽度和高度约束的要点。然后通过代码更改动态行为。

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttonWidthConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttonHeightConstant;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //60 = gap between button and left right padding
    //140 = gap between buttons and top bottom padding
    self.buttonWidthConstraint.constant = (self.view.frame.size.width - 60)/2;
    self.buttonHeightConstant.constant = (self.view.frame.size.height - 140)/4;
    [UIView animateWithDuration:0.5 animations:^{
        [self.view layoutIfNeeded];

    }];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

---

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="8191" systemVersion="14F27" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="JGf-ti-vAF">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="YlR-y8-Jbu">
            <objects>
                <viewController id="JGf-ti-vAF" customClass="ViewController" sceneMemberID="viewController">
                    <layoutGuides>
                        <viewControllerLayoutGuide type="top" id="Abf-DD-SvM"/>
                        <viewControllerLayoutGuide type="bottom" id="j19-ef-uDb"/>
                    </layoutGuides>
                    <view key="view" contentMode="scaleToFill" id="qIt-ah-XBl">
                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="7Cn-GC-UIA">
                                <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                            </imageView>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="aHp-jP-RgJ">
                                <rect key="frame" x="226" y="45" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <constraints>
                                    <constraint firstAttribute="width" constant="148" id="emB-rW-56o"/>
                                    <constraint firstAttribute="height" constant="101" id="g0F-rb-AVX"/>
                                </constraints>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="8Rm-YT-wZ7">
                                <rect key="frame" x="20" y="166" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="T5I-DX-agA">
                                <rect key="frame" x="432" y="166" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="Its-1I-c8f">
                                <rect key="frame" x="432" y="287" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="Wxo-Rh-KVV">
                                <rect key="frame" x="20" y="408" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="UDX-S2-uRA">
                                <rect key="frame" x="432" y="408" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="t2m-9Y-3Gr">
                                <rect key="frame" x="20" y="287" width="148" height="101"/>
                                <color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
                                <fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
                                <state key="normal" title="Button one">
                                    <color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                </state>
                                <userDefinedRuntimeAttributes>
                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                        <real key="value" value="8.5"/>
                                    </userDefinedRuntimeAttribute>
                                </userDefinedRuntimeAttributes>
                            </button>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                        <constraints>
                            <constraint firstItem="Wxo-Rh-KVV" firstAttribute="leading" secondItem="t2m-9Y-3Gr" secondAttribute="leading" id="180-eR-Wwt"/>
                            <constraint firstAttribute="trailing" secondItem="7Cn-GC-UIA" secondAttribute="trailing" id="5nC-Gx-Fa1"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="width" secondItem="T5I-DX-agA" secondAttribute="width" id="BY2-aC-Yd3"/>
                            <constraint firstItem="Wxo-Rh-KVV" firstAttribute="top" secondItem="UDX-S2-uRA" secondAttribute="top" id="CuU-5v-5rN"/>
                            <constraint firstItem="UDX-S2-uRA" firstAttribute="leading" secondItem="Its-1I-c8f" secondAttribute="leading" id="DlE-Nf-3io"/>
                            <constraint firstItem="j19-ef-uDb" firstAttribute="top" secondItem="7Cn-GC-UIA" secondAttribute="bottom" id="Fbp-KG-e6q"/>
                            <constraint firstItem="7Cn-GC-UIA" firstAttribute="leading" secondItem="qIt-ah-XBl" secondAttribute="leading" id="Jr4-7g-Upm"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="centerX" secondItem="qIt-ah-XBl" secondAttribute="centerX" id="M5Z-AL-SGA"/>
                            <constraint firstItem="t2m-9Y-3Gr" firstAttribute="leading" secondItem="8Rm-YT-wZ7" secondAttribute="leading" id="NBt-0c-Fv9"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="top" secondItem="Abf-DD-SvM" secondAttribute="bottom" constant="25" id="NqB-Cg-7cN"/>
                            <constraint firstItem="t2m-9Y-3Gr" firstAttribute="top" secondItem="8Rm-YT-wZ7" secondAttribute="bottom" constant="20" id="Q76-UZ-V5H"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="height" secondItem="T5I-DX-agA" secondAttribute="height" id="T9R-Ug-Bub"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="height" secondItem="8Rm-YT-wZ7" secondAttribute="height" id="UNQ-d0-l4z"/>
                            <constraint firstItem="t2m-9Y-3Gr" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="Zer-FI-bBB"/>
                            <constraint firstItem="UDX-S2-uRA" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="c56-IW-gRF"/>
                            <constraint firstAttribute="trailing" secondItem="T5I-DX-agA" secondAttribute="trailing" constant="20" id="dXU-Gh-eXL"/>
                            <constraint firstItem="t2m-9Y-3Gr" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="e14-04-CG0"/>
                            <constraint firstItem="Wxo-Rh-KVV" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="fiF-yH-qvW"/>
                            <constraint firstItem="Wxo-Rh-KVV" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="jc3-oJ-ze2"/>
                            <constraint firstItem="UDX-S2-uRA" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="kNm-AX-HVB"/>
                            <constraint firstItem="aHp-jP-RgJ" firstAttribute="width" secondItem="8Rm-YT-wZ7" secondAttribute="width" id="kRf-PB-mDD"/>
                            <constraint firstItem="t2m-9Y-3Gr" firstAttribute="top" secondItem="Its-1I-c8f" secondAttribute="top" id="kTF-qT-xAw"/>
                            <constraint firstItem="8Rm-YT-wZ7" firstAttribute="top" secondItem="T5I-DX-agA" secondAttribute="top" id="mbc-xn-Fgi"/>
                            <constraint firstItem="Its-1I-c8f" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="ogn-ja-iwo"/>
                            <constraint firstItem="8Rm-YT-wZ7" firstAttribute="leading" secondItem="qIt-ah-XBl" secondAttribute="leading" constant="20" id="riZ-Om-LeS"/>
                            <constraint firstItem="Its-1I-c8f" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="s0k-AT-xQk"/>
                            <constraint firstItem="8Rm-YT-wZ7" firstAttribute="top" secondItem="aHp-jP-RgJ" secondAttribute="bottom" constant="20" id="u62-4u-etC"/>
                            <constraint firstItem="8Rm-YT-wZ7" firstAttribute="height" secondItem="T5I-DX-agA" secondAttribute="height" id="vid-B6-03f"/>
                            <constraint firstItem="8Rm-YT-wZ7" firstAttribute="width" secondItem="T5I-DX-agA" secondAttribute="width" id="w0d-EC-Erp"/>
                            <constraint firstItem="7Cn-GC-UIA" firstAttribute="top" secondItem="qIt-ah-XBl" secondAttribute="top" id="wy5-7A-SfF"/>
                            <constraint firstItem="Wxo-Rh-KVV" firstAttribute="top" secondItem="t2m-9Y-3Gr" secondAttribute="bottom" constant="20" id="x0A-hz-o8i"/>
                            <constraint firstItem="Its-1I-c8f" firstAttribute="leading" secondItem="T5I-DX-agA" secondAttribute="leading" id="xwQ-c1-xDh"/>
                        </constraints>
                        <variation key="default">
                            <mask key="constraints">
                                <exclude reference="vid-B6-03f"/>
                                <exclude reference="w0d-EC-Erp"/>
                            </mask>
                        </variation>
                    </view>
                    <connections>
                        <outlet property="buttonHeightConstant" destination="g0F-rb-AVX" id="7fh-Sc-ymq"/>
                        <outlet property="buttonWidthConstraint" destination="emB-rW-56o" id="Lil-Fv-rOV"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="bSl-KE-cTH" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="3" y="179"/>
        </scene>
    </scenes>
</document>