[iOS/Swift] UIScrollView와 비교를 통해 가볍게 알아보는 UITableView, UIKit 기본

내가 생각하고 내가 경험하고 작성하는 UITableView..

들어가기 전

예시

  UI작업을 하다보면 실제 화면 사이즈보다 컨텐츠 내용이 더 많은 경우를 고려해서 작업을 해야합니다. 이런 경우 Scroll을 사용하게됩니다. iOS에서는 UIScrollView(UIKit), ScrollView(SwiftUI)가 우리를 도와주게 됩니다.  오늘 글은 UIScrollView와 비교를 통해서 UITableView를 알아보려고합니다.

네이버 웹툰

 제일 쉽게 접하는 곳은 웹툰이 있습니다. UIScrollView를 사용하면 다양한 해상도를 지원하기에도 좋습니다. 

 

UITableView를 왜 쓰는데?

 위에서 설명한대로 Scroll 가능한 도구가있는데 왜 UITableView를 쓰는지 궁금할 수 있습니다. 실제로 UIScrollView와 UITableView를 중 아무거나 사용해도 사용자에게는 티가 안나게 같은 화면을 그릴 수 있습니다. 하지만 각각 존재하는 이유가 있을태니 비교를 통해서 적절한 상황에 사용하도록 합니다.

UIScrollView VS UITableView

상황을 가지고 UIScrollView와 UITableView를 비교하도록 하겠습니다.

1. 화면을 넘어가는 데이터가 있는 상황

• UIScrollView, UITableView 모두 사용 가능.

2. 컨텐츠가 반복적이고 개수의 변화가 생기는 상황

• UIScrollView, UITableView 모두 사용 가능.
• UIScrollView의 높낮이는 AutoLayout과 StackView를 통해서 구현
• UIScrollView의 컨텐츠가 많으면 메모리 관리를 고려해야함.
• UITableView의 높낮이는 UITableViewCell의 높이와 개수로 결정
• UITableViewCell을 통해서 반복적인 화면을 쉽게 그리고 관리할 수 있음.
• UITableView 속 Cell이 재사용되면서 메모리를 기본적으로 관리해줍니다.

 둘의 공통점은 Scroll이 가능하며 디스플레이보다 긴 컨텐츠를 표시할 수 있다는 것 입니다. 하지만 UIScrollView는 정해진 컨텐츠 내에서 사용하는 성향이 강하고 UITableView는 유동적이면서 반복적인 성향이 강합니다. 그리고 메모리 관리적인 부분에서 차이가 생기고, 스크롤 높낮이를 관리하는데 있어서 차이가 있다는 것입니다.

Cell 재사용 예시

 UITableView는 데이터가 100개가 있어도 화면에 표시 가능한 Cell만 생성합니다. 스크롤하면서 없어지는 Cell을 보여질 Cell로 재사용합니다.

사용 예시

• 제 생각으로 예시를 들어 설명합니다.
• 실제 개발 적용은 다를 수 있습니다.
• 위에서 말했듯이 둘중 아무거나 사용해도 원하는대로 개발이 가능합니다.
• 어떤 상황에 사용하면 좋겠다~라는 예시로 읽어주세요.

UIScrollView

• 네이버 메인 화면

 반복적인 화면이 많지만 컨텐츠가 정해진 개수안에 표시됩니다. 한번에 로드를 통해 빠르게 컨텐츠를 표시하는게 사용성에 좋은 상황입니다.

• 휴대폰 설정 화면

 반복적인 화면이 많지만 OS 업데이트를 하지 않으면 변화가 없습니다. 표시하는 Row의 개수를 단말기가 알고있어도 크게 문제가 없습니다.

UITableView

• 채팅, SNS 친구 목록

 친구의 목록은 수시로 변할 수 있고, 개수를 고정할 수 없습니다. 서버에서 데이터를 받을 수도 있고, 단말기 데이터를 사용할수도있습니다. 즉 개수를 확신할 수 없다는 것입니다.

• 공지사항

 제목은 다르지만 양식이 같은 반복적인 Row가 존재합니다. 서버에 데이터를 가지고 화면을 표시합니다.

구현 with Storyboard

Storyboard

UIScrollView와 UITableView를 Scroll을 원하는 위치에 배치합니다. UITableView는 UITableViewCell을 사용해서 표현하기때문에 위치만 지정해도 구현하는데 어려움이 없습니다.

 

 UIScrollView는 기획에서 정의된 컨텐츠 높이만큼 UIViewController를 늘리고 작업하는게 편리합니다. 안에 담길 View를 다른 곳에서 작업한다면 UITableView와 같이 원래 단말기 사이즈 상태로 작업해도 괜찮습니다.

UIScrollView 컨텐츠를 채운 예시

UIScrollView의 컨텐츠를 기본적인 방법으로 채운 모습입니다.

UITableViewCell

UITableView에 사용하기 위한 UITableViewCell은 위 처럼 작업합니다.

위 방법으로 각각 실행하면 Scroll이 각자의 방식으로 적용된 모습을 볼 수 있습니다.

 

번외

1. 요즘은 세로 Scroll이 아닌 가로 Scroll도 지원하기 때문에 모두 지원하는 UICollectionView를 사용하기도 합니다.
2. 반복적이지 않아도 컨텐츠를 구역별로 숨기고 보여주기 편하게 UITableView를 사용해서 개발해도 좋다.
3. UITableView는 UIScrollView를 상속 받는다.

 

2022.11.05 - [iOS Dev/UIKit] - [iOS/Swift] TableView | Delegate, DataSource 메서드 정리

2022.11.05 - [iOS Dev/UIKit] - [iOS/Swift] TableView 기본 사용법, 리스트 테이블뷰에 표시하기, TableView Cell 기본 사용법

2022.11.05 - [iOS Dev/UIKit] - [iOS/Swift] TableView 선택 해제 기본 사용법, TableView Cell 선택 해제 기본 사용법, 색을 원래대로 되돌리기

 

 

 

 

 

참고

• iphone — Memory consumption of very long UIScrollView in iOS — Stack Overflow
• [iOS/Swift] TableView | Delegate, DataSource 메서드 정리 (tistory.com)
• [iOS — Swift] UIScrollView와 UIStackView로 UITableView처럼 만드는 방법 (code base) (tistory.com)[iOS — Swift] UIScrollView와 UIStackView로 UITableView처럼 만드는 방법 (code base) (tistory.com)