Add CustomCell example

backslash-f · backslash-f · commit 5ad05ce24a2a · 2019-03-03T18:55:06.000+01:00
- https://stackoverflow.com/questions/54970666/add-custom-class-to-uiview-in-the-uitableview
diff --git a/Resources/Screenshots/customCellExample.gif b/Resources/Screenshots/customCellExample.gif
diff --git a/Xcode/PaintCodeTests.xcodeproj/project.pbxproj b/Xcode/PaintCodeTests.xcodeproj/project.pbxproj
@@ -12,6 +12,8 @@
 		071D1DC021FE217200A096F0 /* CircleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 071D1DBF21FE217200A096F0 /* CircleView.swift */; };
 		071D1DC221FE218300A096F0 /* CircleViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 071D1DC121FE218300A096F0 /* CircleViewController.swift */; };
 		073DC50621FE290E009B6ECE /* README.md in Resources */ = {isa = PBXBuildFile; fileRef = 073DC50521FE290E009B6ECE /* README.md */; };
+		ED29A579222C44DB00493720 /* TableViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = ED29A578222C44DB00493720 /* TableViewController.swift */; };
+		ED29A57B222C474C00493720 /* CustomCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = ED29A57A222C474C00493720 /* CustomCell.swift */; };
 		ED2E0C3F213DD8110029BC7D /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ED2E0C3E213DD8110029BC7D /* AppDelegate.swift */; };
 		ED2E0C46213DD8140029BC7D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = ED2E0C45213DD8140029BC7D /* Assets.xcassets */; };
 		ED2E0C59213DD8E20029BC7D /* ClockHandViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = ED2E0C56213DD8E20029BC7D /* ClockHandViewController.swift */; };
@@ -30,6 +32,8 @@
 		071D1DBF21FE217200A096F0 /* CircleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleView.swift; sourceTree = "<group>"; };
 		071D1DC121FE218300A096F0 /* CircleViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleViewController.swift; sourceTree = "<group>"; };
 		073DC50521FE290E009B6ECE /* README.md */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = net.daringfireball.markdown; name = README.md; path = ../README.md; sourceTree = "<group>"; };
+		ED29A578222C44DB00493720 /* TableViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewController.swift; sourceTree = "<group>"; };
+		ED29A57A222C474C00493720 /* CustomCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomCell.swift; sourceTree = "<group>"; };
 		ED2E0C3B213DD8110029BC7D /* PaintCodeTests.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = PaintCodeTests.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED2E0C3E213DD8110029BC7D /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		ED2E0C45213DD8140029BC7D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
@@ -96,6 +100,7 @@
 			children = (
 				071D1DBF21FE217200A096F0 /* CircleView.swift */,
 				ED2E0C5E213DD8F60029BC7D /* ClockHandView.swift */,
+				ED29A57A222C474C00493720 /* CustomCell.swift */,
 				071D1DBB21FE1C4400A096F0 /* StarView.swift */,
 				ED2E0C5D213DD8F60029BC7D /* TextButton.swift */,
 				ED2E0C5C213DD8F60029BC7D /* TreeView.swift */,
@@ -110,6 +115,7 @@
 				ED2E0C56213DD8E20029BC7D /* ClockHandViewController.swift */,
 				ED2E0C58213DD8E20029BC7D /* MainViewController.swift */,
 				071D1DBD21FE1C5100A096F0 /* StarViewController.swift */,
+				ED29A578222C44DB00493720 /* TableViewController.swift */,
 				ED2E0C57213DD8E20029BC7D /* TreeViewController.swift */,
 			);
 			path = Controller;
@@ -208,6 +214,7 @@
 			files = (
 				ED2E0C67213DD9100029BC7D /* StyleKit.swift in Sources */,
 				ED2E0C60213DD8F70029BC7D /* TextButton.swift in Sources */,
+				ED29A579222C44DB00493720 /* TableViewController.swift in Sources */,
 				071D1DC221FE218300A096F0 /* CircleViewController.swift in Sources */,
 				ED2E0C5F213DD8F70029BC7D /* TreeView.swift in Sources */,
 				ED2E0C59213DD8E20029BC7D /* ClockHandViewController.swift in Sources */,
@@ -217,6 +224,7 @@
 				ED2E0C5A213DD8E20029BC7D /* TreeViewController.swift in Sources */,
 				ED2E0C3F213DD8110029BC7D /* AppDelegate.swift in Sources */,
 				071D1DBC21FE1C4400A096F0 /* StarView.swift in Sources */,
+				ED29A57B222C474C00493720 /* CustomCell.swift in Sources */,
 				ED2E0C5B213DD8E20029BC7D /* MainViewController.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
diff --git a/Xcode/PaintCodeTests/Controller/TableViewController.swift b/Xcode/PaintCodeTests/Controller/TableViewController.swift
@@ -0,0 +1,47 @@
+//
+//  TableViewController.swift
+//  PaintCodeTests
+//
+//  Created by Fernando Fernandes on 03.03.19.
+//  Copyright © 2019 backslash-f. All rights reserved.
+//
+
+import UIKit
+
+class TableViewController: UITableViewController {
+
+    // MARK: - Table view data source
+
+    override func numberOfSections(in tableView: UITableView) -> Int {
+        return 1
+    }
+
+    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return 40
+    }
+
+    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        var cell = UITableViewCell()
+
+        if let customCell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as? CustomCell {
+            cell = customCell
+
+            // Icon from PaintCode. In this example I'll be using two different icons, that's why I first create this
+            // placeholder `UIView`.
+            var icon = UIView(frame: customCell.iconView.frame)
+
+            if indexPath.row < 20 {
+                icon = StarView(frame: icon.frame)
+                customCell.label.text = "Star"
+
+            } else {
+                icon = TreeView(frame: icon.frame)
+                customCell.label.text = "Tree"
+            }
+
+            customCell.iconView.addSubview(icon)
+        }
+
+        return cell
+    }
+}
diff --git a/Xcode/PaintCodeTests/Storyboard/Main.storyboard b/Xcode/PaintCodeTests/Storyboard/Main.storyboard
@@ -22,43 +22,50 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="u7B-jc-ZcQ">
-                                <rect key="frame" x="100" y="218.5" width="175" height="230"/>
+                                <rect key="frame" x="82.5" y="193.5" width="210" height="280"/>
                                 <subviews>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="God-qr-vyq">
-                                        <rect key="frame" x="42" y="0.0" width="91" height="30"/>
+                                        <rect key="frame" x="59.5" y="0.0" width="91" height="30"/>
                                         <state key="normal" title="Test Collision"/>
                                         <connections>
                                             <segue destination="3o9-9N-m9o" kind="show" id="IOS-ev-5Bc"/>
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="4c0-ea-c0S">
-                                        <rect key="frame" x="17" y="50" width="141" height="30"/>
+                                        <rect key="frame" x="34.5" y="50" width="141" height="30"/>
                                         <state key="normal" title="Test Dynamic Colors"/>
                                         <connections>
                                             <segue destination="du8-3p-Jqr" kind="show" id="g8w-IC-W2P"/>
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="S8B-IS-yMB" userLabel="Test Button Text">
-                                        <rect key="frame" x="31.5" y="100" width="112" height="30"/>
+                                        <rect key="frame" x="49" y="100" width="112" height="30"/>
                                         <state key="normal" title="Test Button Text"/>
                                         <connections>
                                             <segue destination="raa-v1-uIT" kind="show" id="9f3-lb-kYd"/>
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="AAB-GF-idZ" userLabel="Test Dynamic Stroke">
-                                        <rect key="frame" x="17" y="150" width="141" height="30"/>
+                                        <rect key="frame" x="34.5" y="150" width="141" height="30"/>
                                         <state key="normal" title="Test Dynamic Stroke"/>
                                         <connections>
                                             <segue destination="aVr-dL-ZLL" kind="show" id="a7m-yb-h9X"/>
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="xzB-Xq-X3N" userLabel="Test Clockwise Animation">
-                                        <rect key="frame" x="0.0" y="200" width="175" height="30"/>
+                                        <rect key="frame" x="17.5" y="200" width="175" height="30"/>
                                         <state key="normal" title="Test Clockwise Animation"/>
                                         <connections>
                                             <segue destination="thN-Zr-RuG" kind="show" id="n0q-TJ-gBF"/>
                                         </connections>
                                     </button>
+                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="LOh-O9-da8">
+                                        <rect key="frame" x="0.0" y="250" width="210" height="30"/>
+                                        <state key="normal" title="Test Custom Cell in Table View"/>
+                                        <connections>
+                                            <segue destination="gkV-ZT-87H" kind="show" id="Jsw-La-eaV"/>
+                                        </connections>
+                                    </button>
                                 </subviews>
                             </stackView>
                         </subviews>
@@ -99,7 +106,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="6L5-us-mKN" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="3598" y="334"/>
+            <point key="canvasLocation" x="3588" y="-199"/>
         </scene>
         <!--Star View Controller-->
         <scene sceneID="MVv-sm-We0">
@@ -162,6 +169,63 @@
             </objects>
             <point key="canvasLocation" x="2665" y="922"/>
         </scene>
+        <!--Table View Controller-->
+        <scene sceneID="bNs-BX-GeT">
+            <objects>
+                <tableViewController id="gkV-ZT-87H" customClass="TableViewController" customModule="PaintCodeTests" 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="mtp-vd-3Tj">
+                        <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="customCell" id="3bu-ol-apd" customClass="CustomCell" customModule="PaintCodeTests" customModuleProvider="target">
+                                <rect key="frame" x="0.0" y="28" width="375" height="44"/>
+                                <autoresizingMask key="autoresizingMask"/>
+                                <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="3bu-ol-apd" id="eTE-bj-GCn">
+                                    <rect key="frame" x="0.0" y="0.0" width="375" height="43.5"/>
+                                    <autoresizingMask key="autoresizingMask"/>
+                                    <subviews>
+                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="x8Z-o1-aJn">
+                                            <rect key="frame" x="10" y="2" width="40" height="40"/>
+                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                            <constraints>
+                                                <constraint firstAttribute="width" constant="40" id="2T4-tw-W5R"/>
+                                                <constraint firstAttribute="height" constant="40" id="6P5-57-gJC"/>
+                                            </constraints>
+                                        </view>
+                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="G2I-Km-kja">
+                                            <rect key="frame" x="70" y="13" width="279" height="20.5"/>
+                                            <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                            <nil key="textColor"/>
+                                            <nil key="highlightedColor"/>
+                                        </label>
+                                    </subviews>
+                                    <constraints>
+                                        <constraint firstItem="x8Z-o1-aJn" firstAttribute="leading" secondItem="eTE-bj-GCn" secondAttribute="leading" constant="10" id="45S-gp-5Du"/>
+                                        <constraint firstItem="G2I-Km-kja" firstAttribute="top" secondItem="eTE-bj-GCn" secondAttribute="topMargin" constant="2" id="At3-3a-UDn"/>
+                                        <constraint firstItem="x8Z-o1-aJn" firstAttribute="top" secondItem="eTE-bj-GCn" secondAttribute="top" constant="2" id="CD5-yN-hov"/>
+                                        <constraint firstItem="G2I-Km-kja" firstAttribute="leading" secondItem="x8Z-o1-aJn" secondAttribute="trailing" constant="20" id="asR-AI-xH5"/>
+                                        <constraint firstItem="G2I-Km-kja" firstAttribute="bottom" secondItem="eTE-bj-GCn" secondAttribute="bottomMargin" constant="2" id="cff-CZ-qIm"/>
+                                        <constraint firstAttribute="trailingMargin" secondItem="G2I-Km-kja" secondAttribute="trailing" constant="10" id="ctK-u5-nIz"/>
+                                        <constraint firstAttribute="bottom" secondItem="x8Z-o1-aJn" secondAttribute="bottom" constant="2" id="nCe-jf-BdC"/>
+                                    </constraints>
+                                </tableViewCellContentView>
+                                <connections>
+                                    <outlet property="iconView" destination="x8Z-o1-aJn" id="QNb-sw-31N"/>
+                                    <outlet property="label" destination="G2I-Km-kja" id="WK7-xC-dao"/>
+                                </connections>
+                            </tableViewCell>
+                        </prototypes>
+                        <connections>
+                            <outlet property="dataSource" destination="gkV-ZT-87H" id="klI-dJ-ck1"/>
+                            <outlet property="delegate" destination="gkV-ZT-87H" id="DWq-D2-pfU"/>
+                        </connections>
+                    </tableView>
+                </tableViewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="aeR-bF-2mP" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="3588" y="922"/>
+        </scene>
         <!--Navigation Controller-->
         <scene sceneID="xlj-i8-25u">
             <objects>
diff --git a/Xcode/PaintCodeTests/View/CircleView.swift b/Xcode/PaintCodeTests/View/CircleView.swift
@@ -16,7 +16,7 @@ protocol CircleViewDelegate {
     func didCompleteAnimation()
 }
 
-@IBDesignable class CircleView: UIView {
+class CircleView: UIView {
     
     // MARK: - Properties
 
diff --git a/Xcode/PaintCodeTests/View/CustomCell.swift b/Xcode/PaintCodeTests/View/CustomCell.swift
@@ -0,0 +1,17 @@
+//
+//  CustomCell.swift
+//  PaintCodeTests
+//
+//  Created by Fernando Fernandes on 03.03.19.
+//  Copyright © 2019 backslash-f. All rights reserved.
+//
+
+import UIKit
+
+class CustomCell: UITableViewCell {
+
+    // MARK: - Properties
+
+    @IBOutlet weak var iconView: UIView!
+    @IBOutlet weak var label: UILabel!
+}

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ protocol CircleViewDelegate {`
`16`	`16`	`func didCompleteAnimation()`
`17`	`17`	`}`
`18`	`18`
`19`		`-@IBDesignable class CircleView: UIView {`
	`19`	`+class CircleView: UIView {`
`20`	`20`
`21`	`21`	`// MARK: - Properties`
`22`	`22`