iOS 约束在标签的模拟器上被打破

Question

我正在 xCode 上为 iOS 构建一个笔记应用程序。在情节提要中，我有一个表格视图>表格单元格>内容视图；然后在内容视图中我有三个标签。我遇到了正确限制标签的问题，其他一切都很好。

我已经尝试了建议的限制，并且我已经尝试了自己的几个小时。它在情节提要中看起来很好，并且约束无处不在。标签之间应该有间距，但是当我在模拟器中运行它时，它就像它忽略了我的约束并决定做自己的事情，即将所有标签堆叠在彼此顶部的左上角。我能做些什么。我已经包含了几个屏幕截图以及来自故事板源代码的 sn-p。我基本上只想要标题在上面，在它下面是作者的标签，在它下面是文本。我不明白发生了什么。

This is what the Storyboard looks like

This is how it looks like on the emulator

<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="NoteCell" rowHeight="190" id="Qv2-eK-dm0" customClass="NoteCell" customModule="Notes" customModuleProvider="target">
  <rect key="frame" x="0.0" y="28" width="414" height="190"/>
  <autoresizingMask key="autoresizingMask"/>
  <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="Qv2-eK-dm0" id="sEv-Pt-p6x" customClass="NoteCell" customModule="Notes" customModuleProvider="target">
    <rect key="frame" x="0.0" y="0.0" width="414" height="189.5"/>
    <autoresizingMask key="autoresizingMask"/>
    <subviews>
      <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" insetsLayoutMarginsFromSafeArea="NO" text="Creator" textAlignment="natural" lineBreakMode="tailTruncation" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="y5w-xk-OZf">
        <rect key="frame" x="20" y="40" width="58" height="21"/>
        <fontDescription key="fontDescription" type="system" pointSize="17"/>
        <nil key="textColor"/>
        <nil key="highlightedColor"/>
      </label>
      <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" insetsLayoutMarginsFromSafeArea="NO" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="cMo-l6-r6s">
        <rect key="frame" x="20" y="11" width="34" height="21"/>
        <fontDescription key="fontDescription" type="system" pointSize="17"/>
        <nil key="textColor"/>
        <nil key="highlightedColor"/>
      </label>
      <label opaque="NO" userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" insetsLayoutMarginsFromSafeArea="NO" text="Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6sK-TM-dgw">
        <rect key="frame" x="20" y="100" width="33" height="21"/>
        <constraints>
          <constraint firstAttribute="width" constant="33" id="HrI-90-tNn"/>
        </constraints>
        <fontDescription key="fontDescription" type="system" pointSize="17"/>
        <nil key="textColor"/>
        <nil key="highlightedColor"/>
      </label>
    </subviews>
    <constraints>
      <constraint firstAttribute="bottomMargin" secondItem="6sK-TM-dgw" secondAttribute="bottom" constant="58" id="1hq-R0-otf"/>
      <constraint firstItem="y5w-xk-OZf" firstAttribute="leading" secondItem="6sK-TM-dgw" secondAttribute="leading" id="FnH-oM-aQv"/>
      <constraint firstItem="cMo-l6-r6s" firstAttribute="centerX" secondItem="6sK-TM-dgw" secondAttribute="centerX" id="It8-Lz-hKc"/>
      <constraint firstItem="cMo-l6-r6s" firstAttribute="leading" secondItem="sEv-Pt-p6x" secondAttribute="leadingMargin" id="SAm-ft-qJF"/>
      <constraint firstItem="cMo-l6-r6s" firstAttribute="leading" secondItem="y5w-xk-OZf" secondAttribute="leading" id="To4-Bj-4dn"/>
      <constraint firstItem="y5w-xk-OZf" firstAttribute="top" secondItem="cMo-l6-r6s" secondAttribute="bottom" constant="8" symbolic="YES" id="ZjD-2T-R1j"/>
      <constraint firstItem="6sK-TM-dgw" firstAttribute="top" secondItem="y5w-xk-OZf" secondAttribute="bottom" constant="39" id="tcE-3w-0IZ"/>
    </constraints>
  </tableViewCellContentView>
  <connections>
    <outlet property="authorLabel" destination="y5w-xk-OZf" id="emS-as-uYG"/>
    <outlet property="noteTextLabel" destination="6sK-TM-dgw" id="Q92-6x-4a0"/>
    <outlet property="textLabel" destination="6sK-TM-dgw" id="M9B-cr-q2V"/>
    <outlet property="titleLabel" destination="cMo-l6-r6s" id="WLz-mK-Hgj"/>
  </connections>
</tableViewCell>

Answer 1

对于标题标签，使用超级视图（内容视图）添加 Top、Leading 和 Trailing 约束。标题标签约束在下面的屏幕截图中如下所示：

对于作者标签，​​使用超级视图（内容视图）和顶部空间添加前导和尾随约束到标题标签，如下所示：

如需了解详细信息，文本标签将使用超级视图（内容视图）和顶部空间添加到作者标签的前导和尾随约束，如下所示：

这里我假设所有标签都是固定的，所以它们都有固定的高度限制，我还给出了一些颜色来显示差异。输出看起来像这样：

希望这会对你有所帮助。