[iOS] 테이블 뷰 컨트롤러 구현해보기 (1/2) - HoonIOS

안녕하세요 HoonIOS입니다. :)

 

저번에는 테이블 뷰 컨트롤러의 델리게이트와 데이터 소스의 역할 및 몇 개의 메서드를 확인해봤습니다.

boidevelop.tistory.com/73

[iOS] 테이블 뷰 컨트롤러에서 데이터 소스 & 델리게이트에 대해 - HoonIOS

이제 테이블 뷰 컨트롤러를 통해 포스팅 한것을 통해 구현을 한번 해보겠습니다.

 

이번에 구현해볼것은 제가 좋아하는 야구팀인 두산베어스 선수 3명을 목록으로 보여줄 것입니다. 

간단하게 구현하는것이니 데이터 소스를 만들어줘 각 뷰 컨트롤러로 뿌려줄 것이고 테이블 뷰 셀을 클릭할 때마다 몇 번째 행인지 나타나는 간단한 프로젝트를 구현해보겠습니다.

 

우선 제일먼저 테이블 뷰 컨트롤러를 추가해줍니다.

 

이 테이블 뷰컨트롤러의 커스텀 클래스를 만들어 연결해 주겠습니다.

( 클래스 이름은 PlayerListController로 하겠습니다. )

 

클래스 생성

 

 

이제 테이블 뷰 셀을 설정해 보겠습니다.

 

테이블 뷰 셀을 클릭해서 style 인스펙터를 보면 아래와 같이 스타일을 구성할 수 있습니다. 그렇지만 저는 제가 직접 커스텀을 해주기 위해서 Custom으로 하겠습니다.

※ 참조

• 여기서 커스텀을 빼고 나머지 Basic, Right Detail, Left Detail, Subtitle을 이용하면 좀 제약이 많은 받면 구성 작업이나 코드양이 많이 절약을 할수 있습니다.
• Custom으로 작성을 하면 일일이 하나씩 작성을 해줘야 하기때문에 설정해야 하는 부분이 많아 코드양이 많아 질수 있지만 자유도가 상당히 많아져 다양하게 테이블 셀들을 원하는데로 구현을 할수 있습니다.

 

테이블 뷰 셀에 선수 사진을 넣을 image뷰와 이름, 생년월일을 표시해줄 label을 추가해주겠습니다.

 

 

이제 테이블 뷰 셀의 식별 아이디를 설정해주겠습니다.

 

* 설명

• 프로토타입 셀을 참조할때 사용됩니다. 즉 프로토타입 셀이 한 테이블 뷰에 여러 개일 때 식별을 하기 위해서 사용이 됩니다.
• 테이블 뷰 셀의 식별 아이디를 설정해주는 이유는 추후에 재사용큐를 통해 해당 셀의 인스턴스를 생성해줄 때 식별해주기 위해 설정을 하는 것입니다.

이제 테이블 뷰의 Accessory속성을 설정해 주겠습니다.

 

이 속성의 위치가 어디냐고요? 셀의 오른쪽 끝에 표시될 아이콘을 선택하는 데 사용이 되는데 이 영역을 Accessory영역이라고 부릅니다.

 

※ Accessory의 종류에 대해 알아보겠습니다.

Accessory의 종류가 이렇게 총 5가지가 있습니다. 종류의 모양들을 한번 봐보겠습니다.

• None은 아무것도 체크를 안해주는것입니다.
• Disclosure Indicator

• Detail Disclosure 

 

• Checkmark

• Detail

 

 

여기서는 Disclosure Indicator로 지정을 해주겠습니다.

 

이제 중간 테스트로 한번 컴파일시켜 보겠습니다.

 

* 설명

• 아무것도 설정 안 해주고 테이블 뷰 컨트롤러만 생성해 줬으니 이렇게 빈 테이블 뷰들만 나오는 것입니다.

 

휴 아무것도 없을 때는 그냥 테이블 뷰 셀이 아니라 빈 화면이 나오게 하고 싶습니다.  매우 간단합니다. 스토리보드에서 아래에 뷰를 하나 추가해주면 됩니다.

 

이제 진짜 빈 화면이 나오는 확인을 해보겠습니다.

 

 

이제 선수들의 정보를 담고 전달해줄 객체( 모델 )를 만들어주겠습니다.

 

* 코드 설명

• 각 이름, 날짜, 불러올 이미지를 데이터 소스에 넣어주기 위해서 변수들을 구성했습니다.

각 테이블 뷰 셀에 넣어줄 데이터 소스를 만들어 주겠습니다.

 

* 코드 설명

• 각 데이터를 playerName, playerDate, playerImage를 넣어줍니다.
• 여기서 UIImage는 모듈 내에 넣어준 이미지를 불러온 것입니다. UIImage(named:)를 통해서 해당 이름에 속한 이미지를 불러옵니다.

 

※ 참조

• UIImage(named:)메서드에 대해
  - 이미지 파일을 열고 데이터를 읽을때 I/O(입출력)가 발생을 합니다. 근데 열고 읽을때마다 I/O가 발생을 하면 큰 성능의 차이가 있습니다.
  
  - 이런 문제를 해결하기 위한 방법중에 하나가 캐싱이 있습니다. UImage(named:) 메서드로 생성한 이미지 객체는 메모리에 저장되 두번째 호출 부터는 메모리에 저장된 이미지를 가져오게 됩니다.
  
  - 단 이 메서드의 단점은 이미지를 이미 다 사용했는데도 메모리 해제가 되지 않는다는점입니다....ㅠㅠㅠ
  한번만 사용하는 이미지라면 엄청난 메모리를 잡아먹어 누수가 발생을 하겠죠...?ㅠ
  
  
• 그럴때를 대비해서 UIImage(contentsOfFile:)메서드를 사용합니다.
  - 이 생성자를 사용해서 생성된 이미지 객체는 캐싱이 따로 되지않습니다.
  
  - 근데 또 멍청이처럼 엄청나게 자주 호출되는 이미지를 이 메소드를 통해 불러오면 매일 호출될때마다 I/O가 발생하므로 성능저하가 발생하게 됩니다.
  
  - 이 메서드는 자주 호출되지 않는 이미지에게 적절한 메서드입니다.
  - UIImage(contentsOfFile:)메서드는 웹에 있는 이미지를 불러올수 있습니다.
• 참고
  - 만약 웹이 있는 이미지를 데이터를 불러온다음 이 데이터를 이용해 UIImage객체로 만들면 이 객체를 이용해서 화면에 이미지를 표시해줄수 있습니다.
  
  - let imageData = try! Data(contentsOf: url)
  imageView.image = UIImage(data: imageData)
  
  or
  
  imageView.imgage = UIImage(data: Data(contentsOf: URL(string: ~~!)!))

 

 

이제 이 데이터 소스들을 playerVO객체에 담아 순서대로 배열에 추가해줄 것입니다.

 

* 코드 설명

• list인 객체 배열을 만들고 for문을 통해 데이터 소스를 pvo객체 넣어준 다음 datalist배열에 순서대로 추가해주고 추가해준 배열을 반환하도록 해줬습니다.
• 여기서 lazy인 지연 저장 프로퍼티를 사용한 이유는 첫 번째 미리 생성해서 불필요한 메모리 낭비를 하는 상황을 줄이기 위한 것이고 두 번째지연 저장을 하면 다른 일반 프로퍼티를 초기화 다 한 후에 맨 마지막으로 초기화가 되기 때문에 지연 저장 프로퍼티에서 다른 프로퍼티를 참조할 수 있기 때문입니다.
• 따라서 여기서 data변수를 참조할수 있었던 이유는 두 번째 이유였습니다. lazy를 붙여 줬기 때문에 data보다 뒤에 초기화를 해줬기 때문입니다.

 

이제 UI랑 데이터 소스 설정까지는 완료 했습니다. 글이 너무 길어서 다음 포스팅에서 부터는 델리게이트, 데이터소스 메서드를 통해서 화면에 값을 표출해주고 이벤트에 대한 반응을 한번 살펴보겠습니다.