Apple нередко меняет аспекты пользовательского интерфейса. Например, «системный» шрифт менялся пару раз между версиями iOS. В этом случае кажется, что положение вспомогательного изображения галочки было выровнено по левому краю в области просмотра аксессуаров (в iOS 13).
Хотя вы часто хотите ваши элементы пользовательского интерфейса должны изменяться, когда Apple вносит изменения (хороший пример - UISegmentedControl), чтобы интерфейс вашего приложения соответствовал ОС, а иногда и нет.
В этом случае, чтобы получить максимум согласованный внешний вид в iOS версиях, разумно использовать полностью настраиваемые реализации пользовательского интерфейса.
Вот пример использования PDF-файла для изображения галочки (чтобы мы могли сохранить векторное масштабирование) и его установки Render As свойство на Template Image, чтобы оно соответствовало оттенку.
Во-первых, вот как это выглядит в раскадровке:
Мы будет использовать собственный класс ячейки и переопределить его свойство accessoryType:
class CustomCheckedCell: UITableViewCell {
@IBOutlet var leftLabel: UILabel!
@IBOutlet var rightLabel: UILabel!
@IBOutlet var myAccessoryView: UIImageView!
override var accessoryType: UITableViewCell.AccessoryType {
set {
myAccessoryView.alpha = newValue == .none ? 0.0 : 1.0
}
get {
return .none
}
}
override func awakeFromNib() {
super.awakeFromNib()
// we use contrasting colors to design the cell in Storyboard
// so set all backgrounds to clear at run-time
guard let lView = leftLabel.superview, let rView = rightLabel.superview else {
return
}
[lView, rView, leftLabel, rightLabel].forEach {
$0?.backgroundColor = .clear
}
}
}
Теперь мы можем использовать значение по умолчанию cell.accessoryType = .checkmark или cell.accessoryType = .none, чтобы показать / скрыть изображение галочки без , влияющего на расположение ячейки.
* 103 4 * Вот пример класса контроллера:
class CustomCheckedCellTableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
// we can set the table view's tint color here (tint's our custom checkMark accessory)
tableView.tintColor = .red
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 30
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.accessoryType = .checkmark
}
}
override func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.accessoryType = .none
}
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cCell = tableView.dequeueReusableCell(withIdentifier: "CustomCheckedCell", for: indexPath) as! CustomCheckedCell
cCell.leftLabel.text = "Left \(indexPath.row)"
cCell.rightLabel.text = "Right \(indexPath.row)"
cCell.accessoryType = (tableView.indexPathForSelectedRow == indexPath) ? .checkmark : .none
return cCell
}
}
, и результат выглядит следующим образом:
Вот источник раскадровки :
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="KbA-Q0-LNC">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Custom Checked Cell Table View Controller-->
<scene sceneID="DAq-F3-sy8">
<objects>
<tableViewController id="qt8-QK-wnn" customClass="CustomCheckedCellTableViewController" customModule="iOS9SDK" customModuleProvider="target" sceneMemberID="viewController">
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" keyboardDismissMode="onDrag" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" id="2Gh-42-LWt">
<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="CustomCheckedCell" rowHeight="56" id="r8I-XK-VkK" customClass="CustomCheckedCell" customModule="iOS9SDK" customModuleProvider="target">
<rect key="frame" x="0.0" y="28" width="375" height="56"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="r8I-XK-VkK" id="MvA-eu-x6f">
<rect key="frame" x="0.0" y="0.0" width="375" height="56"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="mQ2-DJ-vUS">
<rect key="frame" x="16" y="0.0" width="311" height="56"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="bfe-Sh-FxV" userLabel="LView">
<rect key="frame" x="0.0" y="0.0" width="200.5" height="56"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 1" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Hhj-4f-3ME">
<rect key="frame" x="0.0" y="10" width="200.5" height="36"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.0" green="0.97680455450000003" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="Hhj-4f-3ME" firstAttribute="top" secondItem="bfe-Sh-FxV" secondAttribute="top" constant="10" id="BXa-Av-XMu"/>
<constraint firstAttribute="trailing" secondItem="Hhj-4f-3ME" secondAttribute="trailing" id="ND3-SS-NJN"/>
<constraint firstItem="Hhj-4f-3ME" firstAttribute="leading" secondItem="bfe-Sh-FxV" secondAttribute="leading" id="fhX-ir-pnY"/>
<constraint firstAttribute="bottom" secondItem="Hhj-4f-3ME" secondAttribute="bottom" constant="10" id="jCn-Ib-SDq"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ydx-kR-Ui2" userLabel="RView">
<rect key="frame" x="210.5" y="0.0" width="100.5" height="56"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 2" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vaR-rB-U1a">
<rect key="frame" x="0.0" y="10" width="100.5" height="36"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.0" green="0.97680455450000003" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="vaR-rB-U1a" firstAttribute="top" secondItem="ydx-kR-Ui2" secondAttribute="top" constant="10" id="5LB-SK-csH"/>
<constraint firstAttribute="bottom" secondItem="vaR-rB-U1a" secondAttribute="bottom" constant="10" id="ghm-bd-7PC"/>
<constraint firstAttribute="trailing" secondItem="vaR-rB-U1a" secondAttribute="trailing" id="rIn-3p-Lpj"/>
<constraint firstItem="vaR-rB-U1a" firstAttribute="leading" secondItem="ydx-kR-Ui2" secondAttribute="leading" id="z1q-yz-bd6"/>
</constraints>
</view>
</subviews>
<constraints>
<constraint firstItem="ydx-kR-Ui2" firstAttribute="width" secondItem="bfe-Sh-FxV" secondAttribute="width" multiplier="0.5" id="4h1-AF-V9L"/>
</constraints>
</stackView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="myCheckmark" translatesAutoresizingMaskIntoConstraints="NO" id="s8x-tM-09v">
<rect key="frame" x="339" y="17" width="20" height="20"/>
<constraints>
<constraint firstAttribute="width" constant="20" id="4UJ-FQ-7yW"/>
<constraint firstAttribute="width" secondItem="s8x-tM-09v" secondAttribute="height" multiplier="1:1" id="bVw-JC-DCh"/>
</constraints>
<preferredSymbolConfiguration key="preferredSymbolConfiguration" weight="semibold"/>
</imageView>
</subviews>
<constraints>
<constraint firstItem="s8x-tM-09v" firstAttribute="leading" secondItem="mQ2-DJ-vUS" secondAttribute="trailing" constant="12" id="G9K-If-FTj"/>
<constraint firstItem="mQ2-DJ-vUS" firstAttribute="top" secondItem="MvA-eu-x6f" secondAttribute="top" id="HNe-Ks-vip"/>
<constraint firstAttribute="trailingMargin" secondItem="s8x-tM-09v" secondAttribute="trailing" id="M5d-Rz-1R2"/>
<constraint firstItem="mQ2-DJ-vUS" firstAttribute="leading" secondItem="MvA-eu-x6f" secondAttribute="leadingMargin" id="RCj-FT-gww"/>
<constraint firstAttribute="bottom" secondItem="mQ2-DJ-vUS" secondAttribute="bottom" id="azO-kX-4jB"/>
<constraint firstItem="s8x-tM-09v" firstAttribute="centerY" secondItem="mQ2-DJ-vUS" secondAttribute="centerY" constant="-1" id="qpV-6I-bLK"/>
</constraints>
</tableViewCellContentView>
<connections>
<outlet property="leftLabel" destination="Hhj-4f-3ME" id="WQS-bJ-KeJ"/>
<outlet property="myAccessoryView" destination="s8x-tM-09v" id="hUo-ed-Kyz"/>
<outlet property="rightLabel" destination="vaR-rB-U1a" id="RXC-UG-g5P"/>
</connections>
</tableViewCell>
</prototypes>
<connections>
<outlet property="dataSource" destination="qt8-QK-wnn" id="aMA-fV-5cb"/>
<outlet property="delegate" destination="qt8-QK-wnn" id="S0n-bN-MLJ"/>
</connections>
</tableView>
<navigationItem key="navigationItem" id="kxZ-av-xIt"/>
</tableViewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="qxa-2p-Cxd" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1556" y="830.73463268365822"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="d0B-12-bYa">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="KbA-Q0-LNC" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="jcB-K3-ueL">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="qt8-QK-wnn" kind="relationship" relationship="rootViewController" id="rwh-Te-ifH"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="5gD-zl-juz" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="616.79999999999995" y="830.73463268365822"/>
</scene>
</scenes>
<resources>
<image name="myCheckmark" width="50" height="50"/>
</resources>
</document>
и PDF-файл для нашего пользовательского изображения галочки (я просто вставил его в несвязанный репозиторий GitHub, так как здесь мы не можем pst-файлы pdf):
https://github.com/DonMag/PDFImagePanZoom/blob/master/myCheckmark.pdf
Когда вы добавляете PDF-файл в свой каталог ресурсов, не забудьте установить Render As, Preserve Vector Data and Single Scale:
