我试图把将包含自定义视图(每一个图标和一个多标签)到UIStackView
一个UITableViewCell
。
这里是我的尝试:
CustomView.swift
enum Icon {
case eye
case location
case paper
case phone
var image: UIImage {
switch self {
case .eye:
return UIImage(named: "EyeIcon")!
case .location:
return UIImage(named: "PaperPlaneIcon")!
case .paper:
return UIImage(named: "PhoneIcon")!
case .phone:
return UIImage(named: "PinLocationIcon")!
}
}
}
class TestView: UIView {
@IBOutlet var contentView: UIView!
@IBOutlet weak var iconView: UIImageView!
@IBOutlet weak var label: UILabel!
var icon: Icon? {
didSet {
iconView.image = icon?.image
}
}
var text: String? {
didSet {
label.text = text
}
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
private func commonInit() {
Bundle.main.loadNibNamed("TestView", owner: self, options: nil)
addSubview(contentView)
contentView.frame = self.bounds
contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
}
CustomView.xib
在我的控制器的cellForRow()
方法:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let fruit = fruits[indexPath.row]
let cell = tableView.dequeueReusableCell(withIdentifier: "CellTest", for: indexPath) as! CellTest
cell.colorView.backgroundColor = fruit.color
cell.titleLabel.text = fruit.name
cell.regionLabel.text = fruit.region
if let eyeInfo = fruit.eyeInfo {
let view = TestView()
view.icon = .eye
view.text = eyeInfo
cell.stackView.addArrangedSubview(view)
}
if let locationInfo = fruit.locationInfo {
let view = TestView()
view.icon = .location
view.text = locationInfo
cell.stackView.addArrangedSubview(view)
}
if let paperInfo = fruit.paperInfo {
let view = TestView()
view.icon = .paper
view.text = paperInfo
cell.stackView.addArrangedSubview(view)
}
if let phoneInfo = fruit.phoneInfo {
let view = TestView()
view.icon = .phone
view.text = phoneInfo
cell.stackView.addArrangedSubview(view)
}
return cell
}
关联电池的厦门国际银行:
这里是结果:
如果我更换Fill
通过Fill Equally/Proportionally
:
我没有的我怎么能改善这一点,并得到它的工作思路。
谢谢您的帮助!
为了让您所需的布局,使用电池的原型(注:我擦到“图标”图片出现在贴出的图片,因此,他们非常低苏亚雷斯)...
“颜色”看,标题标签和区域标签铺设出相当标准。
下面是一个垂直Stack View
。对准:填充,分布:填充,间距:8.其运动被限制在从左侧位进一步,顶部是从颜色视图底部12-PTS,和尾部是0(至余量)。没有高度约束。底部从内容视图的底部约束>= 8
(可以很容易地避免故事板约束警告)。
每“行”,在垂直堆叠视图是水平堆叠视图。对齐:顶部,分布:填写,间距:20(这是图标图像视图和标签的左边之间的空间)。
图标imageViews被限制宽度和高度都为24点(我猜你的尺寸 - 根据需要进行调整)。
对于“眼栈”标签设置为Number Of Lines: 0
- 这使得它能够垂直扩展。
有关堆栈意见的伟大的事情是,如果你设置一个子视图隐藏,堆栈视图勾画出其排列子视图的其余部分,如果隐藏的看法是不存在的!
因此,一些代码...
我所定义的Fruit
对象为:
class Fruit: NSObject {
var color: UIColor?
var name: String?
var region: String?
var eyeInfo: String?
var locationInfo: String?
var paperInfo: String?
var phoneInfo: String?
}
该控制器的tableview类是非常简单的:
class FruitTableViewController: UITableViewController {
var fruits: [Fruit] = [Fruit]()
override func viewDidLoad() {
super.viewDidLoad()
var aFruit: Fruit!
// create a couple Fruit objects
aFruit = Fruit()
aFruit.color = .yellow
aFruit.name = "Banana"
aFruit.region = "Tropical"
aFruit.eyeInfo = "A banana is an edible fruit - technically a berry - produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called \"plantains\", distinguishing them from dessert bananas."
aFruit.locationInfo = "banana location"
aFruit.paperInfo = "banana paper"
aFruit.phoneInfo = "555-1212"
fruits.append(aFruit)
aFruit = Fruit()
aFruit.color = .orange
aFruit.name = "Orange"
aFruit.region = "Somewhere"
aFruit.eyeInfo = "The orange is the fruit of the citrus species Citrus × sinensis in the family Rutaceae. It is also called sweet orange, to distinguish it from the related Citrus × aurantium, referred to as bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations."
aFruit.paperInfo = "orange paper"
aFruit.phoneInfo = "555-1234"
fruits.append(aFruit)
aFruit = Fruit()
aFruit.color = .red
aFruit.name = "Strawberry"
aFruit.region = "Somewhere else"
aFruit.eyeInfo = "The garden strawberry (or simply strawberry; Fragaria × ananassa) is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries. It is cultivated worldwide for its fruit. The fruit is widely appreciated for its characteristic aroma, bright red color, juicy texture, and sweetness. It is consumed in large quantities, either fresh or in such prepared foods as preserves, juice, pies, ice creams, milkshakes, and chocolates. Artificial strawberry flavorings and aromas are also widely used in many products like lip gloss, candy, hand sanitizers, perfume, and many others."
aFruit.paperInfo = "strawberry location"
fruits.append(aFruit)
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return fruits.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath) as! FruitCell
let fruit = fruits[indexPath.row]
// tell the cell to lay itself out using the Fruit object
cell.setData(fruit)
return cell
}
}
现在,棘手的部分(这真的不是很靠谱)是细胞类中:
class FruitCell: UITableViewCell {
@IBOutlet var colorView: UIView!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var regionLabel: UILabel!
@IBOutlet var eyeStack: UIStackView!
@IBOutlet var eyeLabel: UILabel!
@IBOutlet var paperStack: UIStackView!
@IBOutlet var paperLabel: UILabel!
@IBOutlet var locationStack: UIStackView!
@IBOutlet var locationLabel: UILabel!
@IBOutlet var phoneStack: UIStackView!
@IBOutlet var phoneLabel: UILabel!
func setData(_ aFruit: Fruit) -> Void {
colorView.backgroundColor = aFruit.color ?? .clear
titleLabel.text = aFruit.name ?? "missing name"
regionLabel.text = aFruit.region ?? "missing region"
eyeLabel.text = aFruit.eyeInfo
eyeStack.isHidden = aFruit.eyeInfo == nil
paperLabel.text = aFruit.paperInfo
paperStack.isHidden = aFruit.paperInfo == nil
locationLabel.text = aFruit.locationInfo
locationStack.isHidden = aFruit.locationInfo == nil
phoneLabel.text = aFruit.phoneInfo
phoneStack.isHidden = aFruit.phoneInfo == nil
}
}
正如你看到的,不是一大堆对那里发生的。填写字段,以及隐藏任何“行”不具有关联性的。
结果:
这里是源我用故事板。创建一个新的故事板,使用Open As... 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" initialViewController="qRt-V1-dwn">
<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>
<scenes>
<!--Fruit Table View Controller-->
<scene sceneID="Pzo-Pu-oQa">
<objects>
<tableViewController id="XR2-B3-WIs" customClass="FruitTableViewController" customModule="XC10SWScratch" customModuleProvider="target" sceneMemberID="viewController">
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" id="TDC-Zo-VvP">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<prototypes>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="FruitCell" rowHeight="234" id="853-zT-qRj" customClass="FruitCell" customModule="XC10SWScratch" customModuleProvider="target">
<rect key="frame" x="0.0" y="28" width="375" height="234"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="853-zT-qRj" id="0DZ-Ef-oop">
<rect key="frame" x="0.0" y="0.0" width="375" height="233.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ikP-4Y-6aq">
<rect key="frame" x="16" y="11" width="50" height="50"/>
<color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="50" id="RuT-fi-EFo"/>
<constraint firstAttribute="height" constant="50" id="cfD-Zs-hYa"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Kky-Bg-S4i">
<rect key="frame" x="32" y="73" width="327" height="120"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" alignment="top" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="QaP-Mv-Q7C">
<rect key="frame" x="0.0" y="0.0" width="327" height="24"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="eyeIcon" translatesAutoresizingMaskIntoConstraints="NO" id="pcc-Pa-VZz">
<rect key="frame" x="0.0" y="0.0" width="24" height="24"/>
<constraints>
<constraint firstAttribute="width" constant="24" id="UjX-QG-fGP"/>
<constraint firstAttribute="height" constant="24" id="j1V-az-eec"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="zOZ-LZ-fOe">
<rect key="frame" x="44" y="0.0" width="283" height="19.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="16"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" alignment="top" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="CBc-QH-2E0">
<rect key="frame" x="0.0" y="32" width="327" height="24"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="paperIcon" translatesAutoresizingMaskIntoConstraints="NO" id="jUa-xM-uHq">
<rect key="frame" x="0.0" y="0.0" width="24" height="24"/>
<constraints>
<constraint firstAttribute="height" constant="24" id="GcO-VI-nd5"/>
<constraint firstAttribute="width" constant="24" id="ZHd-H8-mDS"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xXb-KK-TA1">
<rect key="frame" x="44" y="0.0" width="283" height="19.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="16"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" alignment="top" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="JBc-2a-5Ah">
<rect key="frame" x="0.0" y="64" width="327" height="24"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="locationIcon" translatesAutoresizingMaskIntoConstraints="NO" id="5Xq-rG-swI">
<rect key="frame" x="0.0" y="0.0" width="24" height="24"/>
<constraints>
<constraint firstAttribute="height" constant="24" id="2HP-E7-SOh"/>
<constraint firstAttribute="width" constant="24" id="hiL-qb-LGC"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="RDT-Jc-osa">
<rect key="frame" x="44" y="0.0" width="283" height="19.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="16"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" alignment="top" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="l43-4h-vZf">
<rect key="frame" x="0.0" y="96" width="327" height="24"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="phoneIcon" translatesAutoresizingMaskIntoConstraints="NO" id="0Q8-Jg-x5x">
<rect key="frame" x="0.0" y="0.0" width="24" height="24"/>
<constraints>
<constraint firstAttribute="height" constant="24" id="bHf-CG-1uY"/>
<constraint firstAttribute="width" constant="24" id="vaG-ma-lRV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="rH2-Y6-k06">
<rect key="frame" x="44" y="0.0" width="283" height="19.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="16"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
</subviews>
</stackView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="g3V-ob-Beh">
<rect key="frame" x="74" y="11" width="285" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="duA-YV-hxb">
<rect key="frame" x="74" y="40.5" width="285" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<constraints>
<constraint firstAttribute="trailingMargin" secondItem="g3V-ob-Beh" secondAttribute="trailing" id="5x5-OO-tGl"/>
<constraint firstItem="duA-YV-hxb" firstAttribute="bottom" secondItem="ikP-4Y-6aq" secondAttribute="bottom" id="7Sv-Ps-r8I"/>
<constraint firstItem="Kky-Bg-S4i" firstAttribute="top" secondItem="ikP-4Y-6aq" secondAttribute="bottom" constant="12" id="7bK-4F-OwA"/>
<constraint firstItem="ikP-4Y-6aq" firstAttribute="leading" secondItem="0DZ-Ef-oop" secondAttribute="leadingMargin" id="A2j-yU-xIb"/>
<constraint firstItem="g3V-ob-Beh" firstAttribute="top" secondItem="0DZ-Ef-oop" secondAttribute="topMargin" id="G1Z-4N-52z"/>
<constraint firstItem="ikP-4Y-6aq" firstAttribute="top" secondItem="0DZ-Ef-oop" secondAttribute="topMargin" id="eYo-yG-JOh"/>
<constraint firstAttribute="trailingMargin" secondItem="duA-YV-hxb" secondAttribute="trailing" id="hPk-Dx-6T2"/>
<constraint firstItem="Kky-Bg-S4i" firstAttribute="leading" secondItem="0DZ-Ef-oop" secondAttribute="leadingMargin" constant="16" id="rKM-ep-f9g"/>
<constraint firstItem="g3V-ob-Beh" firstAttribute="leading" secondItem="ikP-4Y-6aq" secondAttribute="trailing" constant="8" id="v35-UD-hUZ"/>
<constraint firstItem="duA-YV-hxb" firstAttribute="leading" secondItem="ikP-4Y-6aq" secondAttribute="trailing" constant="8" id="xvW-B7-oNG"/>
<constraint firstAttribute="bottomMargin" relation="greaterThanOrEqual" secondItem="Kky-Bg-S4i" secondAttribute="bottom" constant="12" id="y1t-7R-Mxw"/>
<constraint firstAttribute="trailingMargin" secondItem="Kky-Bg-S4i" secondAttribute="trailing" id="yyE-OF-p8N"/>
</constraints>
</tableViewCellContentView>
<connections>
<outlet property="colorView" destination="ikP-4Y-6aq" id="nqK-nC-0AH"/>
<outlet property="eyeLabel" destination="zOZ-LZ-fOe" id="BgF-k5-cbe"/>
<outlet property="eyeStack" destination="QaP-Mv-Q7C" id="iov-ud-F8K"/>
<outlet property="locationLabel" destination="RDT-Jc-osa" id="8Ok-UA-eIh"/>
<outlet property="locationStack" destination="JBc-2a-5Ah" id="v4Y-7M-bKe"/>
<outlet property="paperLabel" destination="xXb-KK-TA1" id="Dmt-zr-Uzw"/>
<outlet property="paperStack" destination="CBc-QH-2E0" id="BSV-bh-X6s"/>
<outlet property="phoneLabel" destination="rH2-Y6-k06" id="wdk-1l-XIk"/>
<outlet property="phoneStack" destination="l43-4h-vZf" id="eRE-su-AaE"/>
<outlet property="regionLabel" destination="duA-YV-hxb" id="ZZ9-rk-1gM"/>
<outlet property="titleLabel" destination="g3V-ob-Beh" id="o21-cE-dZN"/>
</connections>
</tableViewCell>
</prototypes>
<connections>
<outlet property="dataSource" destination="XR2-B3-WIs" id="Kbq-ce-lYA"/>
<outlet property="delegate" destination="XR2-B3-WIs" id="C3r-Jd-JNK"/>
</connections>
</tableView>
<navigationItem key="navigationItem" id="AsE-4X-gPN"/>
</tableViewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="lMP-rZ-rRH" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1032.8" y="196.55172413793105"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="4BM-dI-Q8H">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="qRt-V1-dwn" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="oYA-dq-gmn">
<rect key="frame" x="0.0" y="20" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="XR2-B3-WIs" kind="relationship" relationship="rootViewController" id="akm-cu-Wja"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="pEW-8H-Hht" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="93.599999999999994" y="196.55172413793105"/>
</scene>
</scenes>
<resources>
<image name="eyeIcon" width="14" height="13"/>
<image name="locationIcon" width="14" height="13"/>
<image name="paperIcon" width="14" height="13"/>
<image name="phoneIcon" width="14" height="13"/>
</resources>
</document>