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] 홈 배너 UI 구현 #421

Merged
merged 14 commits into from
Aug 12, 2022
Merged

Conversation

dev-jungbin
Copy link
Member

🍎 관련 이슈

closed #420

🍎 변경 사항 및 이유

  • 홈 배너 UI를 구현하였습니다.
  • 무한 페이징 배너를 구현하였습니다.
  • 페이징 segmented control을 이용해 페이지 인덱스를 표시하였습니다.
  • dummy image url을 이용하여 배너 이미지를 세팅하였습니다.
  • ImageView extension에, url을 알고 있는 image를 imageView에 세팅하는 함수를 만들었는데, 이 과정에서 싱글톤 ImageCacheManager를 만들어 활용하였습니다.

🍎 PR Point

  • 배너 페이징에 사용된 segmented control의 각 요소들을 unselected/selected 이미지로 넣어 주었는데.. 그... 간격이 너무 넓어서 고민입니당... width를 줄이면 그냥 고대로 잘리더라고요.........?................... 도움..이 필요합니댜......
  • 배너는 현재 예시로 5개를 보여주는 상태인데, 2개, 3개, 4개 등등 모두 잘 됩니다!!!!

📸 ScreenShot

Simulator.Screen.Recording.-.iPhone.13.mini.-.2022-08-08.at.01.46.24.mp4

@dev-jungbin dev-jungbin added 📱 View 뷰 개발(디자이닝)시 사용합니다. 🍎 Feature 새로운 기능 개발시 사용합니다. 🚨 도움 필요 도움이 필요할 때 사용합니다. ❤️ 정빈걸 ❤️ 정빈이 연 pr, issue에 사용 📰 홈 탭 홈 탭 개발 시 사용합니다. labels Aug 7, 2022
@dev-jungbin dev-jungbin requested a review from hwangJi-dev August 7, 2022 16:47
@dev-jungbin dev-jungbin self-assigned this Aug 7, 2022
Copy link
Member

@hwangJi-dev hwangJi-dev 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 +10 to +14
/// 캐시를 저장해 놓을 싱글톤 클래스
class ImageCacheManager {
static let shared = NSCache<NSString, UIImage>()
private init() {}
}
Copy link
Member

Choose a reason for hiding this comment

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

머시따!!!

Comment on lines 19 to 29
private lazy var segmentedControl = UISegmentedControl().then {
$0.removeAllSegments()
for i in 0..<bannerImaURLsData.count - 2 {
$0.insertSegment(with: UIImage(named: "unselectedSegmentImage"), at: i, animated: false)
}
$0.setDividerImage(UIImage(), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
$0.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)
$0.selectedSegmentIndex = 0
$0.setImage(UIImage(named: "selectedSegmentImage"), forSegmentAt: $0.selectedSegmentIndex)
$0.isUserInteractionEnabled = false
}
Copy link
Member

Choose a reason for hiding this comment

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

요기서 UISegmentedControl 말고 기본 UIPageControl을 사용하면 iOS HIG에 기반한 기본 페이징 컨트롤 컴포넌트를 사용해서 구현할 수 있을거 같은데 UISegmentedControl로 구현한 이유가 있나용~??
그 page item들 간에 간격이 너무 커서 고민이라면 그냥 기본 컴포넌트 쓰는것도 좋을 것 같애!!
tintColor / currentPageTintColor로 color 값으로 선택된 페이지, 그렇지 않은 페이지를 표시할 수 있어서 이미지도 사용하지 않아도 되구!!!

Copy link
Member Author

Choose a reason for hiding this comment

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

@hwangJi-dev 앗. ㅋ ㅋ ㅋ 이거 해주는 애가 있었구나.?.?.?.?.??..?.??.? 바로 리팩 갈길게 거마워... ㅎ.......

Copy link
Member

Choose a reason for hiding this comment

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

굿,,저도 동의합니다!! UIPageControl 추천!! 온보딩에도 얘 써줬어 코드 참고해봐도 좋을듯~!!

Comment on lines 90 to 99
switch pageInt {
case 0:
segmentedControl.selectedSegmentIndex = bannerImaURLsData.count - 3
bannerCV.scrollToItem(at: [0, bannerImaURLsData.count - 2], at: .left, animated: false)
case bannerImaURLsData.count - 1:
segmentedControl.selectedSegmentIndex = 0
bannerCV.scrollToItem(at: [0, 1], at: .left, animated: false)
default:
segmentedControl.selectedSegmentIndex = pageInt - 1
}
Copy link
Member

Choose a reason for hiding this comment

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

멋지다 정정빈~

Copy link
Member

@jane1choi jane1choi 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 19 to 29
private lazy var segmentedControl = UISegmentedControl().then {
$0.removeAllSegments()
for i in 0..<bannerImaURLsData.count - 2 {
$0.insertSegment(with: UIImage(named: "unselectedSegmentImage"), at: i, animated: false)
}
$0.setDividerImage(UIImage(), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
$0.setBackgroundImage(UIImage(), for: .normal, barMetrics: .default)
$0.selectedSegmentIndex = 0
$0.setImage(UIImage(named: "selectedSegmentImage"), forSegmentAt: $0.selectedSegmentIndex)
$0.isUserInteractionEnabled = false
}
Copy link
Member

Choose a reason for hiding this comment

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

굿,,저도 동의합니다!! UIPageControl 추천!! 온보딩에도 얘 써줬어 코드 참고해봐도 좋을듯~!!

@dev-jungbin dev-jungbin merged commit 493212c into develop Aug 12, 2022
@dev-jungbin dev-jungbin deleted the feature/#420-Home-Banner-UI branch August 24, 2022 06:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❤️ 정빈걸 ❤️ 정빈이 연 pr, issue에 사용 🍎 Feature 새로운 기능 개발시 사용합니다. 📰 홈 탭 홈 탭 개발 시 사용합니다. 📱 View 뷰 개발(디자이닝)시 사용합니다. 🚨 도움 필요 도움이 필요할 때 사용합니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

✨ [FEAT] 홈 배너 UI 구현
3 participants