SeSAC iOS 데뷔과정 2기

0809 새싹 27회차 정리 - XIB UIView Custom Class

Lia's iOS 2022. 8. 10. 09:04
iOS 앱 개발자 데뷔 과정 27회차

 

 

 

 

#1. Checklist

- XIB UIView Custom Class

UITableViewCell, UICollectionViewCell 뿐만 아니라 UIView를 상속받은 Subclass에서도 XIB를 만들 수 있다.

UIView XIB 만들기

 

SafeArea Layout Guide & Freeform Size

Safe Area Layout Guide 체크 해제 / Freeform Size

ViewController가 아니기 때문에 SafeArea를 가질 필요가 없어 Safe Area Layout Guide를 해제하고 작업한다.

그리고 Size Inspector의 Simulator Size를 Freeform으로 조절해 원하는 UIView의 크기로 만들어서 작업할 수 있다.

 

 

File's Owner

Custom Class를 View가 아니라 File's Owner에서 설정하면 View를 여러개 생성할 수 있기 때문에 자유도가 높아진다.

 

 

 

 

- Initializer

required init?(coder: NsCoder)

UIView를 XIB 파일로 만들고, 안에 추가한 ImageView를 아웃렛 연결까지 해준 뒤 코드를 작성하면 ImageView를 인식하지 못한다.

XIB에서는 xml 형태로 Interface Builder 구성 정보를 가지고 있지만 컴파일 시 Nib 파일로 변환이 되기 때문에, 이를 사용자의 씬에 출력하기 위해서는 init(coder: NSCoder)를 통해 객체를 생성해주어야 한다.

required init을 자동완성으로 호출하면 위와 같은 에러메세지가 발생하고,
Fix를 누르면 기본적인 형태가 나타난다.

Protocol Initializer Requirements ( 프로토콜 생성자 요구사항)

Protocol을 채택한 타입은 이니셜라이저를 designated initializer나  convenience initializer로 구현할 수 있다.

두 경우 모두 앞에 required 를 붙어야 하는데, 해당 Class를 상속받는 클래스도 프로토콜을 준수해야하기 때문이다.

 

Failable Initalizer  (실패 가능한 이니셜라이저)

때때로 초기화가 실패할 가능성이 있는 클래스, 구조체, 열거형을 만들어 사용할 수 있다.

이럴 때 초기화 실패를 대처하기 위해 Failable Initalizer를 만들면 유용한데, init 뒤에 ?를 붙이기만 하면 Failable Initalizer가 된다.

프로토콜의 이니셜라이저가 Failable Initalizer라고 했을 때, 준수하는 쪽에서도 꼭 Failable Initalizer 형태일 필요는 없다.

최소 요구 사항이기 때문에 준수할 때에는 Non-Failable Initalizer이어도 상관없다.

 

override init(frame: CGRect)

Interface Builder에서 사용되지 않고, UIView를 상속받은 Custom Class를 코드로 구성할 때 사용하는 생성자이다.

코드로 Custom Class를 구성할 때에는 required init?(coder: NSCoder)를 함께 호출해야 한다.

 

 

 

- @IBInspectable / @IBDesignable

Interface Builder에서 컴파일 시점에 실시간으로 객체에 속성을 적용하고 확인할 수 있다.

Computed Property (연산 프로퍼티) 를 이용해, 새로운 속성을 받아오는 set과, 받아온 속성을 적용하는 get을 작성할 수 있다.

 

 

 

- TableView in CollectionView /  CollectionView in TableView

드디어 테이블뷰 안에 컬렉션뷰가 들어있는 형태를 구현해보았다.

하나하나 뜯어보면 다 아는 내용이지만, 하다보면 프로토콜과 셀과 뷰객체가 꼬여서 헷갈리게 된다.

번호를 매겨 진행한 순서대로 나열해보자.

 

1. CardView (공용으로 사용할 예정인 셀의 디자인)

 

2. MainTableViewCell

 

 

3. CardCollectionViewCell

 

4-1 MainViewController

 

4-2 MainViewController - TableView

 

4-3 MainViewController - CollectionView

 

특히 이번에는 CollectionView를 두개 만들어서 진행했기 때문에, 4-3의 주석처럼 구현해야 했기 때문에 더 어려웠다.

해당 객체가 어디에 위치하고 있는지, 누구의 아래에 있는지 잘 생각하며 구현해야 한다.

 

 

 

 

#2. Assignment

-  TMDB 프로젝트에서 UI 구성하기

데이블뷰 안에 컬렉션뷰가 들어있는 UI 구성

참고 자료(좌), 결과물

 

 

 

 

 

# 그 외

- UIButton Point Size : 버튼 이미지 크기 조정

UIButton에 설정한 이미지 크기를 키우고 싶을 때, 어쩔 때는 Point Size를 직접 조절 가능하지만 또 어떨 때에는 안될 때가 있었다.

이 두 상황의 차이점을 모른 채 사용하고 있었는데, Point Size는 SF Symbol만 조절 가능하다고 한다.

 

 

 

- isPagingEnabled : 스크롤 맞추기

배민을 한번 생각해보면, 배너의 스크롤을 넘길 때 대충 스크롤해도 한칸이 넘어갈 때마다 척척 알아서 멈추게 된다.

위의 코드 한줄만 추가하면 해당 기능을 구현할 수 있는데, 디바이스 크기와 셀의 크기가 딱 맞아야 정상적인 구현이 가능하다.

 

 

 

 

# 유용한 오픈소스

ImageSlideshow : https://github.com/zvonicek/ImageSlideshow

이미지 넘기기, 줌인 줌아웃