홈 화면 레이아웃 구현 (with CollectionViewFlowLayout) #51

Kyxxn · 2024-11-12T11:34:55Z

#️⃣ 연관된 이슈

책장 layout 생성 #14

📝 작업 내용

UICollectionView와 FlowLayout을 통한 홈 화면 레이아웃 그리기
홈 우측 하단 추억 만들기 버튼 생성
- 누를 시 책 생성 화면으로 이동
- 딱 이동만 됨, 아직 네비게이션 바에 대한 처리는 잘 안 되어 있음

⏰ 작업시간

예상 시간	실제 걸린 시간
평균: 5.3 (본인: 8)	7

📒 리뷰 노트

FlowLayout에서 셀을 어떻게 보여줄 지 고민을 많이 해봤는데, 아이폰 16프로와 SE 3세대에서 실행해보며 조정함..
- FlowLayout 잡을 때 UIEdgeInsets을 쓸지, 컬렉션뷰에 오토레이아웃 잡을 지 등등 아직 미흡하네요
우측 하단의 추억 만들기 버튼에 임의로 쉐도우를 넣었는데 어떤가요 ..??
- 있는 버전
- 없는 버전

⚽️ 트러블 슈팅

문제 상황

버튼에 레이아웃을 아무리 건드려도 버튼 안에 들어있는 이미지는 늘어나지 않는다..!

버튼 안에 있는 이미지 사이즈 조절하는 방법

문제 해결

개요

현재 코드는 이렇게 버튼에만 레이아웃이 걸려있다.

private let likeButton = UIButton(type: .custom)
likeButton.setImage(.likeFill, for: .normal)
likeButton.setAnchor(
  top: bookCoverView.bottomAnchor,
  trailing: dropDownButton.leadingAnchor, constantTrailing: 10,
  width: 40, height: 40
)

위 문제를 해결하기 위해 구글링 한 결과 4가지 정도 알아냈다.

UIButton의 ContentEdgeInsets
UIButton의 imageEdgeInsets
button.imageView에 대해 오토레이아웃 추가하기
이미지 자체에 사이즈를 변경해서 button.setImage()메소드에 넣기

일단, 1번과 2번은 UIButtonConfiguration이 나오고부터 deprecated 됐다.

지금 블로그에 나와있는 건 대부분 deprecated 된 메소드를 쓰고 있음 ㅠ

탈락.

3번으로 할 수 있긴 한데, 언젠가 또 필요한 순간이 올 거 같아서 4번으로 결정했다.

구현 과정

먼저 UIImage에 확장으로 image와 size를 받는 메소드를 만든다.

import UIKit

extension UIImage {
    static func resizedImage(image: UIImage, size: CGSize) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: size)
        
        return renderer.image { _ in
            image.draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

그리고 ImageRenderer를 통해 이미지를 새로 그릴 건데,

이때 사이즈를 입력받아서 내가 넣은 이미지가 해당 사이즈로 리턴되게 구현했다.

let likeImage = UIImage.resizedImage(
    image: isLike ? .likeFill : .likeEmpty,
    size: CGSize(width: 28, height: 28)
)
likeButton.setImage(likeImage, for: .normal)

그러면 위와같이 사용할 수 있다 !

📸 스크린샷 & 영상

영상

컬렉션 뷰 레이아웃	책 생성화면으로 이동

스크린샷

iPhone SE 3rd generation	iPhone 16 Pro

MHBook보다 MHBookCover가 더 명확한 것 같아 네이밍을 수정했습니다

아직 마니 미흡하네요,,

Kyxxn · 2024-11-12T11:53:04Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+        let flowLayout = UICollectionViewFlowLayout()
+        let cellSize = (self.view.bounds.inset(by: self.view.safeAreaInsets).width - 80) / 2
+        flowLayout.itemSize = .init(width: cellSize, height: 210)
+        flowLayout.minimumLineSpacing = 40
+        flowLayout.minimumInteritemSpacing = 20
+        flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
+        flowLayout.scrollDirection = .vertical


MHBookCover에서도 TargetImageView를 width height로 잡았는데,
여기서도 width height로 잡는게 뭔가 레이아웃을 잘 못 잡고 있다는 생각이 드는데 이 구조가 괜찮은 건가요 ??

그러면, 음 BookCover는 오토레이아웃으로 잡고 TargetImageView는 width height로 잡는 것은 어떤가요?

k2645

너무너무 수고 많으셨습니당 .ᐟ.ᐟ 플로팅 버튼에 그림자 준 건 너무 좋은 것 같아요 .ᐟ.ᐟ 효카소 해야겠는데용

k2645 · 2024-11-12T11:49:30Z

MemorialHouse/MHPresentation/MHPresentation/Source/Design/MHBookCover.swift

+    func prepareForReuse() {
+        bookCoverImageView.image = nil
+        titleLabel.text = nil
+        targetImageView.image = nil
+    }


P2: prepareForReuse는 UITableViewCell이나 UICollectionViewCell에서 사용되는 함수기도 하고 해당 클래스는 view인데 reuse되기 전 준비라는 메서드 명이 어색한 것 같습니다 .ᐟ.ᐟ 그냥 resetProperties와 같은 값을 초기화시킨다는 의미의 네이밍이 더 적절할 것 같다는 생각이 듭니당

옹 좋네요 알겠습니다 !

k2645 · 2024-11-12T11:53:39Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+    private let navigationBar: MHNavigationBar
+    private let currentCategoryLabel = UILabel(style: .default)
+    private let categorySelectButton = UIButton(type: .custom)
+    private let bookCoverMakeFloatingButton: UIButton = {


P3: bookCoverMake보단 makingBookFloatingButton 이 조금 더 네이밍이 적절할 것 같습니당 .. bookCoverMakeFloatingButton 이건 뭔가 책 표지만 만들겠다는 뜻 같은..?

인정합니다 수정할게요

k2645 · 2024-11-12T11:54:58Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewModel.swift

+    let dummyBook = [
+        BookCover(title: "집주인들", imageURL: "", bookColor: .pink, category: "친구", isLike: false),
+        BookCover(title: "엄마", imageURL: "", bookColor: .blue, category: "가족", isLike: true),
+        BookCover(title: "아빠", imageURL: "", bookColor: .green, category: "가족", isLike: true),
+        BookCover(title: "친구", imageURL: "", bookColor: .beige, category: "가족", isLike: false),
+        BookCover(title: "동생", imageURL: "", bookColor: .orange, category: "가족", isLike: true),
+        BookCover(title: "집주인들", imageURL: "", bookColor: .pink, category: "친구", isLike: false),
+        BookCover(title: "엄마", imageURL: "", bookColor: .blue, category: "가족", isLike: true),
+        BookCover(title: "아빠", imageURL: "", bookColor: .green, category: "가족", isLike: true),
+        BookCover(title: "친구", imageURL: "", bookColor: .beige, category: "가족", isLike: false),
+        BookCover(title: "동생", imageURL: "", bookColor: .orange, category: "가족", isLike: true),
+        BookCover(title: "집주인들", imageURL: "", bookColor: .pink, category: "친구", isLike: false),
+        BookCover(title: "엄마", imageURL: "", bookColor: .blue, category: "가족", isLike: true),
+        BookCover(title: "아빠", imageURL: "", bookColor: .green, category: "가족", isLike: true),
+        BookCover(title: "친구", imageURL: "", bookColor: .beige, category: "가족", isLike: false),
+        BookCover(title: "동생", imageURL: "", bookColor: .orange, category: "가족", isLike: true),
+        BookCover(title: "집주인들", imageURL: "", bookColor: .pink, category: "친구", isLike: false),
+        BookCover(title: "엄마", imageURL: "", bookColor: .blue, category: "가족", isLike: true),
+        BookCover(title: "아빠", imageURL: "", bookColor: .green, category: "가족", isLike: true),
+        BookCover(title: "친구", imageURL: "", bookColor: .beige, category: "가족", isLike: false),
+        BookCover(title: "동생", imageURL: "", bookColor: .orange, category: "가족", isLike: true)
+    ]


P1: dummy data는 실제 develop 브랜치에는 드러가기 전에 빼야할 것 같습니당 .ᐟ.ᐟ

k2645 · 2024-11-12T11:57:21Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+    public override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+
+        navigationController?.navigationBar.isHidden = true


P3: 옹 해당 로직이 viewDidLoad에 있으면 혹시 실행되지 않나용??

왠지 홈뷰가 왔다 갔다 할일이 많아서 여기에 하신 것같아요!

맞습니당 책 만들고 다시 돌아오면 다시 네비게이션 바가 생겨있어서
viewWillAppear에 두었습니다

k2645 · 2024-11-12T11:59:55Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+            self.navigationController?.pushViewController(BookCreationViewController(), animated: true)
+        }, for: .touchUpInside)


P3;

Suggested change

self.navigationController?.pushViewController(BookCreationViewController(), animated: true)

}, for: .touchUpInside)

let bookCreationViewController = BookCreationViewController()

self.navigationController?.pushViewController(bookCreationViewController, animated: true)

}, for: .touchUpInside)

이렇게 한 번 변수로 선언해주는 것도 좋을 것 같아요 ! (물론 나중에 BookCreationViewModel이 생기면 바뀌긴 하겠네용..)

k2645 · 2024-11-12T12:01:11Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewModel.swift

+        BookCover(title: "친구", imageURL: "", bookColor: .beige, category: "가족", isLike: false),
+        BookCover(title: "동생", imageURL: "", bookColor: .orange, category: "가족", isLike: true)
+    ]
+    let houseName: String


P1: 해당 변수는 private 처리해줘야할 것 같습니다 .ᐟ.ᐟ

iceHood

국굳입니당
ᕦ(ò_óˇ)ᕤ

iceHood · 2024-11-12T12:01:55Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+        let flowLayout = UICollectionViewFlowLayout()
+        let cellSize = (self.view.bounds.inset(by: self.view.safeAreaInsets).width - 80) / 2
+        flowLayout.itemSize = .init(width: cellSize, height: 210)
+        flowLayout.minimumLineSpacing = 40
+        flowLayout.minimumInteritemSpacing = 20
+        flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
+        flowLayout.scrollDirection = .vertical


그러면, 음 BookCover는 오토레이아웃으로 잡고 TargetImageView는 width height로 잡는 것은 어떤가요?

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

iceHood · 2024-11-12T12:12:36Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+    public override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+
+        navigationController?.navigationBar.isHidden = true


왠지 홈뷰가 왔다 갔다 할일이 많아서 여기에 하신 것같아요!

yuncheol-AHN

고생하셨습니다 ~~

yuncheol-AHN · 2024-11-12T12:42:57Z

MemorialHouse/MHPresentation/MHPresentation/Source/Home/HomeViewController.swift

+        let cellSize = (self.view.bounds.inset(by: self.view.safeAreaInsets).width - 80) / 2
+        flowLayout.itemSize = .init(width: cellSize, height: 210)


P3
cellSize 대신 cellWidth는 어떨지 조심스럽게 제안드립니다.
hegiht에 대한 부분도 변수로 하면 일관성이 있을 거 같습니다.

인정합니당 수정할게요 !!

k2645

효준님 추가로 이미지를 봤을 때 책 하단에 더보기 버튼(...) 이게 먼가 비율이.. 피그마랑 살짝 다른 것 같아서 이것 한 번 봐주시면 너무너무 감사드리겠습니당 🙇🏻‍♀️🙇🏻‍♀️

iceHood

너무 공생 많으셨읍니다!! 오늘도 화이팅,,
╰(´︶`)╯♡

k2645

HomeViewModel의 리뷰들이 아직 반영되지 않은 것 같습니다 .ᐟ.ᐟ 일단 Approve는 드렸는데, 해당 파일 리뷰 확인해주시고 반영해주신 후에 Merge해주시면 감사하겠습니다 .ᐟ.ᐟ

yuncheol-AHN

열정맨 ~ 고생많으셨습니다 !!!

Kyxxn added 11 commits November 12, 2024 03:36

design: 하트, 빈 하트, 드랍다운, 책 생성 버튼 이미지 추가

f92d792

refactor: Setting 버튼 이미지 네이밍 수정

e0033cc

Merge branch 'develop' into feature/make-main-home-layout

e8b18f8

Merge branch 'develop' into feature/make-main-home-layout

9e8f170

design: 책 상세보기 ... 버튼 이미지 추가

2ce7cd4

feat: HomeViewModel 추가에 따른 SceneDelegate 로직 수정

289036f

refactor: BookCover의 프로퍼티와 MHBook 커스텀 뷰 네이밍 변경

c355a5b

MHBook보다 MHBookCover가 더 명확한 것 같아 네이밍을 수정했습니다

feat: UICollectionView와 FlowLayout 설정

98824bc

아직 마니 미흡하네요,,

feat: 홈 우측 하단에 추억 만들기 버튼 생성

86681ed

feat: 홈에서 책 표지 만드는 페이지로 이동 로직 구현

89d1cb6

fix: 홈에서 책 생성 화면 갔다왔을 때 네비게이션 나타나는 문제 수정

525a950

Kyxxn added ✨ Feature 기능 관련 작업 🎨 Design 에셋, 컴포넌트 작업 labels Nov 12, 2024

Kyxxn added this to the 0.2 milestone Nov 12, 2024

Kyxxn requested review from k2645, yuncheol-AHN and iceHood November 12, 2024 11:34

Kyxxn self-assigned this Nov 12, 2024

Kyxxn linked an issue Nov 12, 2024 that may be closed by this pull request

책장 layout 생성 #14

Closed

Kyxxn commented Nov 12, 2024

View reviewed changes

k2645 requested changes Nov 12, 2024

View reviewed changes

iceHood requested changes Nov 12, 2024

View reviewed changes

yuncheol-AHN approved these changes Nov 12, 2024

View reviewed changes

k2645 reviewed Nov 12, 2024

View reviewed changes

Kyxxn added 4 commits November 13, 2024 00:44

refactor: 코드리뷰 린트 수정

1be5aab

feat: UIImage resize 메소드 추가

a93d42f

fix: 버튼 안에 있는 이미지 사이즈 조절이 안되는 문제 해결

8ea83b2

fix: 컬렉션뷰 레이아웃에 바텀 패딩을 줘서 SafeArea 지키기

77aea9c

Kyxxn requested review from k2645 and iceHood November 13, 2024 15:52

Kyxxn requested a review from yuncheol-AHN November 13, 2024 15:52

iceHood approved these changes Nov 13, 2024

View reviewed changes

k2645 approved these changes Nov 14, 2024

View reviewed changes

yuncheol-AHN approved these changes Nov 14, 2024

View reviewed changes

Kyxxn added 3 commits November 14, 2024 14:48

Merge branch 'develop' into feature/make-main-home-layout

8eafb21

chore: 뷰모델 더미 데이터 삭제

b68088f

fix: Xcode Build yml macOS 수정

1706479

Kyxxn merged commit baa0e9a into develop Nov 14, 2024
2 checks passed

Kyxxn deleted the feature/make-main-home-layout branch November 14, 2024 06:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

홈 화면 레이아웃 구현 (with CollectionViewFlowLayout) #51

홈 화면 레이아웃 구현 (with CollectionViewFlowLayout) #51

Kyxxn commented Nov 12, 2024 •

edited

Loading

Kyxxn Nov 12, 2024

iceHood Nov 12, 2024

k2645 left a comment

k2645 Nov 12, 2024

Kyxxn Nov 12, 2024

k2645 Nov 12, 2024

Kyxxn Nov 12, 2024

k2645 Nov 12, 2024

k2645 Nov 12, 2024

iceHood Nov 12, 2024

Kyxxn Nov 12, 2024

k2645 Nov 12, 2024

k2645 Nov 12, 2024

iceHood left a comment

iceHood Nov 12, 2024

iceHood Nov 12, 2024

yuncheol-AHN left a comment

yuncheol-AHN Nov 12, 2024

Kyxxn Nov 12, 2024

k2645 left a comment

iceHood left a comment

k2645 left a comment

yuncheol-AHN left a comment

		self.navigationController?.pushViewController(BookCreationViewController(), animated: true)
		}, for: .touchUpInside)

		let cellSize = (self.view.bounds.inset(by: self.view.safeAreaInsets).width - 80) / 2
		flowLayout.itemSize = .init(width: cellSize, height: 210)

홈 화면 레이아웃 구현 (with CollectionViewFlowLayout) #51

홈 화면 레이아웃 구현 (with CollectionViewFlowLayout) #51

Conversation

Kyxxn commented Nov 12, 2024 • edited Loading

#️⃣ 연관된 이슈

📝 작업 내용

⏰ 작업시간

📒 리뷰 노트

⚽️ 트러블 슈팅

문제 상황

문제 해결

개요

구현 과정

📸 스크린샷 & 영상

영상

스크린샷

Choose a reason for hiding this comment

Choose a reason for hiding this comment

k2645 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iceHood left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuncheol-AHN left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

k2645 left a comment

Choose a reason for hiding this comment

iceHood left a comment

Choose a reason for hiding this comment

k2645 left a comment

Choose a reason for hiding this comment

yuncheol-AHN left a comment

Choose a reason for hiding this comment

Kyxxn commented Nov 12, 2024 •

edited

Loading