[SeSAC] 220809 TIL

IBInspectable, IBDesignable

스토리보드로 작업을 하다보면 인스펙터에서 속성값을 조정하는 일이 많은데 하나 가장 귀찮았던 것은 border 값을 설정하는 게 기본적으로 없다는 것이다. border 값을 매번 코드로 몇 줄씩 짜는 것보다 인스펙터 창에서 설정할 수 있으면 얼마나 좋을까?

 

IBInspectable과 IBDesignable 어트리뷰트를 이용하면 그것을 가능하게 할 수 있다.

• 인터페이스 빌더에서 실시간으로 객체에 속성을 적용하고 확인 가능
• 런타임이 아니라 컴파일 타임에 확인 가능
• 바로 반영이 안 될 수 있음

// 인터페이스 빌더 인스펙터 영역 Show
@IBInspectable
var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
    }
}

@IBInspectable
var borderWidth: CGFloat {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}

@IBInspectable
var borderColor: UIColor {
    get {
        return UIColor(cgColor: layer.borderColor!)
    }
    set {
        layer.borderColor = newValue.cgColor
    }
}

 

---

 

Custom View Design(with XIB)

1. XIB 파일과 UIView 클래스 만들어주기
2. File's Owner에 클래스 연결해주기
3. Safe Area LayoutGuide 해제하기
4. 사이즈 Freeform으로 조절하기

 

required init?(coder: NSCoder) 이니셜라이저(중요)

• Xib 파일은 컴파일 시 Nib 파일로 변환
• 화면에 출력하기 위해서는 init(coder: NSCoder)를 이용해서 객체를 생성해야 함. (코드 기반이 아니라 Xib로 파일을 만든다면!)

 

override init(frame: CGRect)

• 코드 초기화 구문
• 코드 베이스와 Xib 베이스는 초기화 구문을 서로 다르게 가져간다.
• 여기서 중요한 것은 코드 베이스라고 하더라도 required init?(coder: NSCoder) 구문을 작성해야 한다는 점이다.

 

Nib 파일 로드

• Nib 형식은 컴파일러가 이해할 수 있는 파일 형식
• Nib을 로드해서 사용자의 화면에 넣어주는 작업 필요
• UINib은 nib 컨텐츠를 메모리에 캐시하고 있음.
• instantiate 시점에 Unarchving 함 (- 아카이빙, 언아카이빙 개념 정리 필요)

let view = UINib(nibName: "CardView", bundle: nil)
    .instantiate(withOwner: self).first as! UIView
view.frame = bounds
self.addSubview(view)

 

---

 

셀 중첩 구조 실습

레이아웃을 구성하는 입장에서 정말 까다로운 것 중 하나가 중첩 구조가 아닐까 싶다. 솔직히 iOS 13 이상 부터는 Compositional Layout 덕분에 중첩 구조를 구성하는 것이 많이 쉬워졌기는 하지만 가장 기본적인 방법도 알 필요가 있다고 본다.

 

새롭게 잡은 포인트

생각해볼만한 포인트는 TableView Cell안에 Collection View가 들어가 있는 중첩 구조라고 가정했을 때, 기존에 나는 프로토콜을 채택하고 연결해주는 작업을 셀 안에서 해주었는데 컨트롤러로 끌고 와서 프로토콜을 채택하고 연결해주는 것이 더 나을 수 있다는 시각이었다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "MainTableViewCell", for: indexPath) as? MainTableViewCell else {
        return UITableViewCell()
    }

    cell.titleLabel.text = TMDBAPIManager.shared.tvList[indexPath.section].0
    cell.collectionView.delegate = self
    cell.collectionView.dataSource = self
    cell.collectionView.tag = indexPath.section
    cell.collectionView.register(UINib(nibName: "CardCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CardCollectionViewCell")
    cell.collectionView.reloadData() // Index Out of Range 해결
    return cell
}

결국에 데이터라는 것들이 컨트롤러에서 관리가 되고 액션 처리도 컨트롤러에서 해주는 부분이 많기 때문에 셀 안에서 어떤 처리들을 해주게 되면 코드의 가독성도 그렇고 데이터 처리도 번거롭게 될 수도 있다는 것이다.

 

Controller - TableViewCell - CollectionView - CollectionViewCell

 

생각해보니까 이 흐름으로 데이터를 계속해서 전달해주는 것이 번거로웠던 것 같다. 새로운 관점을 알게 되어서 재밌었다.