Skip to content
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: 지도 탭 캐러셀 구현 + Extension 분리 #39

Merged
merged 5 commits into from
Nov 20, 2023
Merged

Conversation

anyukyung
Copy link
Member

@anyukyung anyukyung commented Nov 19, 2023

🧑‍🚀 PR 요약

해당 pr에서 작업한 내역을 적어주세요.

  • 지도 탭 캐러셀 구현
  • Extension으로 분리

📌 변경 사항

변경사항 및 주의 사항 (모듈 설치 등)을 적어주세요.

📸 ScreenShot

작동, 구현화면
Simulator Screen Recording - iPhone 15 - 2023-11-20 at 03 54 45

  • compositionallayout의 visibleItemsInvalidationHandler을 이용해서 센터 셀이 확대되도록 했습니다. (인환님의 기존 캐러셀 코드와 거의 동일), ref를 참고하여 개발했습니다.
  • 익스텐션으로 분리해 아래와 같은 형식으로 사용할 수 있도록 했습니다.
        let layout: UICollectionViewLayout = .createCarouselLayout(groupWidthDimension: 94/375,
                                                                   groupHeightDimension: 1.0,
                                                                   maximumZoomScale: 1.0,
                                                                   minimumZoomScale: 73/94)
  • 처음에는 UICollectionViewLayout을 서브클래싱하여 재사용하는 방식도 생각했으나 공식문서를 읽고 사용할 때마다 layout을 생성하는 것이 적합하다고 판단했습니다.

커스텀 레이아웃 ➡ UICollectionViewLayout 서브클래싱해야함

  1. Line이나 Grid 기반 배치와 다르게 보이는 Layout
  2. 스크롤 방향이 2개 이상
  3. 모든 셀 위치가 너무 자주 변경되어 flow layout을 수정하는 것보다 Custom layout을 만드는 게 효율적일 경우
    모두 현재 해당되지 않는다고 생각
  • 아쉬운 점은 센터셀이 확대되면서, 스페이싱은 그대로라 피그마와 살짝 다른 부분이 있다는 건데 우선순위를 낮춰 구현해볼 생각입니다.

Linked Issue

close #26

@anyukyung anyukyung self-assigned this Nov 19, 2023
@anyukyung anyukyung changed the title Feat: 지도 탭 캐러셀 구현 + Extension 분리 ds Nov 20, 2023
@anyukyung anyukyung changed the title ds Feat: 지도 탭 캐러셀 구현 + Extension 분리 Nov 20, 2023
@anyukyung anyukyung requested review from loinsir and chopmozzi and removed request for loinsir November 20, 2023 08:05
Comment on lines +12 to +33
static func createCarouselLayout(groupWidthDimension: CGFloat,
groupHeightDimension: CGFloat,
maximumZoomScale: CGFloat,
minimumZoomScale: CGFloat) -> UICollectionViewLayout {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(groupWidthDimension),
heightDimension: .fractionalHeight(groupHeightDimension))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPagingCentered
section.visibleItemsInvalidationHandler = { items, offset, environment in
let containerWidth = environment.container.contentSize.width
items.forEach { item in
let distanceFromCenter = abs((item.center.x - offset.x) - environment.container.contentSize.width / 2.0)
let scale = max(maximumZoomScale - (distanceFromCenter / containerWidth), minimumZoomScale)
item.transform = CGAffineTransform(scaleX: scale, y: scale)
}
}
return UICollectionViewCompositionalLayout(section: section)
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨네요. 추후 홈 뷰에 쓰인 코드도 이걸 사용하도록 바꿔야겠어요

Copy link
Collaborator

@loinsir loinsir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다. 특이 사항 없어서 Approve 하겠습니다.

@anyukyung anyukyung merged commit b752841 into iOS/dev Nov 20, 2023
1 check passed
Copy link
Collaborator

@chopmozzi chopmozzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다~

Comment on lines +80 to +83
[mapView, searchButton, currentLocationButton, uploadButton, carouselCollectionView].forEach {
view.addSubview($0)
$0.translatesAutoresizingMaskIntoConstraints = false
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

결국 addSubviews는 안 쓰기로 합의가 된 것일까요 ?ㅅ?

}

required init?(coder: NSCoder) {
super.init(coder: coder)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 backgroundColor = .white들어가야 하는거 아닌가요? 그냥 앱이 종료되는 것만 막는 장치일까요?

@anyukyung anyukyung deleted the iOS/feat#26 branch January 10, 2024 13:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants