StackView 子视图常量宽度

Posted 2023-02-27

【中文标题】StackView 子视图常量宽度

【英文标题】：StackView subview constant widths

【发布时间】：2018-11-27 01:14:40

【问题描述】：

我正在尝试在图表上添加 7 个 x 轴值。我正在尝试使用其中包含 7 个标签的水平堆栈视图来执行此操作，然后以编程方式设置每个标签的（子视图）内容。

但我无法让这些标签留在正确的位置。根据值的不同，某些标签有时更宽，有时更窄，间距似乎会发生变化等（似乎将分布设置为“均等填充”，但它们的宽度太窄，仅显示小数点和紧靠其左侧的数字。）

每个值（标签或文本字段）都是一个小数点加上两到五位数字（例如，1.0、3.45、678.92）。

无论内容如何，​​每个子视图都应保持相同的宽度，并在其相应的网格线下方保持正确居中，每个子视图之间的间距最小。

例如，有没有办法确保每个标签的宽度恒定为 45，并且它们之间的每个空格的宽度为 2，而不管标签的内容是 1.1 还是 2345.9？

（而且，由于我是 Swift 新手，有什么理由使用标签而不是文本字段？）

谢谢。

【问题讨论】：

文本字段允许用户输入/操作文本，而标签只显示文本。

是的，这就是我使用标签的原因。我只是不确定是否还有其他理由使用文本字段。谢谢！

如果您的标签在使用.fillEqually 后不适合，那么您就是没有足够的屏幕空间。更改字体或不显示所有标签。我建议您更进一步，使用图形框架。

【参考方案1】：

我已尝试重现您的情况，但一切正常。所以你试试我的步骤：

使用您的内容垂直创建 7 个标签（如 1.09、1.12345、...） 将它们嵌入到堆栈视图中 确保堆栈视图属性为：垂直轴、对齐和分布为“填充”，间距为 2（由您选择） 最后，将宽度约束添加到 45（根据您的选择）、垂直和水平约束

希望对你有帮助:)

【讨论】：

纵轴没问题。这是我遇到问题的水平轴。抱歉，我以为我已经包含了。

【参考方案2】：

如果您希望标签具有 45 的恒定宽度和 2 的间距...您有 7 个标签 + 6 个“空格”：

(7 * 45) + (6 * 2) = 327

因此，如果您将水平堆栈视图的宽度约束设置为 327 并将分布设置为 Fill Equally，您将获得所需的结果：

您可能已经注意到，要将诸如示例 678.92 之类的值放入宽度为 45 的标签中，您需要使用非常小的字体（我使用的是 System 12）。

这是故事板，您可以自己查看：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.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="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="NQ7-zI-PK9">
            <objects>
                <viewController id="CCM-nn-BIf" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="C1V-ar-DQI">
                        <rect key="frame" x="0.0" y="0.0"  />
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" alignment="top" spacing="2" translatesAutoresizingMaskIntoConstraints="NO" id="vuE-Tw-FZh">
                                <rect key="frame" x="24" y="327"  />
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Pyl-0P-Y2W">
                                        <rect key="frame" x="0.0" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="2.4" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="we3-YL-c5s">
                                        <rect key="frame" x="47" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="3.8" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Aj1-ad-r0E">
                                        <rect key="frame" x="94" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="8.75" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qnr-KX-c2b">
                                        <rect key="frame" x="141" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="10.3" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="hiY-qQ-iUG">
                                        <rect key="frame" x="188" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="22.44" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="oUW-RY-903">
                                        <rect key="frame" x="235" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="678.92" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Wa7-Qj-2h9">
                                        <rect key="frame" x="282" y="0.0"  />
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <constraints>
                                    <constraint firstAttribute="width" constant="327" id="DsZ-ie-6Cr"/>
                                </constraints>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="vuE-Tw-FZh" firstAttribute="centerY" secondItem="C1V-ar-DQI" secondAttribute="centerY" id="Xea-Fp-KaS"/>
                            <constraint firstItem="vuE-Tw-FZh" firstAttribute="centerX" secondItem="C1V-ar-DQI" secondAttribute="centerX" id="hTu-m6-hK6"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="ktE-hH-kAz"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="ulR-Rg-tMI" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="41" y="16"/>
        </scene>
    </scenes>
</document>

---

编辑：

另一种选择：给一个标签 45 的宽度约束，设置堆栈视图 Distribution: Fill Equally / Spacing: 2，但不要限制堆栈视图的宽度。

【讨论】：

是的，我懂算术。问题是标签不断出现不同的宽度，或者都太窄以至于只有部分数字显示。我按照上面 huongzzz 的步骤使用水平堆栈视图而不是垂直堆栈视图，我遇到了同样的问题。

@Greg - 嗯...我发布的图像 是 具有等宽标签的堆栈视图。我添加了用于创建该图像的情节提要的源代码。