Чтобы получить желаемый макет, используйте прототип ячейки (примечание: я вырезал изображения "icon" из ваших опубликованных изображений, чтобы они были очень низкими) ...
![enter image description here](https://i.stack.imgur.com/2WYiQ.png)
Цветное представление, метка заголовка и метка региона выложены довольно стандартно.
Ниже это вертикальная Stack View
.Выравнивание: Fill, Распределение: Fill, Spacing: 8. Он ограничен немного дальше слева, верх - 12 пунктов от низа цветного представления, а трейлинг - 0 (на полях).Нет ограничений по высоте.Дно ограничено >= 8
снизу представления содержимого (это позволяет избежать предупреждений об ограничениях раскадровки).
Каждая «строка» в этом представлении вертикального стека является представлением горизонтального стека.Выравнивание: сверху, распределение: заливка, интервал: 20 (это расстояние между видом изображения значка и левой частью надписи).
Значения imageViews ограничены шириной и высотой как 24 пункта (I ')Я думаю, по вашему размеру - отрегулируйте при необходимости).
Метка для "Eye Stack" установлена на 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?
}
Класс контроллера таблиц довольно прост:
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
}
}
Как видите, там не так много всего происходит.Заполните поля и скройте все «строки», которые не имеют связанных свойств.
Результат:
![enter image description here](https://i.stack.imgur.com/TjHaO.png)
![enter image description here](https://i.stack.imgur.com/9X2jW.png)
Вот источник раскадровки, который я использовал.Создайте новую раскадровку, используйте 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>