Skip to content

Commit

Permalink
feat: 상세 이미지 네트워크 요청 및 업데이트
Browse files Browse the repository at this point in the history
상세 이미지를 담을 stackView에 대한 커스텀 클래스를 생성하여 구현
stackView 내에서 이미지를 순서대로 업데이트 해주기 위해서 빈 imageView를 담게 구현

Issue: #38
  • Loading branch information
corykim0829 committed Apr 28, 2020
1 parent 244e6ad commit 92349cd
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 18 deletions.
4 changes: 4 additions & 0 deletions ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
388C14B7244E9370003323F2 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 388C14B5244E9370003323F2 /* LaunchScreen.storyboard */; };
388C14C2244EBD53003323F2 /* ProductCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 388C14C1244EBD53003323F2 /* ProductCell.swift */; };
38A6630F2455C8DD00E15F88 /* ProductHeaderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38A6630E2455C8DD00E15F88 /* ProductHeaderView.swift */; };
38BB4B072458102300B86451 /* DetailImagesStackView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38BB4B062458102300B86451 /* DetailImagesStackView.swift */; };
38D7B8FB2451BCCD00F71799 /* OrderButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38D7B8FA2451BCCD00F71799 /* OrderButton.swift */; };
38E0AF632452FB4300A26CB3 /* Product.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E0AF622452FB4300A26CB3 /* Product.swift */; };
38E0AF652452FB5900A26CB3 /* Products.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E0AF642452FB5900A26CB3 /* Products.swift */; };
Expand Down Expand Up @@ -63,6 +64,7 @@
388C14B8244E9370003323F2 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
388C14C1244EBD53003323F2 /* ProductCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductCell.swift; sourceTree = "<group>"; };
38A6630E2455C8DD00E15F88 /* ProductHeaderView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductHeaderView.swift; sourceTree = "<group>"; };
38BB4B062458102300B86451 /* DetailImagesStackView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DetailImagesStackView.swift; sourceTree = "<group>"; };
38D7B8FA2451BCCD00F71799 /* OrderButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderButton.swift; sourceTree = "<group>"; };
38E0AF622452FB4300A26CB3 /* Product.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Product.swift; sourceTree = "<group>"; };
38E0AF642452FB5900A26CB3 /* Products.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Products.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -204,6 +206,7 @@
isa = PBXGroup;
children = (
38D7B8FA2451BCCD00F71799 /* OrderButton.swift */,
38BB4B062458102300B86451 /* DetailImagesStackView.swift */,
);
path = Detail;
sourceTree = "<group>";
Expand Down Expand Up @@ -370,6 +373,7 @@
3868CC55244F1E89008DEC81 /* UIStackView+Extension.swift in Sources */,
38A6630F2455C8DD00E15F88 /* ProductHeaderView.swift in Sources */,
3868CC632450656E008DEC81 /* CategoryLabel.swift in Sources */,
38BB4B072458102300B86451 /* DetailImagesStackView.swift in Sources */,
3868CC61245039F6008DEC81 /* BadgeLabelsStackView.swift in Sources */,
3868CC5F24501BAF008DEC81 /* BadgeLabel.swift in Sources */,
38E2FCD12456F4B700817780 /* DetailContainer.swift in Sources */,
Expand Down
21 changes: 4 additions & 17 deletions ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
<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="2686.5"/>
<rect key="frame" x="0.0" y="0.0" width="414" height="921.5"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" minimumScaleFactor="0.80000000000000004" translatesAutoresizingMaskIntoConstraints="NO" id="pON-By-ZtW">
<rect key="frame" x="12" y="434" width="390" height="21.5"/>
Expand Down Expand Up @@ -242,22 +242,11 @@
<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="709.5" width="414" height="1765"/>
<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"/>
</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"/>
</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"/>
</imageView>
</subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="VKA-Xn-BtL" userLabel="imageStackView" customClass="DetailImagesStackView" customModule="SideDishApp" customModuleProvider="target">
<rect key="frame" x="0.0" y="709.5" width="414" height="0.0"/>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rrn-1c-IuP" userLabel="bottomView">
<rect key="frame" x="0.0" y="2498.5" width="414" height="100"/>
<rect key="frame" x="0.0" y="733.5" width="414" height="100"/>
<color key="backgroundColor" name="detail-boundary-view"/>
<constraints>
<constraint firstAttribute="height" constant="100" id="hxl-FD-Pr0"/>
Expand Down Expand Up @@ -416,8 +405,6 @@
</scene>
</scenes>
<resources>
<image name="test1" width="577.5" height="324"/>
<image name="test2" width="480" height="720.5"/>
<namedColor name="badge-event">
<color red="0.63200002908706665" green="0.46000000834465027" blue="0.72899997234344482" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
</namedColor>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class DetailViewController: UIViewController {
@IBOutlet weak var pointLabel: UILabel!
@IBOutlet weak var deliveryFeeLabel: UILabel!
@IBOutlet weak var deliveryInfoLabel: UILabel!
@IBOutlet weak var detailImagesStackView: UIStackView!
@IBOutlet weak var detailImagesStackView: DetailImagesStackView!

@IBOutlet weak var gradientLayerContainerView: UIView!

Expand Down Expand Up @@ -56,12 +56,17 @@ class DetailViewController: UIViewController {
pointLabel.text = detail.point
deliveryFeeLabel.text = detail.deliveryFee
deliveryInfoLabel.text = detail.deliveryInfo
detailImagesStackView.configureImageViews(count: detail.detailImageURLs.count)
}

func updateThumbnailImage(at index: Int, image: UIImage?) {
thumbnailPageViewController.updateThumbnailImage(at: index, image: image)
}

func updateDetailImagesStackView(at index: Int, image: UIImage?) {
detailImagesStackView.updateDetailImages(at: index, image: image)
}

private func configureGradientBackgroundView() {
let gradientLayer = CAGradientLayer()
gradientLayerContainerView.backgroundColor = .clear
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,21 @@ extension SideDishProductsViewController: UITableViewDelegate {
}
}
}

// 상세 이미지 네트워크 요청 및 업데이트
detail.detailImageURLs.enumerated().forEach { (index, url) in
self.networkManager.fetchImage(from: url) { (result) in
switch result {
case .success(let data):
let image = UIImage(data: data)
DispatchQueue.main.async {
detailViewController.updateDetailImagesStackView(at: index, image: image)
}
case .failure(_):
break
}
}
}
}
navigationController?.pushViewController(detailViewController, animated: true)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
//
// DetailImagesStackView.swift
// SideDishApp
//
// Created by Cory Kim on 2020/04/28.
// Copyright © 2020 corykim0829. All rights reserved.
//

import UIKit

class DetailImagesStackView: UIStackView {

var imageViews: [UIImageView]!

override init(frame: CGRect) {
super.init(frame: frame)
}

required init(coder: NSCoder) {
super.init(coder: coder)
}

func configureImageViews(count: Int) {
imageViews = Array<UIImageView>.init(repeating: UIImageView(), count: count)
imageViews.forEach { _ in
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.backgroundColor = .red
imageView.clipsToBounds = true
addArrangedSubview(imageView)
}
}

func updateDetailImages(at index: Int, image: UIImage?) {
guard let image = image else { return }
let imageView = arrangedSubviews[index] as! UIImageView
let imageRatio = image.size.height / image.size.width
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.heightAnchor.constraint(equalToConstant: frame.width * imageRatio).isActive = true
imageView.image = image
}
}

0 comments on commit 92349cd

Please sign in to comment.