SwiftUIでいこう！ - PencilKit

PencilKitを使って簡単にお絵かきができるアプリが作れてしまいます。

紹介動画を参考にiPadのSwift Playgrounds、MacのPlayground、Xcodeで実行してみます。MacのPlayground、Swift Playgroundsではツールが出ないので、iPadのSwift　Playgrounds、Xcodeでやった方がお絵かきできて楽しいです。

Swift Playgroundsで実行するための基本的な追加コードです。

import PlaygroundSupport

let view = ContentView()
PlaygroundPage.current.setLiveView(view)

このコード部分をとってXcodeにも適応できます。

import PlaygroundSupport
import SwiftUI
import PencilKit

struct ContentView:View {
   var body: some View{
       
       PenKitView()
   }
}

struct PenKitView:UIViewRepresentable {
   typealias UIViewType = PKCanvasView
   
   func makeUIView(context: Context) -> PKCanvasView {
       let pkcView = PKCanvasView()
       pkcView.drawingPolicy = PKCanvasViewDrawingPolicy.anyInput
 
       return pkcView
   }
   
   func updateUIView(_ uiView: PKCanvasView, context: Context) {
       
   }
   
   
}
let view = ContentView()
PlaygroundPage.current.setLiveView(view)

表示する部分を決める"ContentView"です。

struct ContentView:View {
   var body: some View{
       
        PenKitView()
 
   }
}

"PenKitView()"を"ContentView"の中で実行するという形です。表示部とデータ部を分けて記述することで構造がわかりやすくなります。

"PenKitView()"の中身ですが、

struct PenKitView{}

として作っていきます。

SwiftUIで使うにはPenKitViewを"UIViewRepresentable"に適応していきます。ここがポイントになります。

Apple Developer Documentation

A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy.

SwiftUIでUIKitを使えるようにします。このページの下の方

Topics

の部分に大事なことが書いてありますのでそこに注意して作っていきます。

書く時に必要なものとして

Creating and Updating the View

の部分でRequiredとあるものは必ず実装しないといけません。

func makeUIView(context: Self.Context) -> Self.UIViewType
Creates the view object and configures its initial state.
Required.

func updateUIView(Self.UIViewType, context: Self.Context)
Updates the state of the specified view with new information from SwiftUI.
Required.

struct UIViewRepresentableContext
Contextual information about the state of the system that you use to create and update your UIKit view.

typealias Context

associatedtype UIViewType : UIView
The type of view to present.
Required.

以下3つのコードが必ず必要ということです。

typealias UIViewType = PKCanvasView

func makeUIView(context: Context) -> PKCanvasView {}

func updateUIView(_ uiView: PKCanvasView, context: Context) {}

今回は"PKCanvasView"でApple Pencil または自分の指で画面にお絵かきできるようにします。

Apple Developer Documentation

あと設定としては、

pkcView.drawingPolicy = PKCanvasViewDrawingPolicy.anyInput

でApple Pencil と自分の指両方に対応しています。これで実行すると画面を指でなぞってかけるようになります。

あとは以下のようなツールパレットを出すこともできるのでその出し方をみていきます。

"PKToolPicker"を使います。

Apple Developer Documentation

まず

let toolPicker = PKToolPicker()

と宣言してやり、

"func makeUIView(context: Context) -> PKCanvasView {}"の中で

toolPicker.addObserver(pkcView)　　・・・・　変化を検知
toolPicker.setVisible(true, forFirstResponder: pkcView)​　・・・　表示

と使えるようにします。

そして"pkcView"に適応させます。

pkcView.becomeFirstResponder()

"becomeFirstResponder"は"UIResponder"クラスを継承しているもので画面タッチができるようにします。

構造体"PenKitView"の全体としては

struct PenKitView:UIViewRepresentable {
   typealias UIViewType = PKCanvasView
    let toolPicker = PKToolPicker()
   
   func makeUIView(context: Context) -> PKCanvasView {
       let pkcView = PKCanvasView()
       pkcView.drawingPolicy = PKCanvasViewDrawingPolicy.anyInput
       toolPicker.addObserver(pkcView)
       toolPicker.setVisible(true, forFirstResponder: pkcView)
       pkcView.becomeFirstResponder()
       
       
       return pkcView
   }
   
   func updateUIView(_ uiView: PKCanvasView, context: Context) {
   }
   
}

簡単にお絵かきセット含めて表示できるようになります。