Review of Implement a Custom Control (2) - Food Tracker

Add Support for Interface Builder

@IBDesignable

Interface Builder는 view와 연결된 커스텀 코드에 대해서 전혀 모릅니다.

 

그래서 커스텀 코드를 반영하지 않은 채 인스턴스화하여 canvas에 그립니다.

 

커스텀 코드를 반영하게 하는 방법은 custom control code 앞에 @IBDesignable attribute 를 추가하는 것입니다.

 

이 Attribute 을 통해 Interface Builder 가 canvas에 view를 그릴때, 커스텀 코드를 올바르게 반영하여 그릴 수 있게 해줍니다.

" This lets Interface Builder instantiate and draw a copy of your control directly in the canvas."

 

추가적으로, Interface Builder 가 custom control의 생생한 카피본을 가지고 있으니, 그것의 layout engine 이 control의 위치와 사이즈를 적절하게 설정할 수 있게 됩니다.

 

요약: @IBDesignable을 추가하면 canvas에서 커스텀 코드의 적용사항을 확인할 수 있습니다. ( 추가하지 않으면 런타임에서만 가능 )

---

 

@IBInspectable

@IBInspectable  attribute를 control의 속성 앞에 추가하면, Attribute Inspector에 추가한 속성이 나타나게 됩니다.

 

아래는 관련 코드 입니다

  // StackView Custom Code `RatingControl.swift` 중
  
  @IBInspectable
  var starSize: CGSize = CGSize(width: 44.0, height: 44.0) {
    didSet {
      setupButtons()
    }
  }
  
  @IBInspectable
  var starCount: Int = 5 {
    didSet {
      setupButtons()
    }
  }

 

하지만 Attribute Inspector에서 변경한 속성은 적용되지 않을 것입니다.

앱 디자인 시점의 canvas 에서나 런타임 모두 적용되지 않습니다.

변경한 속성 값을 control에 적용하기 위해서는 변경 시마다 control을 리셋해주어야 합니다.

 

속성 값을 변경시마다 호출되는 Property observer를 추가하면 됩니다. ( 그중 `didSet` )

 

" This code iterates over all of the rating control’s buttons.

First, it removes the button from the list of views managed by the stack view.

This tells the stack view that it should no longer calculate the button’s size and position—but the button is still a subview of the stack view. "

 

위 문장에서 ArrangedSubView에 추가되는 것과 SubView의 추가되는 것은 별개라는 것을 알게 되었습니다.

ArrangedSubView 는 Subview의 부분집합으로서, SubView에 추가되는 것이 ArrangedSubView 추가되는 것이라고 볼 수 없습니다.

 

더 자세히 살펴보면, ArrangedSubView에 추가되면 Stack View는 이 아이템의 size와 position을 계산해야 한다는 것을 알게 되었습니다.

 

관련 글 1: arranged subview vs subview- stackoverflow
관련 글 2: arranged subview - apple developer documentation

---

N O T E

 

setUpButton( ) 의 로직이 퍼포먼스 관점에서 최고의 아이디어는 아니지만, 해당 메서드는 Interface Builder에 의해 앱 design time에 호출될 뿐이고, 앱 실행 시에는 단 한번 호출되기 때문에 문제가 되지 않습니다.

---

---

 

Add Star Images to the Buttons

 

Assets.xcassets 파일에 새로운 폴더를 만들고 3가지 상태의 별 이미지를 추가합니다.

Assets.xcassets 는 asset catalog를 담고 있는 파일입니다. Asset catalog는 이미지들을 저장하고 관리하는 장소입니다.

 

Assets.xcassets 화면 구성

 

To set star images for the buttons

 

Assets catalog 가 앱의 main bundle에 위치해있다는 것을 상기하세요

이것은 이미지를 UIImage(named:) 메서드로 불러올 수 있다는 것을 의미합니다.

하지만 control 이 @IBDesignable 이기 때문에, 구성 코드는 인터페이스 빌더에서도 실행될 필요가 있습니다.

이미지를  인터페이스 빌더에서 적절하게 불러오기 위해서는, 반드시 catalog의 bundle을 특정하여 명시해주어야 합니다.

이것이 시스템이 이미지를 찾고 불러오는 것을 보장해줍니다.

 

관련 글: Bundle

 

UIButton의 특징

• 5가지 상태를 가지고 있습니다. ( normal, highlighted, focused, selected, disabled )

• 기본적으로 상태에 의해 모습이 바뀝니다.

• 버튼은 동시에 여러 가지 상태일 수 있습니다.  예를 들면 disabled 이면서 highlighted 일 수 있습니다.

• 사용자가 버튼을 터치하면 버튼은 상태에 상관없이 항상 `highligted ` 상태가 됩니다.

• focused  상태는 focus 기반 인터페이스에서 사용됩니다.  ( Apple TV와 같은 )

---

 

Implement the Button Action

 

선택된 Button의 배열 내 인덱스를 찾는 구현에서 index(of:) 메서드는 deprecated 되었으므로, firsrtIndex(of:) 메서드를 사용하였습니다.

 

이외는 기존에 배운 내용의 복습 이므로 생략하였습니다.

---

 

Add Accessibility Information

 

기기 사용에 도움이 필요한 사람들에게 훌륭한 모바일 경험을 제공해 줄 수 있는 방법입니다.

 

VoiceOver, Switch Control, Guided Access 등을 포함합니다.

 

특히 VoiceOver는 저시력자 및 시각장애인에게 훌륭한 스크린리더가 됩니다.

 

VoicdeOver는 사용자에게 당신의 UI를 읽어 줍니다.

 

기존의 control 들 에게는 훌륭한 기본 설명이 되어 있지만, custom view와 control들에 대해서는 최적화가 필요합니다.

 

이하 Accessibility에 대한 내용은 따로 글로 작성하겠습니다.

---

 

Connect the Rating Control to the View Controller

기존에 배운 내용을 이용해 실습하는 내용이므로 생략하였습니다.

---

 

Clean Up the Project

 

클린 빌드 하는 법 : Command-Shift-K 이후 재빌드

 

Command-Shift-K 실행 시 `Clean Finished`메시지가 뜹니다. 이후 재빌드합니다.

 

 

 

끝!

---