[ProJect 일지] 키오스크 (2)

2024.04.02 - [◽️ Programming/T I L] - [ProJect 일지] 키오스크 (1)

오늘은 내가 푸시할 깃이 꼬여버리는 바람에 하루종일 깃가지고 끙끙대다가 시간을 다 날린 기분이었다.. 그치만 이제 깃이 어떻게 운영되고 데이터가 푸시되는지 알게 되었으니 그걸로 위안을 삼아야 겠다

오늘은 키오스크에서 추가적으로 탭바가 들어가기로 했고 그 탭바에 첫화면을 장식할 홈 화면을 구현하는 역할을 맞게 되었다!

애플 온라인 샵에서 아이디어를 얻어 컬렉션 뷰를 가로로 배치하여 이미지를 넣는 과정을 진행해보려고 한다.

---

CollectionView 가로 배치

먼저 가로로 배치하기 위해선 이전 글에서 봤던 것 처럼 UICollectionViewFlowLayout 에서 해당 내용을 손볼 수 있다.

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 30
layout.itemSize = CGSize(width: 200, height: 300)

UICollectionViewFlowLayout 을 상수에 담은 뒤 해당 상수에 scrollDirection 를 horizontal 설정하면 이제 세로가 아닌 가로로 스크롤이 가능해진다.

 

minimumInteritemSpacing 을 사용해 셀 사이의 간격을 벌릴 수 있다고 하는데 어디가 잘못 된 건지 셀 사이의 간격이 늘어나질 않아 고민이다..

itemSize 의 가로세로 값을 맞춰주면 각 셀의 크기가 잡혀 바로 구현이 가능하다.

셀 사이의 간격을 벌리고 이미지의 꼭지점을 둥글게 한 뒤 그림자 효과를 넣어 조금 더 퀄리티를 높히려고 조금 손을 봤다.

그 이후 섹션을 이용해 각 섹션별로 가로 컬렉션을 구성해 홈화면을 구현하고자 한다.

내일은 원하는 만큼 구현이 될 수 있도록 더 몰입해서 개발해보자 🙂