[iOS 앱 개발 - Swift] Table View : 테이블 뷰 만들어보기

앞에서 공부했던 내용들을 이용해서 TableView의 구성을 직접 한 번 만들어봅시다! 이번의 목표는 아래 이미지의 테이블 뷰예요.

 

 

---

새 프로젝트를 하나 만들어서, StoryBoard에서 테이블 뷰를 하나 만들어주고, Table View, Table View Cell 을 올려줬어요.

 

 

그 다음에 Table View를 control 키와 함께 클릭해주면 보여지는 Outlet 창에서 DataSource와 Delegate를 View Controller와 연결해줍니다. 이 뷰 컨트롤러가 해당 테이블 뷰의 외형과 설정을 담당하겠다는 뜻이예요. 물론 이 내용도 코드를 통해 작성해줄 수 있습니다. 

 

스토리보드 상에서 연결해줄 수 있어요

또는 이렇게 아웃렛으로 가져와 코드로 연결도 가능합니다!

그 다음, Outlet으로 테이블 뷰를 코드와 연결해주고, 테이블 뷰에 담고싶은 데이터를 작성해줬어요. (데이터는 데이터소스에 해당하는 곳에 담아주면 됩니다. 저는 지금 뷰 컨트롤러를 데이터소스로 사용하고 있기 때문에 여기 담아줬어요)

 

 

이제, 이 클래스가 데이터소스와 델리게이트로 활용할 수 있도록 UITableViewDataSource와 UITableVIewDelegate를 채택하여 줍니다.

 

 

앞의 포스팅에서 언급했듯이, DataSource는 2 개의 필수 메서드를 가지고 있기 때문에 이를 작성해주지 않으면  위의 이미지처럼 에러가 발생하게 됩니다! 따라서 Fix 버튼으로 필수 메서드를 생성하거나 다음 이미지처럼 메서드를 작성해주어야 합니다. 

 

위의 메서드는 테이블 뷰의 한 섹션당 몇 개의 셀을 담을 것인지를 Return 해줘야 하는 메서드이고, 아래는 각 row에 해당하는 cell을 Return 해줘야 하는 메서드입니다. 이 두 정보를 기본으로 하여 테이블 뷰의 데이터를 컴퓨터가 작성하게 됩니다.

 

이 메서드들, 또는 다른 선택가능한 메서드들은 UITableViewDataSource 나 UITableViewDelegate 에서 Jump to Definition 으로 이동하여 확인 가능합니다. 아래는 데이터소스에서 요구하는 메서드들로, optional이 붙은 메서드들은 선택 가능한 메서드, 그렇지 않은 두 메서드가 필수적으로 작성해주어야 하는 메서드 입니다! 

 

---

이렇게 필수적으로 작성해줘야 하는 메서드는 다 자리를 잡아줬습니다. 우리의 테이블 뷰를 만들기 위해 필요한 추가적인 정보를 한 번 입력해볼게요.

 

일단 한글 - 영어 2개의 섹션을 사용할 거니까, 이에 대한 정보를 전달해줍시다. 

UITableViewDataSource에 있는 numberOfSections 함수로 테이블 뷰의 섹션이 2개라는 걸 알려줍니다. 이 함수들은 딱히 호출해주지 않아도 컴파일러가 알아서 반환값을 받아가서 테이블 뷰를 만들 때 사용하게 되나봅니다.

 

 

이제 아까 프로토콜을 만족시키기 위해 작성해준 두 메서드의 내용을 채워볼게요.

 

첫 번째 메서드는 각 섹션에 몇 개의 Cell이 들어가는 지를 반환해달라는 메서드인데, 인자로 전달되는 section값에 따라 반환값을 달리해주면 됩니다. 간단하게 작성하기 위해 Switch문을 사용해줬어요. 몇 번째 Section인지에 따라 필요한 값을 반환해주면 됩니다!

 

 

두 번째 메서드는 테이블 뷰에 사용될 모든 Cell들을 반환해달라는 메서드입니다. 이 메서드의 인자로 IndexPath가 전달되는데, 이 값에서 접근자 (.)으로 어떤 section과 row에 들어갈 cell을 원하는지 알 수 있어요. 각 Section과 Row에 알맞는 Cell을 반환해주면 됩니다. 

아래의 코드에서는 섹션이 2개뿐이니 3항 연산자를 통해 둘을 분리해줬지만, 3개가 넘어간다면 위의 switch 문처럼 코드를 작성해주면 편할 것 같네요!

 

 

이 만큼 코드를 작성해주고 빌드를 해주면 다음과 같은 테이블 뷰를 얻을 수 있습니다. 

원하는대로 만들어지긴 했지만, 각 섹션이 분리가 되지 않으니 뭔가 정리가 안되어있는 느낌인 것 같네요. ㅋㅋㅋㅋ

두 섹션 앞에 Header를 달아서 둘을 분리시켜줍시다! title과 Header를 입력하니까 자동완성으로 이걸 사용하라고 알려주네요. 인자로 전달되는 section에 맞게 헤더를 달아줍시다.

 

 

그럼 아래와 같은 테이블 뷰를 얻을 수 있어요. 좀 더 나아지긴 했지만, 그래도 어딘가 불편하죠? 자주 보던 형식이 아닌 어색한 모습이 되었어요. 

테이블 뷰의 맨 처음 포스팅에서 작성했던 것 처럼, 지금 테이블뷰의 스타일이 Plain 이라 두 섹션을 구분짓지 않기 때문이예요. Grouped로 스타일을 바꾸어줘서 두 섹션을 눈에 띄게 구분지어봅시다.

훨씬 보기 편하고, 익숙한 모습의 테이블 뷰가 되었네요. Plain 스타일과 Grouped 스타일의 사용 목적이 다른 것을 생각하면서 그에 따라 상황에 맞게 스타일을 선택해주면 될 것 같네요!

---

이 포스팅은 edwith 부스트코스의 iOS 프로그래밍 강좌를 들으면서 내용을 정리하고 작성한 글입니다. 

해당 강좌의 모든 강의와 강의자료는 무료로 개방되어있고, 네이버 아이디로도 강의를 들을 수 있으니 아이폰 앱개발에 관심이 있으신 분은 아래에 달려있는 링크를 한 번 확인해보시기 바랍니다!

 

이렇게 Xcode로 필요한 기능을 만드는 걸 영상으로 보고 직접 따라하면서 만들 수 있으니 iOS 개발을 공부하기에 정말 좋은 것 같아요! 모든 영상에 강사님의 말을 자막으로도 달아둬서, Xcode랑 왔다갔다 하면서 강의를 들어도 자막을 통해 말을 알아들을 수 있어서 다른 강의들보다 훨씬 듣기 편해서, 강의 들으며 공부하기 엄청 편해요!

 

https://www.edwith.org/boostcourse-ios/lecture/16888/

[LECTURE] 4) 간단한 테이블뷰 만들기 : edwith