Review of Implement a Custom Control (1) - FoodTracker

이 장에서 해본 것들

1. Custom source code 를 작성하고 그것을 stroyboard 내의 요소과 연결하기

2. Container view로서 UIStackView 사용하기

3. 코드로 view 들을 생성하기

4. 접근성 정보를 custom control 에 추가하기

5. @IBInspectable, @IBDesignable 사용하여 Interface Builder에서 custom view 를 띄우고, 조작하기

---

 

Create a Custom View

Container View 인 UIStackView 안에 5개의 UIButton 을 넣어서 구현합니다.

 

UIButton 은 서브클래싱하여 Custom control 을 사용합니다.

 

만들어볼 Custom Control 의 구성

이 contol 을 통해 사용자는 meal ( 음식 ) 을 평가합니다.

 

사용자가 특정 별을 tap 하면, 특정 별을 포함한 이전의 별까지 모두 검은색으로 채워집니다.

 

예를 들어 사용자가 가장 오른쪽의 별을 tap 한다면, 모든 별이 검은색으로 채워질 것입니다.

 

그리고 채워진 별 중 가장 오른쪽의 별을 다시 tap 하면 모든 별이 비워집니다.

 

우선 UIStackView를 서브클래싱한 커스텀 코드를 만듭니다.

 

---

View 를 생성하는 방법은 크게 두 가지가 있습니다.

 

1. View를 코드로 초기화하기

2. Stroyboard 에서 불러오기

 

`1 `에서는 init(frame:)  메서드로 view를 초기화 합니다.

`2 `에서는 init?(coder:)  메서드로 storyboard에서 view를 불러옵니다.

 

Initializer 는 사용할 클래스의 인스턴스를 준비해주는 메서드라는 것을 상기하시기 바랍니다.

여기서 준비해준다는 것은 인스턴스의 각 속성을 초기화해주고 다른 setup 들을 수행하는 것을 의미합니다.

 

앱을 설계할 때, Interface Builder 는  view 를 canvas 에 추가할 때 코드를 이용해 view를 인스턴스화 합니다.

아래 단계를 진행하다보면, view와 연결된 관련 코드가 따로 없으면 Inspector configuration 에따라 적용함을 알 수 있습니다.

 

앱을 실행할 때, 앱은 stroyboard 에서 view를 불러옵니다.

 

그렇기 때문에 위 두 Initialization 모두 구현해야 합니다.

class RatingControl: UIStackView {
  
  //MARK: Initialization
  override init(frame: CGRect) {
    super.init(frame: frame)
  }
  
  required init(coder: NSCoder) {
    super.init(coder: coder)
  }
}

---

NOTE

Swift는 클래스에 어떠한 Initializer가 존재하지 않을 때, 자동으로 super class 의 모든 designated initializer 를 상속합니다.

 

만약 한 개 이상의 initializer 를 직접 구현한다면, 더 이상 super class 의 모든 designated initializer 들은 자동으로 제공되지 않습니다.

 

따라서 이 경우 super class에 `required` initializer가 있다면 반드시 구현해야 합니다.

 

추가적으로 sub class 는 구현한 super class 의 `required` initializer 앞에 `required` 키워드를 반드시 붙여야 합니다.

---

---

 

Display the Custom View

Story board 에서 Object Library 로 Horizontal Stack View 를  씬에 추가 한 후,

Identity Inspector를 통해 위에서 작성한 `RatingControl` Class 와 연결하였습니다.

---

 

Add Buttons to the View

 

코드로 스택 뷰에 버튼추가하기

 

위 단계에서, 저는 `RatignControl` 이라는 UIStackView 를 서브클래싱한 Custom class 를 만들었습니다.

 

이제 이 View 에 버튼(UIButton) 을 추가해야 합니다.

 

위의 두 개의 Initializer 중 어떤 메소드가 호출되더라도 버튼이 추가되어야 할 것 입니다.

 

따라서 private method로 버튼을 생성하는 코드를 작성 후 두 개의 Initializer에 모두 추가합니다.

Here, you are using one of the UIButton class’s convenience initializers. `UIButton()`

This initializer calls init(frame:) and passes in a zero-sized rectangle.

  //MARK: Private Methods
  private func setupButtons() {
    
    // Create the button
    let button = UIButton()
    button.backgroundColor = .red
    
    // Add constraints
    /* 1 */
    button.translatesAutoresizingMaskIntoConstraints = false
    
    /* 2 */
    button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
    
    /* 3 */
    button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true

    // Add the button to the stack
    /* 4 */
    addArrangedSubview(button)
  }

/* 1 */ 은 버튼의 constraints 가 자동으로 생성되는 것을 막습니다.

 

view 를 코드에서 인스턴스화 (Instantiate) 할 때, translatesAutoresizingMaskIntoConstraints 의 기본 값은 true 입니다.

 

이것은 layout engine 이 view 의 속성인 frame 과 autoresizingMask 에 기반해 자동으로 view의 크기와 위치를 설정한다는 것을 의미합니다.

 

보통 AutoLayout 을 사용한다면, 이 autogenerated constraints 들 대신 직접 설정한 값을 쓰고 싶어합니다.

따라서 false 로 설정하였습니다.

Layout engine이 자동으로 생성한 constraints = autogenerated constraints

 

/* 2 */ 와  /* 3 */ 에서 heightAnchor 와 widthAnchor 는 view의 높이와 넓이를 설정하는 constraints 를 생성합니다.

 

1. Button의 heightAnchor 와 widthAnchor 속성은 layout anchor 로의 접근을 제공합니다. 이 layout anchor를 통하여 constraints를 생성합니다. - 위 코드의 경우 view 의 height 와 width를 각각 정의하는 constraints 를 생성하였습니다.

 

2. Anchor의 constraint(equalToConstant:) 메서드는 immutable 한 height 혹은 width 크기를 부여하는 constraint를 반환합니다.

 

3. Constraints 의 isActive 속성을 통해 활성/비활성을 결정합니다. 값이 true라면, 시스템은 맞는 view 에 constraints 를 추가하고 활성화 합니다.

 

결과적으로 /* 1 */ /* 2 */ /* 3 */ 을 통해 Button 을 고정된 크기의 object로 정의하게 되었습니다. ( 44 points x 44 points )

 

/* 4 */ 에서 addArrangedSubview( )  메서드는 RatingControl 스택뷰가 관리하는 view의 리스트에 button 을 넣는 코드입니다.

이 메서드를 통해 button은 RatingControl의 subview가 되고, RatingControl 에게 RatingControl 내부에서 button 의 위치를 관리할 contstraints를 생성하도록 알려줍니다.

---

 

코드로 버튼에 액션 추가하기

private func setUpButton() {
  ...

  button.addTarget(self, action: #selector(self.ratingButtonTapped(button:)), for: .touchUpInside)
  
  addArrangedSubView(button)
}

@objc func ratingButtonTapped(button: UIButton) {
  //code
}

 

위 코드는 target-action pattern 을 코드로 구현하는 방법입니다.

 

addTarget(_, action:, for) 메서드를 이용합니다. button 에서 이 메서드를 통해 button에 touchUPInside 이벤트가 발생할때마다 ratingButtonTapped(button:) 메서드가 실행되게 합니다.

 

addTarget(_, action:, for) 메서드를 자세하게 분석 해보면:

 

첫번째 parameter 에는 target 이 들어가는데, action을 구현한 클래스에 전달해야하므로 `self 가 되겠습니다.

 

두번째 parameter 에서 #selector 는 주어진 메서드의 Selector 값을 반환합니다.

 

Selector는 메서드를 식별하는 불투명한 값 입니다.

 

오래된 API들은 메서드들을 동적으로 부를때 selector를 사용하였습니다.

 

performSelector(_:) and addTarget(_:action:forControlEvents:) 가 그 예가 되고 아직 사용하는 API입니다.

 

#selector(RatingControl.ratingButtonTapped(_:)) 가 ratingButtonTapped(_:) action method 의 selector 값을 반환해 줍니다.

 

세번째 parameter 에는 UIControlEvents 타입이 들어갑니다. 이 타입은 control 이 반응할 수 있는 이벤트의 종류를 정의하고 있습니다.

 

위 코드에서는 .touchUpInside 이벤트를 parameter로 전달하였습니다.

 

마지막으로, Interface Builder 로 액션을 연결하고 있지 않기 때문에, IBAction attribute 를 action 메서드 앞에 정의할 필요가 없습니다. 메서드의 parameter 옵션은 다음과 같습니다.

func doSomething()

/* 메서드를 호출한 control 인스턴스 전달 */
func doSomething(sender: UIButton)

/* control 인스턴스 plus 발생한 이벤트 종류 전달 */
func doSomething(sender: UIButton, forEvent event: UIEvent)

---

N O T E

 

관련 글: woozzang.tistory.com/50

 

추가적으로 `Touch Up Inside` 는 이벤트의 종류로서, 일반적으로 생각하는 탭 동작에 발생하는 이벤트입니다.

 

엄밀히 이야기하기 위해 `Touch Up Outside` 이벤트와 비교해보겠습니다.

 

사용자의 동작을 일단 Touch와 Up으로 분리해서 생각해야 합니다.

 

말 그대로 1. (손가락으로) 터치하는 동작과 2. (손가락을) 떼는 동작으로 구분하는 것입니다.

 

Touch Up Inside 는 뷰를 터치하고 있는 상태에서 해당 뷰의 바운더리 내(Inside)에서 손가락을 떼면 발생합니다.

 

일반적인 탭 동작이라고 볼 수 있습니다.

 

Touch Up Outside 는 뷰를 터치하고 있는 상태에서 드래그한 채로 이동하여 뷰의 바운더리 바깥(Outside)에서 손가락을 떼면 발생합니다.

---

 

 

 

끝!

---