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

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

 

안녕하세요! 오늘은 iOS 앱 개발에서 위젯 만드는 방법에 대해 포스팅 해볼까 해요! 현재 진행중인 앱 개발 프로젝트가 있는데, 처음으로 위젯을 만들고 있어서, 정리도 할 겸 이렇게 포스팅을 작성하게 되었어요.

 

위젯을 만들려고 처음에 자료검색을 할 땐 swift widget이라고 검색을 했었는데, iOS에선 widget을 Today Extension이라고 부르더라구요. 그럼 지금부터 위젯을 만드는 법에 대해 알려드릴게용

 

첫번째로 위젯을 추가하기 위해 today extension이란 타겟을 추가시켜 줄 거에요.

Editor -> Add Target

 

그리곤 today extension을 검색하여 추가해줍니다.

 

그럼 이런창이 뜰텐데 스키마를 추가시켜준다는 뜻이니 Activate 해줍니다.

 

그럼 만든 이름의 TodayExtension 디렉토리가 생성됬을거에요. 저는 widget이라는 이름으로 타겟을 생성했습니다.(빨간박스)

 

생성된 파일에 대해 설명해보자면..

• TodayViewController.swift: 뷰컨트롤러와 같은 컨트롤러 파일입니다.
• MainInterface: 스토리보드 파일이죠. UI를 꾸밀 수 있어요.
• Info.plist: plist 파일입니다.

 

iOS 프로젝트 생성시와 비슷하게 파일이 생성됬죠?? widget의 스토리보드를 들어가보면 아이폰 타겟의 메인스토리보드와 마찬가지고 하나의 뷰컨트롤러와 HelloWorld 라는 Label에 밑에 숨어있습니다.

이 스토리보드는 역시 디폴트로 생성된 TodayViewController와 연결되어 있고 추가 작업은 TodayViewController.swift 파일에서 작성해주시면 되요.

 

그럼 빌드를 해보는데 위젯을 처음 만들고 빌드할 때에는 타겟을 아이폰에 먼저 실행 후 E로 된 today Extension 타겟에 실행을 하셔야 잘 떠요!

그러면 이렇게 위젯부분에 Hello World 라고 나오게 됩니다!

 

위젯을 스토리보드를 통해 사용하실 분들은 아이폰 타겟으로 개발할때 처럼 똑같이 진행해주시면 되구요! 코드로 UI를 짜고싶으신 분들은 plist 파일을 수정해주면 되요!

plist 파일에서 메인스토리보드라고 되있는 이부분을

요렇게 바꿔줍니다.

​x
NSExtensionPrincipalClass

그리고 가장 중요한 부분!! TodayViewController에import 하단부분에 @objc(TodayViewController) 를 추가해줘야해요!!

안그러면 에러떠요 =_=..

x
import UIKit
import NotificationCenter
​
@objc(TodayViewController)
class TodayViewController: UIViewController, NCWidgetProviding {
  ...
}

이렇게 하고 간단한 view에 background를 입혀보면

xxxxxxxxxx
class TodayViewController: UIViewController, NCWidgetProviding {
  override func loadView() {
        let view = UIView(frame: .zero)
        view.backgroundColor = .systemBackground
        self.view = view
    }
}

요런 빈 화면이 나오게 됩니다. 추가로 스토리보드에 있던 label을 추가해보면

x
@objc(TodayViewController)
class TodayViewController: UIViewController, NCWidgetProviding {
        
    let titleLabel: UILabel = {
        let v = UILabel()
        v.text = "개발자 아라찌"
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
  ...
  
  override func loadView() {
        ...
        view.addSubview(titleLabel)
        NSLayoutConstraint.activate([
            titleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        ])
    }

요렇게 라벨이 보이게 됩니다. 이런식으로 코드로도 UI를 똑같이 짤 수 있어요.

쉬는타임..

오늘은 아이폰에서 위젯을 만드는 방법에 대해 알아봤어요. 오늘은 위젯을 만들고 간단한 화면 띄우고 코딩하는 법에 대해 알아봤는데, 다음 포스팅은 위젯의 특정 메소드들, 그리고 추가적인 UI를 만들어보고, 아이폰 앱에 있는 데이터를 공유하는 방법에 대해 알아볼게요

 

다들 코로나 조심하세요! 마스크는 필수..