✨[FEAT] : CollectionView

29th-WE-SOPT-iOS-Part · Oct 28, 2021 · df927f8 · df927f8
1 parent e9c7c4d
commit df927f8
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 4 deletions.
diff --git a/Seminar/29th-week3-seminar/29th-week3-seminar.xcodeproj/project.pbxproj b/Seminar/29th-week3-seminar/29th-week3-seminar.xcodeproj/project.pbxproj
@@ -13,6 +13,7 @@
 		4F819C3B272B3184008B41DD /* RankingTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4F819C39272B3184008B41DD /* RankingTableViewCell.swift */; };
 		4F819C3C272B3184008B41DD /* RankingTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = 4F819C3A272B3184008B41DD /* RankingTableViewCell.xib */; };
 		4F819C3E272B35B7008B41DD /* AppContentModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4F819C3D272B35B7008B41DD /* AppContentModel.swift */; };
+		4F819C40272B3BE2008B41DD /* RankCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4F819C3F272B3BE2008B41DD /* RankCollectionViewCell.swift */; };
 		4FEC2968272B1A9200C11738 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4FEC2967272B1A9200C11738 /* AppDelegate.swift */; };
 		4FEC296A272B1A9200C11738 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4FEC2969272B1A9200C11738 /* SceneDelegate.swift */; };
 		4FEC296C272B1A9200C11738 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4FEC296B272B1A9200C11738 /* ViewController.swift */; };
@@ -29,6 +30,7 @@
 		4F819C39272B3184008B41DD /* RankingTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RankingTableViewCell.swift; sourceTree = "<group>"; };
 		4F819C3A272B3184008B41DD /* RankingTableViewCell.xib */ = {isa = PBXFileReference; lastKnownFileType = file.xib; path = RankingTableViewCell.xib; sourceTree = "<group>"; };
 		4F819C3D272B35B7008B41DD /* AppContentModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppContentModel.swift; sourceTree = "<group>"; };
+		4F819C3F272B3BE2008B41DD /* RankCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RankCollectionViewCell.swift; sourceTree = "<group>"; };
 		4FEC2964272B1A9200C11738 /* 29th-week3-seminar.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "29th-week3-seminar.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		4FEC2967272B1A9200C11738 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		4FEC2969272B1A9200C11738 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
@@ -79,6 +81,7 @@
 				4F819C37272B30E4008B41DD /* RankingVC.swift */,
 				4F819C35272B3079008B41DD /* Practice.storyboard */,
 				4F819C39272B3184008B41DD /* RankingTableViewCell.swift */,
+				4F819C3F272B3BE2008B41DD /* RankCollectionViewCell.swift */,
 				4F819C3A272B3184008B41DD /* RankingTableViewCell.xib */,
 				4FEC296D272B1A9200C11738 /* Main.storyboard */,
 				4FEC2970272B1A9500C11738 /* Assets.xcassets */,
@@ -164,6 +167,7 @@
 				4FEC296C272B1A9200C11738 /* ViewController.swift in Sources */,
 				4FEC2968272B1A9200C11738 /* AppDelegate.swift in Sources */,
 				4FEC296A272B1A9200C11738 /* SceneDelegate.swift in Sources */,
+				4F819C40272B3BE2008B41DD /* RankCollectionViewCell.swift in Sources */,
 				4F819C38272B30E4008B41DD /* RankingVC.swift in Sources */,
 				4F819C3B272B3184008B41DD /* RankingTableViewCell.swift in Sources */,
 				4F819C3E272B35B7008B41DD /* AppContentModel.swift in Sources */,

diff --git a/Seminar/29th-week3-seminar/29th-week3-seminar/Practice.storyboard b/Seminar/29th-week3-seminar/29th-week3-seminar/Practice.storyboard
@@ -5,6 +5,7 @@
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19144"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="collection view cell content view" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -17,26 +18,79 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="-1" estimatedSectionHeaderHeight="-1" sectionFooterHeight="-1" estimatedSectionFooterHeight="-1" translatesAutoresizingMaskIntoConstraints="NO" id="Yj4-cg-bDm">
-                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
+                                <rect key="frame" x="0.0" y="164" width="414" height="698"/>
                                 <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                             </tableView>
+                            <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="eVh-9J-Qbe">
+                                <rect key="frame" x="0.0" y="44" width="414" height="120"/>
+                                <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="120" id="Tl3-Jj-fA7"/>
+                                </constraints>
+                                <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="10" id="pyD-Qm-Urk">
+                                    <size key="itemSize" width="117" height="98"/>
+                                    <size key="headerReferenceSize" width="0.0" height="0.0"/>
+                                    <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                    <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
+                                </collectionViewFlowLayout>
+                                <cells>
+                                    <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="RankCollectionViewCell" id="VHy-P7-iC7" customClass="RankCollectionViewCell" customModule="_9th_week3_seminar" customModuleProvider="target">
+                                        <rect key="frame" x="0.0" y="0.0" width="120" height="120"/>
+                                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                        <collectionViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="k4C-vz-IZz">
+                                            <rect key="frame" x="0.0" y="0.0" width="120" height="120"/>
+                                            <autoresizingMask key="autoresizingMask"/>
+                                            <subviews>
+                                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="lW4-oI-CBB">
+                                                    <rect key="frame" x="20" y="10" width="80" height="80"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="width" secondItem="lW4-oI-CBB" secondAttribute="height" multiplier="1:1" id="fN2-Dn-fiZ"/>
+                                                    </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="51k-zF-Uht">
+                                                    <rect key="frame" x="39" y="95" width="42" height="21"/>
+                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                            </subviews>
+                                            <constraints>
+                                                <constraint firstAttribute="trailing" secondItem="lW4-oI-CBB" secondAttribute="trailing" constant="20" id="9Jt-dj-hzv"/>
+                                                <constraint firstItem="lW4-oI-CBB" firstAttribute="top" secondItem="k4C-vz-IZz" secondAttribute="top" constant="10" id="9WK-ZG-sWW"/>
+                                                <constraint firstItem="lW4-oI-CBB" firstAttribute="leading" secondItem="k4C-vz-IZz" secondAttribute="leading" constant="20" id="Nef-e3-loM"/>
+                                                <constraint firstItem="51k-zF-Uht" firstAttribute="centerX" secondItem="lW4-oI-CBB" secondAttribute="centerX" id="ohE-Ma-lTU"/>
+                                                <constraint firstItem="51k-zF-Uht" firstAttribute="top" secondItem="lW4-oI-CBB" secondAttribute="bottom" constant="5" id="wKC-Pd-1vS"/>
+                                            </constraints>
+                                        </collectionViewCellContentView>
+                                        <size key="customSize" width="120" height="120"/>
+                                        <connections>
+                                            <outlet property="appIconImageView" destination="lW4-oI-CBB" id="54D-XG-M2c"/>
+                                            <outlet property="appNameLabel" destination="51k-zF-Uht" id="rTw-Gb-cNq"/>
+                                        </connections>
+                                    </collectionViewCell>
+                                </cells>
+                            </collectionView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="vDu-zF-Fre"/>
                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                         <constraints>
+                            <constraint firstItem="eVh-9J-Qbe" firstAttribute="top" secondItem="vDu-zF-Fre" secondAttribute="top" id="O0s-6Z-UhL"/>
+                            <constraint firstItem="vDu-zF-Fre" firstAttribute="trailing" secondItem="eVh-9J-Qbe" secondAttribute="trailing" id="OHb-Fb-nYi"/>
                             <constraint firstItem="vDu-zF-Fre" firstAttribute="bottom" secondItem="Yj4-cg-bDm" secondAttribute="bottom" id="b2C-ip-GXW"/>
+                            <constraint firstItem="eVh-9J-Qbe" firstAttribute="leading" secondItem="vDu-zF-Fre" secondAttribute="leading" id="bzz-Ik-xkU"/>
+                            <constraint firstItem="Yj4-cg-bDm" firstAttribute="top" secondItem="eVh-9J-Qbe" secondAttribute="bottom" id="iqu-PM-HGp"/>
                             <constraint firstItem="vDu-zF-Fre" firstAttribute="trailing" secondItem="Yj4-cg-bDm" secondAttribute="trailing" id="op4-e3-IBa"/>
-                            <constraint firstItem="Yj4-cg-bDm" firstAttribute="top" secondItem="vDu-zF-Fre" secondAttribute="top" id="sCz-OI-evP"/>
                             <constraint firstItem="Yj4-cg-bDm" firstAttribute="leading" secondItem="vDu-zF-Fre" secondAttribute="leading" id="uU8-mq-etA"/>
                         </constraints>
                     </view>
                     <connections>
+                        <outlet property="rankCollectionView" destination="eVh-9J-Qbe" id="kHI-5c-PVx"/>
                         <outlet property="rankTableView" destination="Yj4-cg-bDm" id="nLD-sQ-dAC"/>
                     </connections>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="Ief-a0-LHa" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-23" y="91"/>
+            <point key="canvasLocation" x="-23.188405797101453" y="90.401785714285708"/>
         </scene>
     </scenes>
     <resources>

diff --git a/Seminar/29th-week3-seminar/29th-week3-seminar/RankCollectionViewCell.swift b/Seminar/29th-week3-seminar/29th-week3-seminar/RankCollectionViewCell.swift
@@ -0,0 +1,21 @@
+//
+//  RankCollectionViewCell.swift
+//  29th-week3-seminar
+//
+//  Created by Noah on 2021/10/29.
+//
+
+import UIKit
+
+class RankCollectionViewCell: UICollectionViewCell {
+
+	static let identifier = "RankCollectionViewCell"
+
+	@IBOutlet weak var appNameLabel: UILabel!
+	@IBOutlet weak var appIconImageView: UIImageView!
+
+	func setData(appName: String, appImage: UIImage?) {
+		appNameLabel.text = appName
+		appIconImageView.image = appImage
+	}
+}
diff --git a/Seminar/29th-week3-seminar/29th-week3-seminar/RankingVC.swift b/Seminar/29th-week3-seminar/29th-week3-seminar/RankingVC.swift
@@ -10,6 +10,7 @@ import UIKit
 class RankingVC: UIViewController {
 
 	@IBOutlet weak var rankTableView: UITableView!
+	@IBOutlet weak var rankCollectionView: UICollectionView!
 
 	var appContentList = [AppContentData]()
 
@@ -20,6 +21,8 @@ class RankingVC: UIViewController {
 		rankTableView.separatorStyle = .none
 		rankTableView.dataSource = self
 		rankTableView.delegate = self
+		rankCollectionView.dataSource = self
+		rankCollectionView.delegate = self
     }
 
 	func registerXib() {
@@ -52,7 +55,7 @@ extension RankingVC: UITableViewDelegate {
 
 // 테이블을 만들 때 필요한 정보를 제공
 extension RankingVC: UITableViewDataSource {
-	// section 마다 몇개의 row를 넣어야하는지 지정하는 함수
+	// section 마다 몇개의 row를 넣어야하는지 지정하는 메소드
 	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 		return appContentList.count
 	}
@@ -66,3 +69,41 @@ extension RankingVC: UITableViewDataSource {
 		return cell
 	}
 }
+
+extension RankingVC: UICollectionViewDataSource {
+	// section 마다 몇 개의 아이템이 들어가는지 결정하는 메소드
+	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+		return appContentList.count
+	}
+
+	// tableView와 비슷하게 해당 indexPath에 어떤 cell 데이터를 넣을지 결정하는 메소드
+	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+		guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: RankCollectionViewCell.identifier, for: indexPath) as? RankCollectionViewCell else { return UICollectionViewCell() }
+
+		cell.setData(appName: appContentList[indexPath.row].appName, appImage: appContentList[indexPath.row].makeImage())
+
+		return cell
+	}
+}
+
+extension RankingVC: UICollectionViewDelegateFlowLayout {
+	// item size(width: 100, height: 100)
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+		return CGSize(width: 100, height: 100)
+	}
+
+	// content 외부에 감쌀 inset이 없기 때문에 (0, 0, 0, 0)와 같은 의미인 UIEdgeInset.zero를 넣어준다.
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+		return UIEdgeInsets.zero
+	}
+
+	// cell간의 상,하 간격이 없기 때문에 0으로 지정
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+		return 0
+	}
+
+	// cell간의 좌,우 간격이 없기 때문에 0으로 지정
+	func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+		return 0
+	}
+}