如何垂直对齐表格视图单元格的所有内容？答案

【问题标题】：How can I vertically align all my contents of my Table View Cell?如何垂直对齐表格视图单元格的所有内容？
【发布时间】：2019-04-05 20:49:48
【问题描述】：

我想让表格单元格中的所有内容垂直居中对齐。

我希望我的内容在红线处呈现

我试过了

通过代码

func updateTableViewContentInset() {
    let viewHeight: CGFloat = view.frame.size.height
    let tableViewContentHeight: CGFloat = placesTable.contentSize.height
    let marginHeight: CGFloat = (viewHeight - tableViewContentHeight) / 2.0

    self.placesTable.contentInset = UIEdgeInsets(top: marginHeight, left: 0, bottom:  -marginHeight, right: 0)
}

override func viewWillAppear(_ animated: Bool) {
    updateTableViewContentInset()
}

我试过了

我明白了

结果

甚至通过故事板，但还没有得到我想要的结果。

有什么提示吗？

【问题讨论】：

你的意思是你想让每个单元格的单元格内容居中吗？
您是否在表格视图单元格元素中添加了垂直居中约束？
是的，我愿意。在css世界里，它叫vertical align center。
@DionizB 我是否已经选择了每一个并应用了？还是选择所有 3 个然后应用？
全选3个，然后在容器中垂直应用中心

标签： swift uitableview tableview uistoryboard tablecellrenderer

【解决方案1】：

你的牢房是这样布置的：

地址顶部和底部标签包含在UIStackView 中：

Alignment: Leading
Distribution: Fill
Spacing: 4

堆栈视图被限制在前导边距和垂直居中
“英里”标签被限制为“尾随”到“尾随边距”，“最后一个基线”被限制为“距离”标签
“距离”标签被限制为“英里”前导，8 点用于填充
“距离”标签也被限制为垂直居中
StackView 尾随被限制为 >= 到“距离”前导，8 点用于填充
最后，“距离”标签的 Compression Resistance 设置为 1000 以赋予其优先权（因此地址行可能会被截断，但距离值不会）

结果：

这里是 xib 文件的源代码，以便您在遇到任何问题时检查布局：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="70" id="luO-Wj-VHn" customClass="VertCenterCellXIB" customModule="SW4Temp" customModuleProvider="target">
            <rect key="frame" x="0.0" y="0.0" width="375" height="70"/>
            <autoresizingMask key="autoresizingMask"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="luO-Wj-VHn" id="bdC-Mi-Lfi">
                <rect key="frame" x="0.0" y="0.0" width="375" height="69.5"/>
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" spacing="4" translatesAutoresizingMaskIntoConstraints="NO" id="9Ce-Dp-nkn">
                        <rect key="frame" x="16" y="15.5" width="119" height="39"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="39 Cosgrove St" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xch-Kp-Bi4">
                                <rect key="frame" x="0.0" y="0.0" width="119" height="20.5"/>
                                <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" text="United States" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lYb-n3-8pd">
                                <rect key="frame" x="0.0" y="24.5" width="77" height="14.5"/>
                                <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                    </stackView>
                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="7.8" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i1h-WH-LQH">
                        <rect key="frame" x="260" y="9.5" width="53" height="50.5"/>
                        <fontDescription key="fontDescription" type="system" weight="thin" pointSize="42"/>
                        <color key="textColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="miles" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="21q-Yj-LDN">
                        <rect key="frame" x="321" y="34.5" width="38" height="19.5"/>
                        <fontDescription key="fontDescription" type="system" pointSize="16"/>
                        <color key="textColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <nil key="highlightedColor"/>
                    </label>
                </subviews>
                <constraints>
                    <constraint firstItem="i1h-WH-LQH" firstAttribute="centerY" secondItem="bdC-Mi-Lfi" secondAttribute="centerY" id="4vN-dI-N9v"/>
                    <constraint firstItem="9Ce-Dp-nkn" firstAttribute="leading" secondItem="bdC-Mi-Lfi" secondAttribute="leadingMargin" id="595-Oi-wU4"/>
                    <constraint firstItem="9Ce-Dp-nkn" firstAttribute="centerY" secondItem="bdC-Mi-Lfi" secondAttribute="centerY" id="88e-Jn-rRu"/>
                    <constraint firstItem="21q-Yj-LDN" firstAttribute="leading" secondItem="i1h-WH-LQH" secondAttribute="trailing" constant="8" id="LOe-Ph-3ve"/>
                    <constraint firstItem="i1h-WH-LQH" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="9Ce-Dp-nkn" secondAttribute="trailing" constant="8" id="XIw-PU-tKr"/>
                    <constraint firstItem="21q-Yj-LDN" firstAttribute="baseline" secondItem="i1h-WH-LQH" secondAttribute="baseline" id="aBn-DN-9wA"/>
                    <constraint firstAttribute="trailingMargin" secondItem="21q-Yj-LDN" secondAttribute="trailing" id="spV-CW-rmt"/>
                </constraints>
            </tableViewCellContentView>
            <connections>
                <outlet property="bottomAddressLabel" destination="lYb-n3-8pd" id="pcr-TF-F3g"/>
                <outlet property="distanceLabel" destination="i1h-WH-LQH" id="EcP-Xf-U6K"/>
                <outlet property="topAddressLabel" destination="xch-Kp-Bi4" id="vd5-YM-J10"/>
            </connections>
            <point key="canvasLocation" x="35" y="-35"/>
        </tableViewCell>
    </objects>
</document>

【讨论】：

【解决方案2】：

首先选择左边的两个元素并将它们添加到垂直堆栈视图中，如下所示：

然后选择要在单元格内居中的元素并在容器中垂直应用。

对于元素之间的水平约束，选择每个元素并添加如下约束：

【讨论】：

现在元素都居中，您需要在它们之间添加水平约束。一个接一个地选择每个元素，然后添加您想要的距离。这应该使它工作：D
结果现在更可怕了，我明白了：i.imgur.com/WKlKls4.jpg
不行，这个需要你一个一个来做。然后通过单击按钮右侧的方块添加约束。
你说选择 elements 你应该说选择 element one by one - 那部分让我感到困惑：p
这是不正确的。左侧标签的垂直中心将使它们一个在另一个之上

【解决方案3】：

您需要删除标签的顶部约束并从最左边的标签按住 ctrl-drag 到 contentView 并垂直选择中心，但请注意您需要实现 heightForRowAt 以提供正确的高度

【讨论】：

是单元格内容高度是动态的还是静态的
如果您将左侧两个标签设置为垂直居中，它们将一个在另一个之上
我没有列出所有约束，确保应该首先使用 contentView 引导，并且引导另一个连接到 first 的尾随，这是主要修复的说明

【解决方案4】：

如果您想使内容居中，您可以在情节提要中执行以下操作：

对于左侧（两个标签），添加一个垂直堆栈视图并将其约束到内容视图的垂直中心和内容视图的前导约束。
在堆栈视图中添加两个标签，堆栈视图的高度/宽度将自动设置（称为固有大小，视图根据其内容计算其大小）
对于右侧，只需添加标签并将约束设置为在内容视图中垂直居中。像现在一样添加额外的约束以将它们分开。

【讨论】：

我现在会尝试这些，并会更新你。