StackView 高度 Swift

Posted

技术标签:

【中文标题】StackView 高度 Swift【英文标题】:StackView Height Swift 【发布时间】:2018-11-15 08:19:50 【问题描述】:

这是我想要做的:

截图取自早期版本的ios设备。

我正在使用UIStackView 我真的很困惑如何自动显示第一行。这是我在 Main.StoryBoard 中的 UIStackView 属性。

堆栈视图约束:

如何在UIStackView 上仅显示两行以及如何更改第一张图片中显示的行的高度。

提前致谢。

【问题讨论】:

一个简单的解决方案是在您需要的地方添加 1px 宽度和灰色背景的简单 UIView。 将垂直线 UILabel 与其他文本 UILabel 一起放置,并在顶部和底部留出一些垂直空间。 你的 stackView 应该只包含 3 个带有 stackView.distribution = .fillEqually 的标签。然后,使用自动布局,您将 2 个宽度为 1 px 的垂直插入视图剪裁到 rightAnchor 从左侧开始的 2 个第一个标签的锚点。使用自动布局,您可以调整垂直插入视图的填充,使其高度小于标签的高度 【参考方案1】:

将源代码复制到Main.storyboard

故事板源代码:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
        <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="tne-QT-ifu">
            <objects>
                <viewController storyboardIdentifier="ViewController" useStoryboardIdentifierAsRestorationIdentifier="YES" id="BYZ-38-t0r" customClass="ViewController" customModule="WebViewDemo" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0"  />
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" distribution="equalCentering" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="01T-u6-sKf">
                                <rect key="frame" x="16" y="20"  />
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="tE3-oQ-8LA">
                                        <rect key="frame" x="0.0" y="0.0"  />
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="15K" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="p33-9y-oh7">
                                                <rect key="frame" x="41.5" y="0.0"  />
                                                <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Followers" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="yuq-uy-Eao">
                                                <rect key="frame" x="21" y="44"  />
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                    </stackView>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="VUJ-3f-pVe">
                                        <rect key="frame" x="114" y="16"  />
                                        <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="1" id="9Km-KS-Zha"/>
                                        </constraints>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="utx-f8-Egz">
                                        <rect key="frame" x="115" y="0.0"  />
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="5K" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9Sx-mY-4VA">
                                                <rect key="frame" x="45.5" y="0.0"  />
                                                <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Following" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="50u-5R-t7d">
                                                <rect key="frame" x="21" y="44"  />
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                    </stackView>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="o9A-oG-RGD">
                                        <rect key="frame" x="229" y="16"  />
                                        <color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="1" id="eZ8-kX-Faf"/>
                                        </constraints>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="hxS-Lp-BjF">
                                        <rect key="frame" x="230" y="0.0"  />
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="525" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wSr-MP-om2">
                                                <rect key="frame" x="41" y="0.0"  />
                                                <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Burns" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xJ4-kn-IRm">
                                                <rect key="frame" x="34.5" y="44"  />
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                    </stackView>
                                </subviews>
                                <constraints>
                                    <constraint firstItem="VUJ-3f-pVe" firstAttribute="leading" secondItem="tE3-oQ-8LA" secondAttribute="trailing" id="0dJ-QC-0DN"/>
                                    <constraint firstItem="o9A-oG-RGD" firstAttribute="top" secondItem="01T-u6-sKf" secondAttribute="top" constant="16" id="0eJ-ZF-PoX"/>
                                    <constraint firstItem="tE3-oQ-8LA" firstAttribute="leading" secondItem="01T-u6-sKf" secondAttribute="leading" id="4XF-Ad-BxL"/>
                                    <constraint firstAttribute="bottom" secondItem="VUJ-3f-pVe" secondAttribute="bottom" constant="16" id="Cb6-ku-gaI"/>
                                    <constraint firstAttribute="height" constant="80" id="GeZ-22-Qc4"/>
                                    <constraint firstItem="o9A-oG-RGD" firstAttribute="leading" secondItem="utx-f8-Egz" secondAttribute="trailing" id="OqV-dm-Emb"/>
                                    <constraint firstItem="utx-f8-Egz" firstAttribute="leading" secondItem="VUJ-3f-pVe" secondAttribute="trailing" id="Tpj-O7-XI4"/>
                                    <constraint firstItem="tE3-oQ-8LA" firstAttribute="top" secondItem="01T-u6-sKf" secondAttribute="top" id="VA4-Ir-THO"/>
                                    <constraint firstAttribute="bottom" secondItem="tE3-oQ-8LA" secondAttribute="bottom" id="Wi3-mb-45i"/>
                                    <constraint firstAttribute="trailing" secondItem="hxS-Lp-BjF" secondAttribute="trailing" id="aMM-CS-yXY"/>
                                    <constraint firstItem="utx-f8-Egz" firstAttribute="top" secondItem="01T-u6-sKf" secondAttribute="top" id="bXD-RW-EuA"/>
                                    <constraint firstAttribute="bottom" secondItem="utx-f8-Egz" secondAttribute="bottom" id="bvK-yl-vkB"/>
                                    <constraint firstAttribute="bottom" secondItem="hxS-Lp-BjF" secondAttribute="bottom" id="iMQ-sM-sIg"/>
                                    <constraint firstItem="hxS-Lp-BjF" firstAttribute="leading" secondItem="o9A-oG-RGD" secondAttribute="trailing" id="pY7-nS-6KF"/>
                                    <constraint firstItem="hxS-Lp-BjF" firstAttribute="top" secondItem="01T-u6-sKf" secondAttribute="top" id="rgj-uE-EWc"/>
                                    <constraint firstItem="VUJ-3f-pVe" firstAttribute="top" secondItem="01T-u6-sKf" secondAttribute="top" constant="16" id="vLJ-85-Xhj"/>
                                    <constraint firstAttribute="bottom" secondItem="o9A-oG-RGD" secondAttribute="bottom" constant="16" id="wbg-fS-F8A"/>
                                </constraints>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="01T-u6-sKf" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="adL-or-9pL"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="01T-u6-sKf" secondAttribute="trailing" constant="15" id="bCu-2x-su3"/>
                            <constraint firstItem="01T-u6-sKf" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" constant="16" id="zpl-R5-rv3"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <navigationItem key="navigationItem" id="9BY-rh-0CG">
                        <leftBarButtonItems>
                            <barButtonItem systemItem="done" id="7Ff-GP-OPr"/>
                            <barButtonItem systemItem="done" id="LFG-6n-5oQ"/>
                        </leftBarButtonItems>
                        <rightBarButtonItems>
                            <barButtonItem systemItem="done" id="SQo-Ld-g7A"/>
                            <barButtonItem systemItem="done" id="QZU-TY-dGK"/>
                            <barButtonItem systemItem="done" id="9Xe-Uw-Gzb"/>
                        </rightBarButtonItems>
                    </navigationItem>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="927.20000000000005" y="44.527736131934034"/>
        </scene>
    </scenes>
</document>

编辑:

https://bitbucket.org/Sateesh_Y/stackviewdemo/src/master/

【讨论】:

一切都很好,但标签常量的高度不起作用,它们在第一张图片中显示的效果一样。 标签的高度是动态的。它总是取决于 UIStackView 的高度。我给 UIStackView 中的 UILabel 提供了 16 个顶部空间,16 个底部空间,请看一次。 我已经更新了答案。在编辑中检查项目。 @Sateesh - 提供来源很好,但您的回答也应该解释您正在做什么来解决问题。

以上是关于StackView 高度 Swift的主要内容,如果未能解决你的问题,请参考以下文章

水平stackview标签随着固定高度元素增长

StackView 在 vi​​ewDidLayoutSubviews 返回前高度

之后更改 StackView 元素的高度

StackView 内 UICollectionView 的动态高度

为啥父 UIStackView 无法识别子 StackView 的高度?

StackView 高度 Swift