코우지의 개발일기

[iOS/Swift] Home Screen Static / Dynamic Quick Action (홈 스크린 퀵 액션) 만들기 본문

iOS 개발일기/iOS

[iOS/Swift] Home Screen Static / Dynamic Quick Action (홈 스크린 퀵 액션) 만들기

Kouzi 2023. 4. 9. 12:30

안녕하세요! 
오늘은 Home Screen Static / Dynamic Quick Actions (홈 스크린 퀵 액션)  을 만들어 보려고 합니다.
 
 
아이폰 6s 이후로 햅틱 터치가 생기면서 나온 기능인데요.
홈 스크린에서 앱 아이콘을 꾹 누르면 뜨는 바로 이런 동작 다들 아시죠 ?

요걸 만들어 볼건데요 ! 
일단 애플 공식문서 링크입니다 
 
https://developer.apple.com/documentation/uikit/menus_and_shortcuts/add_home_screen_quick_actions

Add Home Screen Quick Actions | Apple Developer Documentation

Expose commonly used functionality with static or dynamic 3D Touch Home Screen quick actions.

developer.apple.com

 
공식 문서를 보면 퀵 액션의 종류에는 2가지가 있습니다.
 

# Quick Action Type
1. Static Quick Actions
2. Dynamic Quick Actions

 
1번은 쉽게 말하면 앱을 실행하지 않고도 Quick Action List를 볼수가 있다는 말이구용
다시말하면 info.plist 파일에 설정해놓기때문에 앱 자체에 정의되어있어서 실행하지 않고 설치만 해도 퀵액션을 볼수가 있는것이라는 얘기입니당
 
2번은 앱을 실행하고 만들어지는데요.
실행되고 만들어지니 당연히 실행되고나면 바뀌기도하고 없어지기도하고 그렇겠죠? 그래서 앱구동중에 동적으로 바꿀수있는 퀵액션이라는 얘기입니당.

일단 이론은 여기까지만 알아놓고.. 바로 구현 들어가보겠습니다.
 
자 이제 본격적으로 시작해볼게용


(1) Static Quick Actions 만들기

먼저 프로젝트를 하나 만들어줘야겠죠 ! 
App으로 해서 프로젝트 하나 생성해주시구요.
 
그리고 Info파일로 들어가줍니다.
Information Property List에 ( + ) 를 누르고 Home Screen Shortcut Items 를 찾아줍니다.
Home만 검색하시면 바로 나올거에요.

 
추가하고 나면 이렇게 나오는데요.
기본적으로 키는 Item Type과 Title이 추가가 되어있는데요. 

 
뭐가 있는지 더 볼까요?

짜잔~ 
요렇게
Icon File / Icon Type / Shortcut Item Type / Subtitle / Title / User Info Dictionary 가 있습니다.
이름 보고 대충 유추가 될거같은데..살짝 설명해드리면
 

# 필수 옵션 2개
Shortcut Item Type - 앱에 전달되는 문자열입니다.
Title - 홈 화면에서 사용자에게 표시되는 제목입니다.
 
# 선택 옵션 4개
Subtitle - title 제목 밑에 작게 써지는 부제목 입니다. 
Icon Type - 아이콘 타입입니다. 애플에서 제공해주는 아이콘 타입을 바로 쓸수있습니다. 
Icon File - 사용자가 등록한 아이콘을 사용할수있습니다.
User Info Dictionary - dictionary data를 저장합니다. 

 
 
이렇게 6개의 옵션이 구성되어있습니다.
더 자세한 설명은 애플에서 제공해주는 이 내용을 참고 하시면 될것같군용 

https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW36

iOS Keys

iOS Keys The iOS frameworks provide the infrastructure you need for creating iOS apps. You use the keys associated with this framework to configure the appearance of your app at launch time and the behavior of your app once it is running. UIKit keys use th

developer.apple.com

 
 
일단 3가지 옵션만 주고 실행해보겠습니다.
Title / Subtitle / Shortcut Item Type 이렇게 3가지를 주고 빌드하고 테스트합니다.

 
짠~ 이렇게 나오네요.

Icon Type을 지정하지 않으면 점으로 표시되나봅니다.
그럼 아이콘 타입까지 지정해보겠습니다.
 
아이콘 타입은 애플에서 제공해주는 아이콘을 사용하시면 되는데요
(커스텀 아이콘을 쓰실려면 Assets 폴더에 아이콘 추가후 Icon File을 이용해서 사용하시면됩니다)
 
애플에서 제공해주는 기본 아이콘은 여기를 참고하도록 합니다.
https://developer.apple.com/documentation/uikit/uiapplicationshortcuticon/icontype

UIApplicationShortcutIcon.IconType | Apple Developer Documentation

Constants for system-provided icons.

developer.apple.com

 
이름은 기본적으로 UIApplicationShortcutIconType{아이콘} 형식입니다.
해당 페이지에 제일위에 있는 case compose를 예로 들면,
UIApplicationShortcutIconTypeCompose 라고 추가하시면됩니다.
그럼 요렇게 되겠죠?

요렇게 하고 테스트해봅시다.
짠~ Compose 아이콘으로 변경되었습니다.

 
이렇게 하고 Kouzi 버튼을 눌러서 진입하면 어떻게 될까요 ?
정답은.. 아무일 없습니다.
아무런 동작을 안만들어 줬기 때문이죠 ! 
그래서 이번엔 진입시 alert popup 이 뜨도록 해보겠습니다.
 
SceneDelegate.swift파일로 들어가서 다음과 같이 코드를 구현해줍니다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    //Action 타입
    enum ActionType: String {
        case kouziAction = "KouziAction"
    }
    var savedShortCutItem: UIApplicationShortcutItem?
    
    var window: UIWindow?
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
        
        if let shortcutItem = connectionOptions.shortcutItem {
            // Save it off for later when we become active.
            savedShortCutItem = shortcutItem
        }
    }
    
    ...
    
    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
        guard let item = savedShortCutItem else { return }
        _ = handleShortCutItem(shortcutItem: item)
    }
    
    ...
}

extension SceneDelegate {
    // 퀵액션 클릭시 처리
    func handleShortCutItem(shortcutItem: UIApplicationShortcutItem) -> Bool {
        let alert = UIAlertController(title: "Quick Actions Test", message: "Short Cut Item Type : \(shortcutItem.type)", preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default, handler: nil)
        alert.addAction(action)
        
        if let actionTypeValue = ActionType(rawValue: shortcutItem.type) {
            switch actionTypeValue {
            case .kouziAction:
                DispatchQueue.main.async {
                    self.window?.rootViewController?.present(alert, animated: true)
                }
            }
        }
        
        return true
    }
    
    // 앱이 이미 실행중일때 quick action 클릭시 처리
    func windowScene(_ windowScene: UIWindowScene,
                     performActionFor shortcutItem: UIApplicationShortcutItem,
                     completionHandler: @escaping (Bool) -> Void) {
        let handled = handleShortCutItem(shortcutItem: shortcutItem)
        completionHandler(handled)
    }
}

 
요렇게 하면 이제 퀵액션으로 앱 진입시 alert popup이 짠!

Static Quick Action

(2) Dynamic Quick Actions 만들기

이제 다이나믹 퀵 액션으로 가볼겠습니당 ㅎㅎ
 
이번엔 코드로 구현해서 Quick Action을 만들어보겠습니다.
 
일단 storyboard에 버튼을 하나 추가해줍시다.
이제 이 버튼을 누르면 searchAction 이 뿅하고 생기게 만들거에요.
 
그리고 viewController로 가서 아까 만든 버튼을 구현해줍시다.

class ViewController: UIViewController {

    @IBAction func addButtonAction(_ sender: Any) {
        let application = UIApplication.shared
        application.shortcutItems = [
            UIApplicationShortcutItem(type: "SearchAction",
                                      localizedTitle: "SearchAction Title",
                                      localizedSubtitle: "SearchAction Subtitle",
                                      icon: UIApplicationShortcutIcon(type: .search))
        ]
        
        let alert = UIAlertController(title: "Search Action Add", message: "성공적으로 추가되었습니다.", preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default, handler: nil)
        alert.addAction(action)
        
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

요런식으로 만들수있습니다.
여기서 shortcutItems는 배열로 추가 시키는것입니다.
그래서 여러개를 추가시킬수도 있는데 quick action은 4개가 max거든요.
그래서 4개이상을 추가해도 4개까지 밖에 안나옵니다.
 
요렇게 하고 버튼 누르면, 눌렸다고 alert팝업 하나 띄워주겠습니다.
이제 테스트해보겠습니다.
 
분명히 처음에는 Kouzi 액션만 있다가 앱 진입해서 search action을 추가하는 버튼을 누르고 나면!
뿅하고 SearchAction이 추가된것을 보실수있습니다 ㅎㅎ

오늘 설명드릴 내용은 여기서 끝 !
 
 
오늘 구현한 코드는 여기서 확인하실수있습니다.
https://github.com/kouzi-kim/quickActionTest

GitHub - kouzi-kim/quickActionTest: dynamic / static Quick Actions

dynamic / static Quick Actions. Contribute to kouzi-kim/quickActionTest development by creating an account on GitHub.

github.com

 
그럼 여기까지 끝 !

Comments