UIKit의 UICollectionView를 이용해 iOS에서 실제 그리드와 리스트를 연습하고 리스트 뷰 구현하기. StockRank는 컬럼이 1개인 리스트 뷰를 보여주는 앱으로, 해당 미니 프로젝트에서 뷰 구성요소로 CollectionView를 사용하여 주식의 순위, 회사 로고, 회사이름, 가격, 득락폭, 이미지 등을 넣어준다. UICollectionView를 이용한 리스트 및 그리드 개발을 위한 3가지 핵심인 Data / Presentation / Layout를 사용하여 주식리스트를 보여주는 간단한 앱이다. 해당 mini project는 아이폰16으로 설정.
UICollectionView를 이용한 리스트 및 그리드 개발 시 핵심 3가지.
Data / Presentation / Layout
Data : 어떤 데이터를 사용할지
Presentation : 데이터를 셀에 어떻게 표현할지
Layout : 셀들을 레이아웃에 어떻게 배치할지
새 프로젝트 생성 후 한 페이지를 담당하는 ViewController부터 만들기 시작.
xcode > file > new > file from template (cmd(⌘) + n) > cocoa touch class > next > StockRankViewController 만들기 > next
StockRankViewController가 리스트를 담당하므로 페이지를 담당할 Class 이름을 변경, 연결해 준다.
Storyboard ID에도 똑같이 StockRankViewController 이름으로 넣어준다.
Storyboard ID는 ViewController를 Storyboard에서 찾을 때 사용하는 ID. Storyboard ID는 어떤걸로 사용해도 무방하지만 구분자이기 때문에 유니크한 클래스 이름을 그대로 넣는 경우가 많다.
Storyboard에서 ViewController를 만들 때 객체 설정을 해주고 Storyboard ID도 같은 이름으로 설정해 주면 편하다.
Storyboard에서 + 버튼을 통해 해당하는 UI컴포넌트를 찾을 수 있는데 그중 CollectionView 드래그 앤 드롭.
넣은 후 바로 오토레이아웃 설정해준다. 오토레이아웃은 상위 뷰에다가 딱 맞춰서 설정하려고 한다.
Ctrl(⌃) 누른 상태에서 마우스를 끌어주면(드래그 앤 드롭) 오토레이아웃 constraints를 정해줄 수 있다.
constraints 설정 시 Shift(⇧) 누르면서 선택하면 다중선택 가능하다.
CollectionView를 실제 코드에 연결하기 위해 Assistant를 켜고 CollectionView를 선택 후 Ctrl(⌃) 누른 상태에서 코드로 마우스를 드래그 앤 드롭해서 CollectionView를 코드에 연결.
컬렉션 뷰의 셀들 배치는 순위, 썸네일(회사 로고) 40x40예정, 회사이름, 가격, 득락폭, 즐겨찾기를 위한 하트 표시 등을 배치할 예정.
레이블 이미지뷰 레이블 cmd(⌘) 복붙, Option(⌥) 누른 상태에서 옆으로 잡아끌면 똑같이 복사 가능하다.
셀에 대한 디자인, 셀들의 오토레이아웃, 셀을 표현할 커스텀 셀을 만들고 커스텀 셀을 컬렉션 뷰에 이어서 데이터를 표현할 예정이다.
먼저 해당 셀들의 폰드, 컬러, 배치, 크기를 설정 후 오토레이아웃 및 Leading 설정.
Ctrl(⌃) 누른 상태에서 상위 뷰로 끌어주고 Shift(⇧) 누르면 다중선택하여 오토레이아웃 설정.
이미지 뷰 설정 시 Ctrl(⌃) 누른 상태에서 옆으로 끌어 width, height 설정, 해당 이미지의 사이즈는 정해졌지만 위치가 정해져 있지 않으므로, 레이블과 같은 방법으로 설정 후 Leading 값 설정하고 view의 백그라운드 컬러 변경.
회사 로고의 상단인 이미지뷰와 회사 이름인 레이블의 상단이 맞게끔 오토레이아웃을 설정하고 나머지 셀들의 오토레이아웃도 설정해 준다.
업데이트 설정을 위해 Constraint 단축키 Option(⌥) + Cmd(⌘) + + 를 눌러 업데이트 반영.
다른 방법으로 중앙 하단에 있는 이모티콘을 누른 후 Update Constraint Constants를 눌러도 똑같이 반영된다.
Data / Presentation / Layout 개발
Data를 어떤 걸 쓸지 UICollectionView에 알려주기 위해 코드 작성. 즉 StockModel에 있는 데이터를 쓸 것이라고 알려준다.
CollectionView에 Data, Presentation을 알려줄 규칙들이 dataSource에 담겨있고 실제로 그걸 가리키고 알려주는 대상인 self 설정.
CollectionView에 레이아웃, 셀의 사이즈 등을 알려줄 규칙들을 delegate에 담겨있고 실제로 그걸 가리키고 알려주는 대상인 self 설정.
self 설정 = 본인 자신인 StockRankViewController가 알려 준다고 생각하면 쉽다.
실제 알려주는 행위, 메서드나 프로퍼티 등의 프로토콜을 분리해서 코드를 작성한다.
컬렉션 뷰의 경우 여러 개의 섹션으로 나눠서 아이템들을 표현할 수 있는데 이번 프로젝트에서는 하나의 섹션에서 아이템을 표현하는 부분을 을 통해 몇 개의 데이터가 들어오는지, 컬렉션뷰에서 셀을 어떻게 표현할지 라는 물음에 대한 대답을 코드로 표현.
만든 커스텀 셀을 표현해 주는 코드 만들기
xcode > file > new > file from template (cmd(⌘) + n) > cocoa touch class > next > StockRankCellectionViewCell 만들기 > next
커스텀 클래스에 StockRankCellectionViewCell 넣어주고 Enter(↵)
CellectionViewCell 같은 경우는 특수하게 identifier를 셀의 이름과 동일하게 넣어준다.
셀 자체는 재사용되는 것이기 때문에 재사용구분자인 identifier가 필요한데, 그 부분은 커스텀 셀 객체의 이름을 넣어서 설정.
컬렉션 뷰에 메서드인 dequeueReusableCell를 사용, 이 메서드는 컬렉션 뷰에 등록되어 있는 것들 중 재사용 가능한 셀을 가져오겠다는 의미로 생각하면 쉽다. 스토리보드에서 재사용 가능한 셀은 여러 개 등록도 가능하지만 이번 프로젝트에서는 하나의 셀만 등록, 여러 개가 있는 경우 여러개 중에 하나를 구분자를 통해 가져와야 하는데 그 구분자는 identifier에 해당 객체의 이름을 넣어주면 편하다.
그 후 재사용셀의 이름을 가져와서 넣고, 몇 번째의 해당하는 셀에 대한 건지를 설정.
즉 컬렉션 뷰에서 재사용 가능한 셀을 가져올 때 구분자가 필요한데 그 구분자의 이름과, 몇 번째 해당하는 구분자를 가진 셀을 가져올 거다라는 식으로 설정해 준다.
셀을 어떻게 배치할지 정해주지 않았기 때문에 시뮬레이터를 돌렸을 시 아래와 같이 적용된 것을 확인할 수 있다.
셀을 싱글컬럼으로 각 한 줄씩 쓰게끔 레아이웃까지 표현
레이아웃을 어떻게 셀에 적용시킬지 UICollectionViewDelegateFlowLayout의 메서드로 설정.
FlowLayout은 UICollectionView에서 셀들을 어떻게 배치할 거냐에 대한 답을 가지고 있는 약속이 있는 프로토콜이다.
셀하나의 넓이랑 컬렉션 뷰의 넓이가 같아야 싱글 컬럼이 된다. 하나의 셀에 사이즈를 정해주면 되는데 넓이의 경우 컬렉션뷰랑 사이즈가 같고 높이는 정해줘야 한다. 사이즈를 가져올 때는 bounds로 넓이와 높이를 가져오거나 설정할 수 있다.
Debug View Hierarchy를 확인하고 싶을 시 시뮬레이터가 실행되고 있을 때 하단의 버튼을 클릭하면 현재 실행되는 앱의 뷰의 Hierarchy를 볼 수 있다. 데이터는 업데이트되어 있지 않고 레이아웃 설정에 관한 변경을 확인할 수 있다.
cell에서 각각의 데이터를 업데이트 시켜주는 코드 만들기
스토리보드에서 Assistant를 통해 Assistant 뷰를 켜고 Content view를 클릭하고 연결된 코드를 확인할 수 있다.
먼저 코드에 각각의 UI 컴포넌트를 연결하지 않았기 때문에 연결해 준 후 UI 컴포넌트의 값을 업데이트해주는 메서드를 만든다.
컴포넌트를 연결하기 위해 Ctrl(⌃) 누른 상태에서 코드로 끌고 와서 IBOutlet으로 만들고 IBOutlet의 변수 이름을 적어주고 연결.
UI 컴포넌트의 값을 업데이트해주는 configure 메서드를 만들고 StockModel 타입의 인자를 받아서 업데이트 해주는 코드 작성.
메서드를 만들어주고 해당 Controller에 cell의 configure 메서드를 적용해줘야 하는데 cell은 UICollectionViewCell 셀이다. UICollectionViewCell은 UICollectionView를 상속받은 커스텀 셀이기 때문에 cell을 StockRankCellectionViewCell로 캐스팅시키고 configure을 적용시킨다.
configure에 해당되는 데이터는 stock 같은 경우 stockList에서 배열을 사용해서 indexPath를 이용한다. indexPath에는 섹션에 대한 정보와 섹션 안에 들어가는 각 데이터 로우에 대한 정보들이 있는데 아이템 정보가 섹션안에 있는 있는 몇 번째 아이템인지 표시한다.
캐스팅을 해서 언래핑을 했을 때 StockRankCellectionViewCell로 제대로 언래핑이 되었을 경우 밑에 코드를 실행하고 그렇지 않으면 UICollectionViewCell을 리턴한다.
guard <꼭 참이여야 하는 조건> else <그렇지 않은 경우> {
return .... xxx
}
<아닐 시 코드> xx xxxx
UICollectionView에게 Data / Presentation / Layout 을 알려주고 업데이트된 부분을 시뮬레이터로 돌렸을 시 해당 디자인은 비슷하게 완성되었다. 하지만 가격 등, 시각적으로 보기 불편한 부분들을 수정.
어떤 숫자에 대해서 포맷팅을 도와주는 객체로 NumberFormatter를 이용, 스타일과 소수점등을 설정해 주면 된다.
result의 포맷팅의 형태가 string? 스트링 옵셔널이므로 이 부분을 옵셔널이 아니라고 강제 언래핑을 해준다.
강제 언래핑을 하다 보면 크래시가 발생할 수 있으므로 빈 스트링을 넘겨 nil인 경우에는 empty 스트링을 넘겨줌으로써 안전하게 넘겨줄 수 있다. 이 방법을 권장한다.
이 부분으로 사소한 부분이지만 ,를 넣어줌으로써 훨씬 가독성이 좋아진 것을 확인할 수 있다.
마지막으로 등락폭에 따라 색상이 변경되도록 코드를 작성.
if-else문을 사용하거나 삼항연산자를 활용하면 되는데 삼항연산자 활용 시 더 코드를 간소화시켜 이해하기 쉽고 깔끔하고 간결한 코드가 될 수 있다.
'IOS > UIKit' 카테고리의 다른 글
| [UIKit] mini project AppleFrameworks(UICollectionView) (0) | 2025.08.14 |
|---|---|
| [UIKit] mini project ChatList(UICollectionView) (1) | 2025.08.02 |
| [UIKit] mini project 심플웨더(SimpleWeather) (6) | 2025.07.12 |
| [UIKit] mini project 심볼롤러(SymbolRoller) (0) | 2025.07.07 |
| [UIKit] 기본 UI 컴포넌트(Component) / 오토레이아웃(Auto Layout) (3) | 2025.07.05 |