원피스 현상금 랭킹앱 만들기(1) - 테이블뷰 기초개념

 

 

이번 목표는 원피스 현상금 랭킹앱을 만들면서 테이블뷰에 대한 기초 개념을 익히는 것이다.

구현 목표는 아래와 같다.

구현목표

 

화면은 크게 2개로 구성되어있고 각 셀을 클릭했을 때, 자세한 내용을 표시해주는 페이지를 모달로 구현한다.

모달 : 아래에서 위로 올라오는 스타일의 뷰 전환 방식

 

여러 아이템을 리스트로 보여주는 것이 주요 학습목표이다. 

 

여러 앱에서 볼수 있는 리스트형식

리스트

UITableView

아이템을 나열해서 보여주는 방식

각 데이터들은 테이블 뷰 셀을 가지고 있다. 

테이블 뷰 셀은 다양하게 표현가능한데 시스템상의 기본 셀 뿐만아니라 커스텀해서 사용하기도 한다.

대부분은 커스터마이징해서 사용

 

Recycle cell

테이블 뷰는 셀을 재활용 해서 보여준다.

우리가 100개의 데이터를 보여준다고 할때 실제로 화면에 띄울 수 있는건 20개도 안된다.

실제로 보여줄수 있는 셀은 한정적이기 때문에 화면에 보여줄 수 있을 만큼만 만들어 재사용한다. -> 훨씬 효율적

 

먼저 프로젝트를 생성한다.

메뉴중 앱을 선택한다.

기존의 화면이 아래와 같지만 최근의 업데이트로 Xcode 13부터는 위 그림과 같이 달라졌다.

 

프로젝트의 이름을 작성하고 Storyboard를 선택

 

그러면 이제 앱 초기화면이 나온다.

오늘은 뷰컨트롤러를 새로 만들어 볼 예정이다.

좌측의 ViewController를 삭제하고

상단 - File - New - File 을 누른다.      단축키는 ⌘ + N

Cocoa Touch Class를 선택

 

Class에 클래스 명을 입력하고  Subclass of 에는 상속받을 클래스를 입력한다

 

생성완료!! 그러면 이제 새로 만든 뷰컨트롤러를 Xcode의 앱 내에서도 직접선택해서 연결해줘야하는 것이 있다.

 

먼저 오탈자를 만들지 않기위해 방금 만든 클래스 명을 복사한다.

그다음 우측 Inspector창에서 상단 7개중 4번째 항목을 누른다. 이곳이 custom class 라는 부분인데

여기서 ViewController를 방금 복사한 BountyViewController로 변경한다. 그러면 끝!

변경후

 

상단을 보면 현재 iPod touch 7세대로 세팅되어있는데 누르면 다른 기종으로 변경 가능하다. 원하는 기종을 선택후 좌측의 재생버튼을 누르면 가상 에뮬레이터(가상 아이폰?)이 재생된다.

 

 

처음 재생을 누르면 (앞으론 빌드 버튼이라고 부르겠습니당) 로딩이 좀 걸린다. 나도 왜 안되지? 하며 조마조마했던 적이 있는데 

최초 실행은 빌드하는 시간이 걸린다. 아래 화면이 폰을 켜는 것이고  앱을 최초로 실행할때 빌드하느라 오래 걸린다고 생각하면 된다.

처음만 느리고  이미 켜진 다음엔 그리 안걸린다.

 

짜잔 아무것도 만들지않아 하얀바탕화면

 

다시 돌아가서 이제 리스트라는 오브젝트를 띄워보려고 한다.

우측 상단의 + 버튼을 누르면 만들수 있는 Object가 여러개 있다.여기서 테이블뷰 를 선택후 내 화면에 드래그 한다.

그리고 크기를 조정한다

완료

이렇게 가져와서는 바로 오토레이아웃을 해주는 것이 좋다. 

 

먼저 오토레이아웃할 오브젝트를 선택한다.

그리고 함께 오토레이아웃할 곳에    ⌃ 컨트롤 키를 누르고 드래그를 하면 선택창이 생긴다 여기서 하나를 누르면 바로 선택후 꺼진다.

우리는 여러개를 선택해야하니까 그상태에서  시프트 ⇧ 를 누르고 Leading, Top, Trailing, Bottom 을 다중 선택한다.

 

그러면 아래에 Constraints가 생성된다.

그리고 우리는 테이블뷰 안에 셀을 만들어야 하기 때문에 우측 상단의 오브젝트 추가에서 셀을 선택후 "테이블뷰"에 드래그 한다.

 

그러면 셀이 적용된 테이블뷰 적용 끝!