Skip to content

Commit

Permalink
feat: UIPageViewController를 사용하여 ThumbnailsPageViewController 구현
Browse files Browse the repository at this point in the history 
1. 스크롤뷰에 containerView의 frame을 사용하여 ThumbnailsPageViewController를 subview로 추가
2. ThumbnailsPageViewController는 viewController를 page 전환해주기 때문에, 더비 VC를 랜덤 색상으로 제공된 썸네일 이미지 URL 개수에 맞게 생성하여 표시
3. Before, After 페이지 스와이핑이 잘 작동하도록 구현, firstIndex 메소드 사용

Issue: #38
  • Loading branch information
@corykim0829
corykim0829 committed Apr 27, 2020
1 parent 3f84255 commit 64b6521
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 18 deletions.
4 changes: 4 additions & 0 deletions ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
38E0AF692452FBE600A26CB3 /* ProductList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E0AF682452FBE600A26CB3 /* ProductList.swift */; };
38E2FCD12456F4B700817780 /* DetailContainer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD02456F4B700817780 /* DetailContainer.swift */; };
38E2FCD32456F4E300817780 /* Detail.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD22456F4E300817780 /* Detail.swift */; };
38E2FCD52457456400817780 /* ThumbnailsPageViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */; };
/* End PBXBuildFile section */

/* Begin PBXFileReference section */
Expand Down Expand Up @@ -67,6 +68,7 @@
38E0AF682452FBE600A26CB3 /* ProductList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductList.swift; sourceTree = "<group>"; };
38E2FCD02456F4B700817780 /* DetailContainer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DetailContainer.swift; sourceTree = "<group>"; };
38E2FCD22456F4E300817780 /* Detail.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Detail.swift; sourceTree = "<group>"; };
38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ThumbnailsPageViewController.swift; sourceTree = "<group>"; };
F73413738BBF5BACBA69C851 /* Pods_SideDishApp.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_SideDishApp.framework; sourceTree = BUILT_PRODUCTS_DIR; };
/* End PBXFileReference section */

Expand Down Expand Up @@ -172,6 +174,7 @@
children = (
388C14AE244E936E003323F2 /* SideDishProductsViewController.swift */,
381D92F9245174C30067C07A /* DetailViewController.swift */,
38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */,
);
path = ViewControllers;
sourceTree = "<group>";
Expand Down Expand Up @@ -354,6 +357,7 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
38E2FCD52457456400817780 /* ThumbnailsPageViewController.swift in Sources */,
388C14AF244E936E003323F2 /* SideDishProductsViewController.swift in Sources */,
3868CC4F244F18E3008DEC81 /* OriginalPriceLabel.swift in Sources */,
38E2FCD32456F4E300817780 /* Detail.swift in Sources */,
Expand Down
39 changes: 21 additions & 18 deletions ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,22 +162,22 @@
<rect key="frame" x="0.0" y="44" width="414" height="852"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IcD-Vi-BkJ">
<rect key="frame" x="0.0" y="0.0" width="414" height="2633.5"/>
<rect key="frame" x="0.0" y="0.0" width="414" height="4454"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="pON-By-ZtW">
<rect key="frame" x="4" y="378.5" width="406" height="21.5"/>
<rect key="frame" x="4" y="434" width="406" height="21.5"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="18"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="description" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="jBF-uC-Te4">
<rect key="frame" x="4" y="404" width="406" height="20.5"/>
<rect key="frame" x="4" y="459.5" width="406" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" name="subtitle-gray"/>
<nil key="highlightedColor"/>
</label>
<stackView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="GFu-Sf-wT3" userLabel="priceLabelsStackView">
<rect key="frame" x="156" y="432.5" width="102" height="20.5"/>
<rect key="frame" x="156" y="488" width="102" height="20.5"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="9,000" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uvk-9T-IrV">
<rect key="frame" x="0.0" y="0.0" width="45" height="20.5"/>
Expand All @@ -194,14 +194,14 @@
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lOs-Vc-jyC">
<rect key="frame" x="0.0" y="469" width="414" height="8"/>
<rect key="frame" x="0.0" y="524.5" width="414" height="8"/>
<color key="backgroundColor" name="detail-boundary-view"/>
<constraints>
<constraint firstAttribute="height" constant="8" id="6vF-9R-Lgo"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="XR0-pm-cLi">
<rect key="frame" x="16" y="501" width="52" height="64"/>
<rect key="frame" x="16" y="556.5" width="52" height="64"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="적립금" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="a6x-Ol-w7V">
<rect key="frame" x="0.0" y="0.0" width="52" height="18"/>
Expand All @@ -224,57 +224,60 @@
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kf6-Po-Aof">
<rect key="frame" x="0.0" y="589" width="414" height="8"/>
<rect key="frame" x="0.0" y="644.5" width="414" height="8"/>
<color key="backgroundColor" name="detail-boundary-view"/>
<constraints>
<constraint firstAttribute="height" constant="8" id="28p-DI-cGP"/>
</constraints>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="이렇게 만나요" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="I1X-nJ-a80">
<rect key="frame" x="163.5" y="621" width="87" height="19.5"/>
<rect key="frame" x="163.5" y="676.5" width="87" height="19.5"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="16"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jm3-Gn-qq7">
<rect key="frame" x="0.0" y="0.0" width="414" height="358.5"/>
<rect key="frame" x="0.0" y="0.0" width="414" height="414"/>
<color key="backgroundColor" systemColor="systemOrangeColor" red="1" green="0.58431372550000005" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="jm3-Gn-qq7" secondAttribute="height" multiplier="1:1" id="yTQ-HX-h8G"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="VKA-Xn-BtL" userLabel="imageStackView">
<rect key="frame" x="0.0" y="656.5" width="414" height="1765"/>
<rect key="frame" x="0.0" y="712" width="414" height="3530"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test1" translatesAutoresizingMaskIntoConstraints="NO" id="G2b-19-pjt">
<rect key="frame" x="0.0" y="0.0" width="414" height="324"/>
<rect key="frame" x="0.0" y="0.0" width="414" height="648"/>
</imageView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test2" translatesAutoresizingMaskIntoConstraints="NO" id="Ha6-Qg-gJB">
<rect key="frame" x="0.0" y="324" width="414" height="720.5"/>
<rect key="frame" x="0.0" y="648" width="414" height="1441"/>
</imageView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test2" translatesAutoresizingMaskIntoConstraints="NO" id="b56-85-mef">
<rect key="frame" x="0.0" y="1044.5" width="414" height="720.5"/>
<rect key="frame" x="0.0" y="2089" width="414" height="1441"/>
</imageView>
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rrn-1c-IuP" userLabel="bottomView">
<rect key="frame" x="0.0" y="2445.5" width="414" height="100"/>
<rect key="frame" x="0.0" y="4266" width="414" height="100"/>
<color key="backgroundColor" name="detail-boundary-view"/>
<constraints>
<constraint firstAttribute="height" constant="100" id="hxl-FD-Pr0"/>
</constraints>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="적립금" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="CHt-zc-XEf">
<rect key="frame" x="80" y="501.5" width="318" height="17"/>
<rect key="frame" x="80" y="557" width="318" height="17"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" name="subtitle-gray"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="배송비" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Qey-Ax-Oni">
<rect key="frame" x="80" y="524.5" width="318" height="17"/>
<rect key="frame" x="80" y="580" width="318" height="17"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" name="subtitle-gray"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="배송정보" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xCu-2D-naZ">
<rect key="frame" x="80" y="548" width="318" height="17"/>
<rect key="frame" x="80" y="603.5" width="318" height="17"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" name="subtitle-gray"/>
<nil key="highlightedColor"/>
Expand Down Expand Up @@ -366,7 +369,6 @@
<constraint firstItem="y0Z-HS-arB" firstAttribute="trailing" secondItem="pBy-LX-l1h" secondAttribute="trailing" id="ikQ-JO-SQI"/>
<constraint firstAttribute="bottom" secondItem="y0Z-HS-arB" secondAttribute="bottom" id="jzm-W1-S0j"/>
<constraint firstItem="y0Z-HS-arB" firstAttribute="top" secondItem="pBy-LX-l1h" secondAttribute="top" id="p6v-LS-RYM"/>
<constraint firstItem="jm3-Gn-qq7" firstAttribute="height" secondItem="V15-Yv-HQC" secondAttribute="height" multiplier="0.4" id="pqz-d0-dBL"/>
<constraint firstItem="tsz-gD-jVY" firstAttribute="leading" secondItem="pBy-LX-l1h" secondAttribute="leading" id="rqV-2l-G6M"/>
</constraints>
<viewLayoutGuide key="safeArea" id="pBy-LX-l1h"/>
Expand All @@ -379,6 +381,7 @@
<outlet property="gradientLayerContainerView" destination="tsz-gD-jVY" id="Nt1-Gg-aNy"/>
<outlet property="pointLabel" destination="CHt-zc-XEf" id="r2v-H9-VWJ"/>
<outlet property="priceLabelsStackView" destination="GFu-Sf-wT3" id="keQ-bu-Q49"/>
<outlet property="scrollView" destination="y0Z-HS-arB" id="6MG-AY-1df"/>
<outlet property="titleLabel" destination="pON-By-ZtW" id="Uax-nT-meh"/>
</connections>
</viewController>
Expand Down
17 changes: 17 additions & 0 deletions ios/SideDishApp/SideDishApp/ViewControllers/DetailViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ class DetailViewController: UIViewController {

static let identifier = "DetailViewController"

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var descriptionLabel: UILabel!
@IBOutlet weak var priceLabelsStackView: UIStackView!
Expand All @@ -22,18 +23,34 @@ class DetailViewController: UIViewController {

@IBOutlet weak var gradientLayerContainerView: UIView!

let thumbnailPageViewController = ThumbnailsPageViewController()

private let backButtonColor: UIColor? = UIColor(named: "darkGray-white")
private let defaultBackgroundColor: UIColor? = UIColor(named: "default-bg")
private let clearColor: UIColor? = UIColor(named: "detail-clear")

override func viewDidLoad() {
super.viewDidLoad()

configureThumbnailPageViewController()
configureNavigationBar()
configureGradientBackgroundView()
}

override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()

let thumbnailPageView = thumbnailPageViewController.view!
thumbnailPageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.width)
}

private func configureThumbnailPageViewController() {
let thumbnailPageView = thumbnailPageViewController.view!
scrollView.addSubview(thumbnailPageView)
}

func configureDetailViewController(title: String, with detail: Detail) {
thumbnailPageViewController.configureImageURLs(detail.thumbnailImageURLs)
titleLabel.text = title
descriptionLabel.text = detail.description
pointLabel.text = detail.point
Expand Down
Loading

0 comments on commit 64b6521

Please sign in to comment.