-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feat] #15 - GoalRewardInfoVC UI 구현 #17
The head ref may contain hidden characters: "feat/#15-GoalRewardInfoVC-UI-\uAD6C\uD604"
Changes from 5 commits
83f9d87
b0697c8
9e21434
a0ba27d
a0efaa9
a32508c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
// | ||
// GoalRewardInfoCVC.swift | ||
// Runnect-iOS | ||
// | ||
// Created by 몽이 누나 on 2023/01/02. | ||
// | ||
|
||
import UIKit | ||
import SnapKit | ||
import Then | ||
|
||
// MARK: - GoalRewardInfoCVC | ||
|
||
class GoalRewardInfoCVC: UICollectionViewCell { | ||
|
||
// MARK: - Identifier | ||
|
||
static let identifier = "GoalRewardInfoCVC" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이거 이번에 추가한 utils중에 className을 사용하면 필요없어요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 헐 |
||
|
||
// MARK: - UI Components | ||
|
||
private let containerView = UIView() | ||
private let stampImageView = UIImageView() | ||
private let stampStandardLabel = UILabel().then { | ||
$0.textColor = .g1 | ||
$0.font = .b7 | ||
} | ||
|
||
// MARK: - Life Cycles | ||
|
||
override init(frame: CGRect) { | ||
super.init(frame: frame) | ||
setLayout() | ||
} | ||
|
||
required init(coder: NSCoder) { | ||
fatalError("init(coder:) has not been implemented") | ||
} | ||
} | ||
|
||
extension GoalRewardInfoCVC { | ||
|
||
// MARK: - Layout Helpers | ||
|
||
private func setLayout() { | ||
contentView.addSubviews(stampImageView, stampStandardLabel) | ||
|
||
contentView.snp.makeConstraints { make in | ||
make.top.equalToSuperview() | ||
make.centerX.equalToSuperview() | ||
make.leading.equalToSuperview() | ||
make.height.equalTo(112) | ||
} | ||
|
||
stampImageView.snp.makeConstraints { make in | ||
make.top.leading.trailing.equalToSuperview() | ||
make.width.equalTo(90) | ||
} | ||
|
||
stampStandardLabel.snp.makeConstraints { make in | ||
make.top.equalTo(stampImageView.snp.bottom).offset(8) | ||
make.centerX.equalToSuperview() | ||
} | ||
} | ||
|
||
// MARK: - General Helpers | ||
|
||
func dataBind(model: GoalRewardInfoModel) { | ||
stampImageView.image = model.stampImg | ||
stampStandardLabel.text = model.stampStandard | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// | ||
// GoalRewardInfoModel.swift | ||
// Runnect-iOS | ||
// | ||
// Created by 몽이 누나 on 2023/01/02. | ||
// | ||
|
||
import UIKit | ||
|
||
struct GoalRewardInfoModel { | ||
let stampImg: UIImage | ||
let stampStandard: String | ||
} |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -6,18 +6,187 @@ | |||||
// | ||||||
|
||||||
import UIKit | ||||||
import SnapKit | ||||||
import Then | ||||||
|
||||||
final class GoalRewardInfoVC: UIViewController { | ||||||
|
||||||
|
||||||
// MARK: - UI Components | ||||||
|
||||||
private lazy var navibar = CustomNavigationBar(self, type: .titleWithLeftButton).setTitle("목표 보상") | ||||||
private let stampTopView = UIView() | ||||||
private let stampBottomView = UIView() | ||||||
|
||||||
private let stampImage = UIImageView().then { | ||||||
$0.image = ImageLiterals.imgStamp | ||||||
} | ||||||
|
||||||
private let stampExcourageLabel = UILabel().then { | ||||||
$0.text = "다양한 코스를 달리며 러닝 스탬프를 모아봐요" | ||||||
$0.textColor = .g2 | ||||||
$0.font = .b4 | ||||||
} | ||||||
|
||||||
private lazy var stampCollectionView: UICollectionView = { | ||||||
let layout = UICollectionViewFlowLayout() | ||||||
layout.scrollDirection = .vertical | ||||||
|
||||||
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) | ||||||
collectionView.translatesAutoresizingMaskIntoConstraints = false | ||||||
collectionView.isScrollEnabled = true | ||||||
collectionView.showsVerticalScrollIndicator = false | ||||||
collectionView.delegate = self | ||||||
collectionView.dataSource = self | ||||||
|
||||||
return collectionView | ||||||
}() | ||||||
|
||||||
// MARK: - Variables | ||||||
|
||||||
var stampList: [GoalRewardInfoModel] = [ | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampC1, stampStandard: "그리기 스타터"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampC2, stampStandard: "그리기 중수"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampC3, stampStandard: "그리기 마스터"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampS1, stampStandard: "스크랩 베이비"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampS2, stampStandard: "스크랩 어린이"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampS3, stampStandard: "스크랩 어른이"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampP1, stampStandard: "새싹 업로더"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampP2, stampStandard: "중수 업로더"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampP3, stampStandard: "인플루언서"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampR1, stampStandard: "달리기 유망주"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampR2, stampStandard: "아마추어 선수"), | ||||||
GoalRewardInfoModel(stampImg: ImageLiterals.imgStampR2, stampStandard: "마라톤 선수") | ||||||
] | ||||||
|
||||||
// MARK: - Constants | ||||||
|
||||||
final let stampInset: UIEdgeInsets = UIEdgeInsets(top: 32, left: 34, bottom: 10, right: 34) | ||||||
final let stampLineSpacing: CGFloat = 20 | ||||||
final let stampItemSpacing: CGFloat = 26 | ||||||
final let stampCellHeight: CGFloat = 112 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이부분은 위에 UI Components 보다 위쪽에 위치하도록 하면 좋아요~! |
||||||
|
||||||
// MARK: - View Life Cycle | ||||||
|
||||||
override func viewDidLoad() { | ||||||
super.viewDidLoad() | ||||||
setNavigationBar() | ||||||
setUI() | ||||||
// Do any additional setup after loading the view. | ||||||
setLayout() | ||||||
register() | ||||||
} | ||||||
|
||||||
} | ||||||
|
||||||
// MARK: - Methods | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 사용하지 않은 주석들은 지워줍시다~! |
||||||
|
||||||
// MARK: - @objc Function | ||||||
|
||||||
// MARK: - UI & Layout | ||||||
|
||||||
extension GoalRewardInfoVC { | ||||||
|
||||||
// MARK: - Layout Helpers | ||||||
|
||||||
private func setNavigationBar() { | ||||||
view.addSubview(navibar) | ||||||
|
||||||
navibar.snp.makeConstraints { make in | ||||||
make.top.leading.trailing.equalTo(view.safeAreaLayoutGuide) | ||||||
make.height.equalTo(48) | ||||||
} | ||||||
} | ||||||
|
||||||
private func setUI() { | ||||||
view.backgroundColor = .w1 | ||||||
stampBottomView.backgroundColor = .m3 | ||||||
stampCollectionView.backgroundColor = .m3 | ||||||
} | ||||||
|
||||||
private func setLayout() { | ||||||
view.addSubviews(stampTopView, stampBottomView) | ||||||
|
||||||
stampTopView.snp.makeConstraints { make in | ||||||
make.top.equalTo(navibar.snp.bottom) | ||||||
make.leading.trailing.equalTo(view.safeAreaLayoutGuide) | ||||||
make.height.equalTo(235) | ||||||
} | ||||||
|
||||||
stampTopView.addSubviews(stampImage, stampExcourageLabel) | ||||||
|
||||||
stampImage.snp.makeConstraints { make in | ||||||
make.top.equalToSuperview() | ||||||
make.centerX.equalToSuperview() | ||||||
make.width.equalTo(181) | ||||||
make.height.equalTo(167) | ||||||
} | ||||||
|
||||||
stampExcourageLabel.snp.makeConstraints { make in | ||||||
make.top.equalTo(stampImage.snp.bottom).offset(16) | ||||||
make.centerX.equalToSuperview() | ||||||
} | ||||||
|
||||||
stampBottomView.snp.makeConstraints { make in | ||||||
make.top.equalTo(stampTopView.snp.bottom) | ||||||
make.leading.trailing.equalTo(view.safeAreaLayoutGuide) | ||||||
make.height.equalTo(view.safeAreaLayoutGuide).inset(80) | ||||||
} | ||||||
|
||||||
stampBottomView.addSubview(stampCollectionView) | ||||||
|
||||||
stampCollectionView.snp.makeConstraints { make in | ||||||
make.top.leading.trailing.equalToSuperview() | ||||||
make.height.equalTo(calculateCellHeight()) | ||||||
} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 지금 보면 콜렉션 뷰를 stampBottomView로 감싸주고 있는데 그럴 필요 없어요! stampCollectionView.snp.makContraints { make in
make.top.equalTo(stampTopView.snp.bottom)
make.leading.trailing.equalTo(view. safeAreaLayoutGuide)
make.bottom.equalToSuperView()
} 콜렉션뷰에 레이아웃을 잡았을 거 같아요!! 그리고 콜렉션 뷰에서 calculateCellHeight()로 높이를 직접 구해서 넣어줄 필요 없어요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 헐! |
||||||
} | ||||||
|
||||||
// MARK: - General Helpers | ||||||
|
||||||
private func register() { | ||||||
stampCollectionView.register(GoalRewardInfoCVC.self, | ||||||
forCellWithReuseIdentifier: GoalRewardInfoCVC.identifier) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
으로 사용하면 identifier를 만들어줄 필요가 없어요 |
||||||
} | ||||||
|
||||||
func calculateCellHeight() -> CGFloat { | ||||||
let count = CGFloat(stampList.count) | ||||||
let heightCount = count / 3 + count.truncatingRemainder(dividingBy: 3) | ||||||
return heightCount * stampCellHeight + (heightCount - 1) * stampLineSpacing + stampInset.top + stampInset.bottom | ||||||
} | ||||||
|
||||||
} | ||||||
|
||||||
// MARK: - UICollectionViewDelegateFlowLayout | ||||||
|
||||||
extension GoalRewardInfoVC: UICollectionViewDelegateFlowLayout { | ||||||
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { | ||||||
let screenWidth = UIScreen.main.bounds.width | ||||||
let tripleCellWidth = screenWidth - stampInset.left - stampInset.right - stampItemSpacing * 2 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||||||
return CGSize(width: tripleCellWidth / 3, height: 112) | ||||||
} | ||||||
|
||||||
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { | ||||||
return stampLineSpacing | ||||||
} | ||||||
|
||||||
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { | ||||||
return stampLineSpacing | ||||||
} | ||||||
|
||||||
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { | ||||||
return stampInset | ||||||
} | ||||||
} | ||||||
|
||||||
// MARK: - UICollectionViewDataSource | ||||||
|
||||||
extension GoalRewardInfoVC: UICollectionViewDataSource { | ||||||
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { | ||||||
return stampList.count | ||||||
} | ||||||
|
||||||
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { | ||||||
guard let stampCell = collectionView.dequeueReusableCell(withReuseIdentifier: GoalRewardInfoCVC.identifier, for: indexPath) as? GoalRewardInfoCVC else { return UICollectionViewCell()} | ||||||
stampCell.dataBind(model: stampList[indexPath.item]) | ||||||
return stampCell | ||||||
} | ||||||
|
||||||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
final~!