可变长度标签旁边的标签

时间:2019-03-08 11:07:10

标签: ios

我想让tableview的行包含两个标签。第一个将包含一个长度可以不同的名称,第二个将在括号中包含一个数字。例如:

|示例名称(8)|
|示例非常长的名称(10)|
|非常非常非常非常...(21)|
|名称(6)姓名|
|示例名称名称名称n ...(2)|

带点的行应可滚动。第二个标签应始终与第一个标签相邻,但如果第一个标签太长,则第二个标签应仍在屏幕上可见,并且第一个标签应可水平滚动。

使用DonMag的解决方案:

几乎可以正常工作。我得到了想要的视图,但左标签不可滚动。它的末尾有点,我看不到标签的其余部分。

我的表格视图:

enter image description here

约束:

enter image description here

右标签:

enter image description here

滚动视图:

enter image description here

2 个答案:

答案 0 :(得分:0)

您可以使用约束来完成此操作,也可以尝试使用stackViews,因为通常这是它们的预期用途:

UIStackview

| Label 1 | UIScrollView (Label 2) |

在这种情况下,只需将宽度约束添加到scrollView,使其大于或等于您的预期大小,并增加label 1的垂直优先级。

我还会考虑不要将标签放置在scrollView内,而将其放置在另一个scrollView内(在这种情况下为tableView),因为要获得很小的滚动内容会很麻烦。最好考虑只将标签放置在另一标签的下方,或者进行其他一些布局改进,从而减少调整并获得更好的用户体验。

答案 1 :(得分:0)

有点棘手,但不要太棘手...

您需要做的是设置多个相似的约束,并在不同的元素上使用Content Compression Resistance Priority Constraint Priority的组合。< / p>

看看这个:

enter image description here

  • 我们在滚动视图中嵌入了“左标签”。
  • 我们将滚动视图的宽度限制为标签的宽度,但优先级为750。这样一来,滚动视图可以使用标签直到进行扩展(和收缩),再也无法扩展了。
  • 我们向“ Right Label ...”添加了约束,导致滚动视图,并拖至视图的右边缘,拖尾设置为>= 20,抗压强度设置为1000。这样一来,标签在展开/收缩时就可以“粘贴”到滚动视图上,但是 不允许 允许标签越过右边缘,也不能压缩超出其自身的内容宽度。
  • 其余约束都是非常标准的。

然后我们得到:

enter image description here

我整理了一个简单的示例,可以让您通过单击按钮更改文本以查看实际效果:

enter image description here

这是课程:

class ScrollingLabelViewController: UIViewController {

    @IBOutlet var leftLabel: UILabel!
    @IBOutlet var rightLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    @IBAction func leftTap(_ sender: Any) {
        if let btn = sender as? UIButton {

            let t = btn.currentTitle

            switch t {

            case "Short Text":
                leftLabel.text = "Example Name"

            case "Medium Text":
                leftLabel.text = "Example Longer Name"

            case "Long Text":
                fallthrough

            default:
                leftLabel.text = "Example Name that is long enough that it will need to scroll."

            }
        }
    }

    @IBAction func rightTap(_ sender: Any) {
        if let btn = sender as? UIButton {

            let t = btn.currentTitle

            switch t {

            case "Short Text":
                rightLabel.text = "(6)"

            case "Medium Text":
                rightLabel.text = "(255)"

            case "Long Text":
                fallthrough

            default:
                rightLabel.text = "(38,872)"

            }
        }
    }

}

情节提要源:

<?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" initialViewController="itP-Si-dAD">
    <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>
        <!--Scrolling Label View Controller-->
        <scene sceneID="2HK-o9-I65">
            <objects>
                <viewController id="itP-Si-dAD" customClass="ScrollingLabelViewController" customModule="XC10SWScratch" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="C9r-ad-Wv2">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Rs3-TC-hFe">
                                <rect key="frame" x="20" y="60" width="114.5" height="20.5"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="Example Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="3jj-Oq-9XF">
                                        <rect key="frame" x="0.0" y="0.0" width="114.5" height="20.5"/>
                                        <color key="backgroundColor" red="0.0" green="0.99143940210000003" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <constraints>
                                    <constraint firstAttribute="bottom" secondItem="3jj-Oq-9XF" secondAttribute="bottom" id="7EF-mm-DaK"/>
                                    <constraint firstAttribute="width" secondItem="3jj-Oq-9XF" secondAttribute="width" priority="750" id="ZtX-rP-Lme"/>
                                    <constraint firstAttribute="width" relation="greaterThanOrEqual" constant="12" id="ZyU-il-ReF"/>
                                    <constraint firstItem="3jj-Oq-9XF" firstAttribute="top" secondItem="Rs3-TC-hFe" secondAttribute="top" id="ml2-6X-bBl"/>
                                    <constraint firstItem="3jj-Oq-9XF" firstAttribute="leading" secondItem="Rs3-TC-hFe" secondAttribute="leading" id="r4q-LE-OQ5"/>
                                    <constraint firstAttribute="trailing" secondItem="3jj-Oq-9XF" secondAttribute="trailing" id="t9q-89-BOF"/>
                                    <constraint firstAttribute="height" secondItem="3jj-Oq-9XF" secondAttribute="height" id="xDp-np-bFT"/>
                                </constraints>
                            </scrollView>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="(6)" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZCj-c5-IzQ">
                                <rect key="frame" x="142.5" y="60" width="23" height="20.5"/>
                                <color key="backgroundColor" red="0.0" green="0.99143940210000003" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <stackView opaque="NO" contentMode="scaleToFill" spacing="47" translatesAutoresizingMaskIntoConstraints="NO" id="0v3-eY-MTM">
                                <rect key="frame" x="44" y="160.5" width="287" height="164.5"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="18" translatesAutoresizingMaskIntoConstraints="NO" id="nou-P9-haw">
                                        <rect key="frame" x="0.0" y="0.0" width="120" height="164.5"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Left Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Jgc-gS-1Oz">
                                                <rect key="frame" x="0.0" y="0.0" width="120" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="mPG-zF-zdi">
                                                <rect key="frame" x="0.0" y="38.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Short Text"/>
                                                <connections>
                                                    <action selector="leftTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="z5m-yd-ACM"/>
                                                </connections>
                                            </button>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="xiv-Uc-UPL">
                                                <rect key="frame" x="0.0" y="86.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Medium Text"/>
                                                <connections>
                                                    <action selector="leftTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="hCp-75-WVo"/>
                                                </connections>
                                            </button>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="LQD-gc-Pv1">
                                                <rect key="frame" x="0.0" y="134.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Long Text"/>
                                                <connections>
                                                    <action selector="leftTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="fWI-cl-wGZ"/>
                                                </connections>
                                            </button>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="120" id="Mvo-co-QSU"/>
                                        </constraints>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="18" translatesAutoresizingMaskIntoConstraints="NO" id="usT-YQ-P4a">
                                        <rect key="frame" x="167" y="0.0" width="120" height="164.5"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Right Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="WXA-Lo-BaW">
                                                <rect key="frame" x="0.0" y="0.0" width="120" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="UXZ-r3-dw1">
                                                <rect key="frame" x="0.0" y="38.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Short Text"/>
                                                <connections>
                                                    <action selector="rightTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="1e8-Dh-iHD"/>
                                                </connections>
                                            </button>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="BN2-Tt-2QG">
                                                <rect key="frame" x="0.0" y="86.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Medium Text"/>
                                                <connections>
                                                    <action selector="rightTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="8CM-Gx-TYM"/>
                                                </connections>
                                            </button>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="vCy-ut-LXL">
                                                <rect key="frame" x="0.0" y="134.5" width="120" height="30"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <state key="normal" title="Long Text"/>
                                                <connections>
                                                    <action selector="rightTap:" destination="itP-Si-dAD" eventType="touchUpInside" id="iTb-4n-jbd"/>
                                                </connections>
                                            </button>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="120" id="ACw-Tb-RfF"/>
                                        </constraints>
                                    </stackView>
                                </subviews>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="Rs3-TC-hFe" firstAttribute="leading" secondItem="N2s-Cz-Yp4" secondAttribute="leading" constant="20" id="Dkw-df-pKY"/>
                            <constraint firstItem="ZCj-c5-IzQ" firstAttribute="centerY" secondItem="Rs3-TC-hFe" secondAttribute="centerY" id="GsG-U4-jc6"/>
                            <constraint firstItem="ZCj-c5-IzQ" firstAttribute="leading" secondItem="Rs3-TC-hFe" secondAttribute="trailing" constant="8" id="aVZ-i7-91I"/>
                            <constraint firstItem="Rs3-TC-hFe" firstAttribute="top" secondItem="N2s-Cz-Yp4" secondAttribute="top" constant="40" id="jFX-1U-cRh"/>
                            <constraint firstItem="0v3-eY-MTM" firstAttribute="centerX" secondItem="C9r-ad-Wv2" secondAttribute="centerX" id="jZO-qZ-0z5"/>
                            <constraint firstItem="N2s-Cz-Yp4" firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="ZCj-c5-IzQ" secondAttribute="trailing" constant="20" id="pP1-gC-Uvq"/>
                            <constraint firstItem="0v3-eY-MTM" firstAttribute="top" secondItem="Rs3-TC-hFe" secondAttribute="bottom" constant="80" id="sJi-4A-BOA"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="N2s-Cz-Yp4"/>
                    </view>
                    <connections>
                        <outlet property="leftLabel" destination="3jj-Oq-9XF" id="469-ke-ni2"/>
                        <outlet property="rightLabel" destination="ZCj-c5-IzQ" id="hMG-sN-B29"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="w9F-EF-F89" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="167" y="1506"/>
        </scene>
    </scenes>
</document>

编辑:几乎相同,只是将其设置为XIB以用作表视图单元。

enter image description here

ScrollingLabelCell.xib在IB:

enter image description here

ScrollingLabelCell.xib来源:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.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="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" id="SVi-M2-eJO" customClass="ScrollingLabelCell" customModule="XC10SWScratch" customModuleProvider="target">
            <rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
            <autoresizingMask key="autoresizingMask"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="SVi-M2-eJO" id="FO6-8m-8lR">
                <rect key="frame" x="0.0" y="0.0" width="375" height="43.5"/>
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1TD-My-nqW" userLabel="Inner View">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="43.5"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fPZ-Vc-pTX">
                                <rect key="frame" x="16" y="11.5" width="114.5" height="20.5"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Example Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Gsx-qe-uXG">
                                        <rect key="frame" x="0.0" y="0.0" width="114.5" height="20.5"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <constraints>
                                    <constraint firstAttribute="bottom" secondItem="Gsx-qe-uXG" secondAttribute="bottom" id="KNJ-P5-R1c"/>
                                    <constraint firstItem="Gsx-qe-uXG" firstAttribute="top" secondItem="fPZ-Vc-pTX" secondAttribute="top" id="M63-Na-FHd"/>
                                    <constraint firstAttribute="height" secondItem="Gsx-qe-uXG" secondAttribute="height" id="kQb-o9-Cmr"/>
                                    <constraint firstItem="Gsx-qe-uXG" firstAttribute="leading" secondItem="fPZ-Vc-pTX" secondAttribute="leading" id="od5-IF-Drl"/>
                                    <constraint firstAttribute="trailing" secondItem="Gsx-qe-uXG" secondAttribute="trailing" id="pVh-95-8bc"/>
                                    <constraint firstAttribute="width" secondItem="Gsx-qe-uXG" secondAttribute="width" priority="750" id="zUu-pN-rme"/>
                                </constraints>
                            </scrollView>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="(6)" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="cnK-Pa-DDF">
                                <rect key="frame" x="142.5" y="11.5" width="23" height="21"/>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <constraints>
                            <constraint firstItem="fPZ-Vc-pTX" firstAttribute="leading" secondItem="1TD-My-nqW" secondAttribute="leading" constant="16" id="24S-Dy-Pf7"/>
                            <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="cnK-Pa-DDF" secondAttribute="trailing" constant="20" id="9P7-Or-S8M"/>
                            <constraint firstAttribute="bottom" secondItem="fPZ-Vc-pTX" secondAttribute="bottom" constant="11.5" id="BD3-7Z-Ry9"/>
                            <constraint firstItem="cnK-Pa-DDF" firstAttribute="centerY" secondItem="fPZ-Vc-pTX" secondAttribute="centerY" id="Q4G-6M-3Qe"/>
                            <constraint firstItem="fPZ-Vc-pTX" firstAttribute="top" secondItem="1TD-My-nqW" secondAttribute="top" constant="11.5" id="lOh-MF-Khj"/>
                            <constraint firstItem="cnK-Pa-DDF" firstAttribute="leading" secondItem="fPZ-Vc-pTX" secondAttribute="trailing" constant="12" id="mVz-me-wRN"/>
                        </constraints>
                    </view>
                </subviews>
                <constraints>
                    <constraint firstAttribute="bottom" secondItem="1TD-My-nqW" secondAttribute="bottom" id="fgL-GE-OC3"/>
                    <constraint firstItem="1TD-My-nqW" firstAttribute="leading" secondItem="FO6-8m-8lR" secondAttribute="leading" id="iV5-qZ-Oq7"/>
                    <constraint firstAttribute="trailing" secondItem="1TD-My-nqW" secondAttribute="trailing" id="whk-Ke-oc7"/>
                    <constraint firstItem="1TD-My-nqW" firstAttribute="top" secondItem="FO6-8m-8lR" secondAttribute="top" id="yIU-Lz-jlC"/>
                </constraints>
            </tableViewCellContentView>
            <connections>
                <outlet property="leftLabel" destination="Gsx-qe-uXG" id="9kR-67-2oC"/>
                <outlet property="rightLabel" destination="cnK-Pa-DDF" id="p4k-MJ-gb2"/>
            </connections>
            <point key="canvasLocation" x="156" y="50.374812593703155"/>
        </tableViewCell>
    </objects>
</document>

以及单元格和表格视图控制器类的示例:

class ScrollingLabelCell: UITableViewCell {

    @IBOutlet var leftLabel: UILabel!
    @IBOutlet var rightLabel: UILabel!

}

class ScrollingLabelTableViewController: UITableViewController {

    let xibName = "ScrollingLabelCell"

    let theData: [[String]] = [
        ["Example Name", "1"],
        ["Example Longer Name", "2"],
        ["Example Even Longer Name", "3"],
        ["To demonstrate the scrolling,", "4"],
        ["6, 7 & 800 have the same name", "5"],
        ["Mr. Example Name that is Long Enough that it Needs to Scroll", "6"],
        ["Mr. Example Name that is Long Enough that it Needs to Scroll", "7"],
        ["Mr. Example Name that is Long Enough that it Needs to Scroll", "800"],
        ["Back to Short Names", "99"],
        ["With longer numbers", "2,750"],
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        let bundle = Bundle(for: type(of: self))
        let cellNib = UINib(nibName: xibName, bundle: bundle)
        tableView.register(cellNib, forCellReuseIdentifier: xibName)

    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return theData.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: xibName, for: indexPath) as! ScrollingLabelCell

        cell.leftLabel.text = theData[indexPath.row][0]
        cell.rightLabel.text = "(" + theData[indexPath.row][1] + ")"

        return cell
    }

}