0720 새싹 13회차 정리

iOS 앱 개발자 데뷔 과정 13회차

 

 

 

 

#0. Memo

- TableView Cell 높이 비율로 잡기

TableView는 스크롤이 가능하기 때문에 굳이 비율로 잡을 필요 있을까 싶지만, 이렇게 하면 된다.

 

 

 

-  매개변수와 구조체를 활용해 cellForRowAt에서 효율적으로 데이터를 전달해보자

우선 간단하게 식판에 비유하면 아래와 같다.

1. 프로퍼티가 담겨있는 구조체(식판)

2. 프로퍼티 초기화시키기(식판에 반찬 받기)

3. TVC cellForRowAt (반찬 꺼내먹기)

1. 구조체(식판), 2. 프로퍼티 초기화(반찬 받기)

어떤 타입의 변수가 필요한지를 프로퍼티에 선언하고, 뷰컨트롤러 파일 내에서 초기화를 시켜주는 것이다.

그 다음 movieList의 정보를 아래의 cellForRowAt 메서드 내부에서 사용하면 된다.

그리고, 이렇게 하는 방법도 있다.

3. cellForRowAt에서 사용할 코드 함수로 빼놓기(반찬 한꺼번에 받기)

원래라면 cellForRowAt 내부에 작성할 예정이었던 코드를, cell 파일에서 함수로 묶어놓은 것이다.

cell이 어떤식으로 구성되어 있는지, cell 내부의 뷰객체들이 어떤 레이아웃을 가지고 있는지는 뷰컨트롤러에게 있어 중요한 사항은 아니기 때문에, 밖으로 빼서 코드의 가독성을 더 높힐 수 있다.

 

 

 

- CollectionViewController

테이블뷰와 유사한 특성을 지니고 있고 사용하는 메서드도 비슷한데, Row를 Item이라고만 하면 된다.

아이템의 갯수는 numberOfItemsInSection 를, 아이템의 지다인과 데이터는 cellForItemAt 를 사용한다.

컬렉션뷰 아이템의 좌우 공백을 없애면 테이블뷰와 동일한 형태가 되기 때문에, 리스트 형태에도 컬렉션뷰를 사용하기도 한다.

참고로 컬렉션뷰의 셀의 크기를 스토리보드에서 조금씩 늘려 보면, 어느 순간부터 중앙에 위치하게 된다.

이는 컬렉션뷰의 크기가 화면의 절반(너비 혹은 높이)을 넘어갔기 때문에, 셀이 두개 이상 위치할 수 없어서 자동으로 중앙으로 오는 것이다.

 

 

 

- CollectionViewFlowLayout

CollctionView에서 Layout을 변경하려면 FlowLayout이라는 클래스를 사용해야 한다.

인스턴스에 초기화 시킨 다음 인스턴스를 통해 레이아웃을 변경하는 것이다.

- itemSize : cg사이즈 타입이며, width와 height이 필요하다.

- ScrollDirection : 스크롤의 방향(Horizontal/Verticla)

- sectionInset : section의 바깥(테두리)쪽의 속성으로, 가장 바깥 셀들의 가장 바깥 면에 적용된다.

- minimumLineSpacing : 줄 간의 거

- minimumInteritemSpacing : 아이템간의 거리

sectionInset과 minimumLineSpacing/minimunInteritemSpacing은 같은 spacing을 주고 있기 때문에 각각 8만큼의 spacing이 들어가겠지만, 들어가는 위치가 다르다.

 

itemSize를 비율로 주고 싶다면 우선 프로퍼티를 만들어 main.bounds.width 에서 spacing을 준 만큼을 제외한다.

그리고 해당 프로퍼티를 원하는 셀의 갯수만큼 나눈 값을 itemSize에 입력하면 된다.

 

 

 

 

- CollectionView의 Estimate Size는 꼭 None으로 두자

우선, 코드로 레이아웃을 설정하기 전에 Estimate Size를 None으로 설정해야 한다.

자동으로 사이즈를 추측해서 보여주는 기능이기 때문에 방해된다.

이렇게 수직 스크롤과 수평 스크롤도 선택할 수 있다.

수평은 많이 쓸 일은 없을 것 같다.

 

 

 

- didSelectItemAt

컬렉션뷰에서 아이템을 선택했을 때 호출되는 메서드이다.

테이블뷰에도 비슷한 메서드가 있으며, 액션함수와 비슷하게 사용할 수 있다.

 

 

 

 

#1. Checklist

- UICollectionViewController

#0. Memo CollectionViewController 참고

 

 

- UICollectionViewFlowLayout

#0. Memo CollectionViewFlowLayout 참고

 

 

 

 

#2. Assignment

- 도서 프로젝트 만들기

참고 자료(좌), 결과물(우)

셀의 데이터와 설정을 담당할 configureCell 함수와, 레이아웃을 담당할 layoutCell 함수는 CollectionViewCell 파일 안에 작성했다.

셀의 컬러는 colorList를 만들어 어두운 톤의 시스템 컬러를 몇개 추가한 뒤, randomElement로 설정해주었다.

 

 

 

 

 

# 그 외

- 이번에 사용해본 Opensource Library

Toast : https://github.com/scalessec/Toast-Swift

알럿과 달리 잠깐 나왔다 사라지는 알림창 기능

 

Kingfisher : https://github.com/onevcat/Kingfisher

이미지 URL을 에셋에 추가하지 않고 바로 따오는 기능