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"に適応していきます。ここがポイントになります。
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 または自分の指で画面にお絵かきできるようにします。
あと設定としては、
pkcView.drawingPolicy = PKCanvasViewDrawingPolicy.anyInput
でApple Pencil と自分の指両方に対応しています。これで実行すると画面を指でなぞってかけるようになります。
あとは以下のようなツールパレットを出すこともできるのでその出し方をみていきます。
"PKToolPicker"を使います。
まず
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) {
}
}
簡単にお絵かきセット含めて表示できるようになります。
この記事が気に入ったらサポートをしてみませんか?