[Swift] 위젯을 만들기 2탄 (Today Extension, Widget)

안녕하세요! 오늘은 저번 포스팅에 이어서 위젯만들기 2탄.. 위젯의 확대축소, 그에따른 autoLayout을 설정하는 방법에 대해 알아볼거에요. 혹시 1탄을 못보신 분들은 밑의 링크를 따라가주세요!

위젯 만들기 1탄 보러가기

위젯 확대 축소 만들기

위젯의 확대축소 기능을 넣을려면 viewDidLoad 부분에 위 코드를 추가해주면 되요.

extensionContext?.widgetLargestAvailableDisplayMode = .expanded

추가를 한 다음 빌드를 해보면 위젯 상단부분에 '>' 모양이 생겼을거에요. 하지만 눌러봐도 아무반응이 없는데 그 이유는 확대축소시 작동되는 메소드를 작성 안해서 그래요. 아래 코드를 추가로 작성해 줍시다.

   func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
        switch activeDisplayMode {
        case .compact:
        // 축소했을때
            preferredContentSize = maxSize
        case .expanded:
        // 확대했을때
            preferredContentSize = CGSize(width: maxSize.width, height: min(230.0, maxSize.height))
        @unknown default:
            preconditionFailure("Unexpected value for activeDisplayMode.")
        }
    }

이제 '>' 버튼을 눌러보면 확대 축소되는 모습을 볼 수 있을거에요.

하지만 여기서 문제가 있어요. 현재는 label이 하나만 있는 단순한 뷰이기 때문에 autoLayout 에 아무 문제가 없는 것 처럼 보이지만 확대가 되면서 View의 크기가 커지기 때문에 autoLayout을 재설정 해주는 작업이 필요해요.

autoLayout 삭제, 추가하기

NSLayoutConstraint.deactivate() // autoLayout 삭제
NSLayoutConstraint.activate() // autoLayout 추가

이걸 이용해서 확대에서 축소로 변할 때, 축소에서 확대로 변할 때 이전 autoLayout 을 삭제하고 다시 새로운 autoLayout 을 추가해주는 작업을 해주면 되요.

그래서 축소일때의 autoLayout , 확대일때의 autoLayout을 array로 묶어서 추가하고 삭제해주면 편해요.

class TodayViewController: UIViewController, NCWidgetProviding {
    var compactConstraint: [NSLayoutConstraint] = []
    var expandedConstraint: [NSLayoutConstraint] = []
  ...

  override func loadView() {
       ...
    NSLayoutConstraint.activate([
      // 고정적인 autoLayout 부분
    ])

    compactConstraint = [
      // 축소일 경우 autoLayout 
    ]

    expandedConstraint = [
      // 확대일 경우 autoLayout 
    ]

    NSLayoutConstraint.activate(compactConstraint)
  }
  ...

   override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
                // 뷰가 축소일 경우
        if extensionContext?.widgetActiveDisplayMode == .compact {
            NSLayoutConstraint.deactivate(self.expandedConstraint)
            UIView.animate(withDuration: 0.3, animations: {
                NSLayoutConstraint.activate(self.compactConstraint)
            })
        } else { // 뷰가 확대일 경우
            NSLayoutConstraint.deactivate(self.compactConstraint)
            UIView.animate(withDuration: 0.3, animations: {
                NSLayoutConstraint.activate(self.expandedConstraint)
            })
        }
    }
}

오늘은 위젯의 확대축소 기능을 넣고, 확대축소시 변하는 autoLayout 을 재설정하는 방법에 대해 알아봤어요. 제가 현재 진행하고 있는 프로젝트에서 위젯 부분을 하고있는데, 추가적으로 알게 되는 도움될 만한 내용들이 있다면 3탄으로 작성을 해 보겠습니다. 그럼 이만..zZ