StackView高度快速

Question

Here is what I am trying to do:

The screenshot is taken from an earlier version of iOS device.

I am using UIStackView I am really confused how to automatically show the first line. This is my UIStackView Properties in Main.StoryBoard .

Stack View Constraints:

How to Show only two line on UIStackView and as well as how to change the height of the lines in the show in the first image.

Thanks in Advance.

Answer 1

Copy the source code to Main.storyboard .

Storyboard source code:

<?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" width="375" height="667"/>
                        <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" width="344" height="80"/>
                                <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" width="114" height="80"/>
                                        <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" width="31" height="36"/>
                                                <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" width="72.5" height="36"/>
                                                <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" width="1" height="48"/>
                                        <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" width="114" height="80"/>
                                        <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" width="23" height="36"/>
                                                <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" width="72.5" height="36"/>
                                                <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" width="1" height="48"/>
                                        <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" width="114" height="80"/>
                                        <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" width="32.5" height="36"/>
                                                <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" width="45" height="36"/>
                                                <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>

Edit:

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