UIKit의 UICollectionView를 이용해 iOS에서 실제 그리드와 리스트를 연습하고 리스트 뷰 구현하기. 채팅리스트는 컬럼이 1개인 리스트 뷰를 보여주는 채팅 리스트 앱으로, 해당 미니 프로젝트에서 뷰 구성요소로 이미지, 이름, 텍스트, 날짜가 필요한데 CollectionView를 사용하여 이미지, 레이블을 사용하여 넣어준다. UICollectionView를 이용한 리스트 및 그리드 개발을 위한 3가지 핵심인 Data / Presentation / Layout를 사용하여 카톡 형태의 채팅리스트를 보여주는 간단한 앱이다. 해당 mini project는 아이폰16으로 설정.
빈 화면을 채울 ViewController 만들기. 새로운 ViewController 만드는 방법은 다른 글에 상세히 있으므로 생략.
ViewController를 만든 후 ChatListViewController를 연결하고 Storyboard ID를 ChatListViewController로 구분자를 동일한 객체 이름으로 넣어준다.
Storyboard에서 + 버튼을 통해 CollectionView를 넣어주고 Ctrl(⌃) 누른 상태에서 상위 뷰에 마우스를 끌어주면(드래그 앤 드롭) 오토레이아웃 constraints를 정해줄 수 있다. constraints 설정 시 Shift(⇧) 누르면서 선택하면 다중선택 가능하다.
다른 방법으로는 인스펙터 영역에서 세모모양 사이즈 인스펙터(Size Inspector)를 활용하여 오토레이아웃이 걸려있는지 확인하고 에디터 영역 하단에서 add new constraints를 선택하여 각각 설정할 수도 있다. 조금 더 본인이 편한 방법대로 오토레이아웃 설정을 하면 된다.
해당 프로젝트에서는 CollectionView에 이미지, 이름, 텍스트, 날짜 텍스트가 필요한데 이 부분에 필요한 UI컴포넌트를 채워준다.
같은 컴포넌트를 복사 시 cmd(⌘) 복붙 하거나, Option(⌥) 누른 상태에서 옆으로 잡아끌면 똑같이 복사 가능하다.
이미지뷰를 Ctrl(⌃) 누른 상태에서 끌어 크기를 정해주고 마찬가지로 상위 뷰로 끌어 레아이웃 및 크기를 정해준다.
다른 레이블들도 텍스트, 크기, 색상 등을 정해준 후 오토레이아웃을 설정하는데, 이름의 경우 Top을 이미지뷰의 상단과 같은 선에 맞추게끔 설정하도록 하고 Leading 값은 20으로 설정. 텍스트도 같은 방법으로 이름에 맞춰 설정한 후 Option(⌥) + Cmd(⌘) + + 를 눌러 업데이트 반영한다. 날짜의 경우 ContentView의 y축의 수직방향의 가운데 정렬 및 오른쪽 Trailing 값과 텍스트와의 거리를 오토레이아웃 설정해 준 후 단축키로 업데이트 반영해 준다.
오토레이아웃을 잡다 보면 빨갛게 오류처럼 뜨는 경우를 볼 수 있는데, 이 부분은 컴퓨터 입장에서 생각하기에 설정해 준 오토레이아웃과 시스템에서 계산한 오토레이아웃이 다르다고 판단해 뜨는 경우가 있다고 한다. 시스템에서 틀린 것처럼 표시되지만 실제로 데이터를 고치면 이슈가 없어지거나 사라지는 것을 볼 수 있다. 이번 경우는 Leading 값을 >= 10 이상으로 설정해 수정해 주면 해당 부분이 수정.
데이터를 넣기 전에 셀에 대한 커스터마이징 셀 만들기.
cmd(⌘) + n을 통해 새 파일 생성 후 클래스 이름 및 컬렉션뷰에서 재사용을 하므로 Identifier를 같은 이름으로 설정해 준다.
셀을 담당하는 파일을 보기 위해 content view를 선택 후 Assistant를 통해 cell 객체로 이동 > Ctrl(⌃)을 누른 채로 코드에 끌어 @IBOutlet으로 연결해 준다.
연결이 잘 못되었을 경우 인스펙터 영역에서 확인 후 연결을 끊어주고 변경 후 다시 연결해 준다.
연결이 잘 못 되었을 경우 앱이 크래시 날 수 있기 때문에 잘 확인하는 습관을 가지는 것이 좋을 것 같다.
셀 구성을 할 때 만들어둔 챗내용 데이터를 받아서 각각의 이미지, 셀에 필요한 정보들을 업데이트해 줄 메서드 작성.
뷰컨트롤러랑 실제 스토리보드에 있는 UI 인터페이스 빌더랑 연결해 주기.
컬렉션 뷰를 코드에 연결해서 실제 데이터를 표현해 채워 넣기.
UICollectionView를 이용한 리스트 및 그리드 개발 시 핵심 3가지
Data / Presentation / Layout
해당 구현했던 부분에서 아쉬운 부분인 텍스트와 날짜를 다 나오게 수정하기 위해, 스토리보드에서 collection view 선택 후 설정에서 Estimate Size가 Automatic으로 되어 있는 부분을 None으로 수정한다.
Estimate Size는 해당 셀 자체의 사이즈를 설정해 주는 것인데, 이미 사이즈를 정해줬지만 Automatic으로 상황에 따라서 변경될 수 있도록 세팅되어 있는 부분을 None으로 변경하면 해당 셀 사이즈를 메서드에서 정해준 사이즈대로 나오는 것을 시뮬레이터를 통해 확인할 수 있다.
하지만 아직도 텍스트 부분이 잘린 것을 확인할 수 있는데 해당 레이블 사이의 간격을 정해줌으로써 이 부분도 설정을 변경해 준다.
날짜 부분이 차지하는 비중이 너무 길어서 이 부분도 구글링을 통해 ios datefomatter를 서치하고 참고해 해당 부분을 만들어서 같이 수정.
쉽게 말해 문자열인 부분을 다른 형태로 변경하기 위해 데이터 타입으로 formatter를 이용하여 변경을 해주고 다시 string 형태로 변환시킨다고 생각하면 된다.
날짜 부분을 sorted 내장함수를 이용해 내림차순으로 최신일순으로 변경하고, 시뮬레이터로 돌렸을 시 잘 변경된 것을 확인할 수 있다.
마지막으로 해당 이미지의 사진을 쫌 더 유연하게 코너 부분을 둥글게 변경, 이 부분도 awakeFromNib 함수를 이용해 코드를 넣어 변경.
날짜 부분을 sorted 내장함수를 이용해 내림차순으로 변경하고 시뮬레이터로 돌렸을 시 변화가 없어서 어떤 오류인지 오타가 있는지 한참 고민했다. 결국 부주의였으며 첫 번째로 변수로 변경해주지 않았던 부분이 오류가 난 것을 발견했고, 두 번째로 같은 코드가 반복되어 오류가 발생한 것을 확인했다.
이 부분들을 수정 후 시뮬레이터를 돌려보니 잘 변경된 것을 확인할 수 있었다.
또 다른 오류로 Thread 1: breakpoint 1.5가 발생했는데 해당 오류는 다른 글에 정리.
'IOS > UIKit' 카테고리의 다른 글
| [UIKit] mini project AppleFrameworks(UICollectionView) (0) | 2025.08.14 |
|---|---|
| [UIKit] mini project StockRank(UICollectionView) (2) | 2025.07.29 |
| [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 |