我想让tableview的行包含两个标签。第一个将包含一个长度可以不同的名称,第二个将在括号中包含一个数字。例如:
|示例名称(8)|
|示例非常长的名称(10)|
|非常非常非常非常...(21)|
|名称(6)姓名|
|示例名称名称名称n ...(2)|
带点的行应可滚动。第二个标签应始终与第一个标签相邻,但如果第一个标签太长,则第二个标签应仍在屏幕上可见,并且第一个标签应可水平滚动。
使用DonMag的解决方案:
几乎可以正常工作。我得到了想要的视图,但左标签不可滚动。它的末尾有点,我看不到标签的其余部分。
我的表格视图:
约束:
右标签:
滚动视图:
答案 0 :(得分:0)
您可以使用约束来完成此操作,也可以尝试使用stackViews,因为通常这是它们的预期用途:
UIStackview
| Label 1 | UIScrollView (Label 2) |
在这种情况下,只需将宽度约束添加到scrollView
,使其大于或等于您的预期大小,并增加label 1
的垂直优先级。
我还会考虑不要将标签放置在scrollView内,而将其放置在另一个scrollView内(在这种情况下为tableView),因为要获得很小的滚动内容会很麻烦。最好考虑只将标签放置在另一标签的下方,或者进行其他一些布局改进,从而减少调整并获得更好的用户体验。
答案 1 :(得分:0)
有点棘手,但不要太棘手...
您需要做的是设置多个相似的约束,并在不同的元素上使用Content Compression Resistance Priority
和 Constraint Priority
的组合。< / p>
看看这个:
750
。这样一来,滚动视图可以使用标签直到进行扩展(和收缩),再也无法扩展了。>= 20
,抗压强度设置为1000
。这样一来,标签在展开/收缩时就可以“粘贴”到滚动视图上,但是 不允许 允许标签越过右边缘,也不能压缩超出其自身的内容宽度。然后我们得到:
我整理了一个简单的示例,可以让您通过单击按钮更改文本以查看实际效果:
这是课程:
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以用作表视图单元。
ScrollingLabelCell.xib
在IB:
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
}
}