iPad iOSアプリケーション向けのトラックパッドサポート (UIPointerInteraction) を追加

12209 ワード
UIStoryboard UIKit Swift UIPointerInteraction SwiftUI UIKit テキストリンク

ユーザーはiPadにトラックパッドを接続して、iPadでマウスを使用できます。さらに、トラックパッドとともにAppleのキーボードフォリオを使うことができます。ユーザーがマウスのカーソルを動かすと、さまざまなエレメントが強調表示されます。

この記事では、SwiftUI アプリケーションや UIKit + UIStoryboard アプリケーションにトラックパッドのポインターの相互作用 (Pointer Interaction) を追加する方法について説明します。

SwiftUI 用

.hoverEffect() 修飾子をビュー要素に追加すると、トラックパッドの相互作用を有効にできます。​たとえば、

struct ContentView: View {
    var body: some View {
        Button(action: {}, label: {
            Image(systemName: "square.and.arrow.up")
        })
            .font(.system(size: 50))
            .foregroundColor(.blue)
            .hoverEffect(.highlight)
    }
}

.hoverEffect(.highlight) は次のように見えます

.hoverEffect(.lift) は次のように見えます

UIStoryboard のボタンの場合

ストーリーボードの UIButton ボタンにポインタのインターアクションをすばやく追加できます。Pointer セクションの Interaction enabled というチェックボックスをクリックするだけです。

外観はこのようになります：

UIKitを使った他のビューには

UIStoryboard をご使用で、他のビューエレメントにポインターインタラクションを追加したい場合、 UIPointerInteraction をご活用いただけます。

最初にビューエレメントをバリアブルとしてコードに加えてください：

@IBOutlet weak var button: UIView!

このボタンはお使いの UIStoryboard のビューエレメントにリンクしますのでご注意ください。

また、UIPointerInteraction 変数をプログラムクラスに追加してこれを初期化します。

var interaction: UIPointerInteraction!

override func viewDidLoad() {
    super.viewDidLoad()
    interaction = UIPointerInteraction(delegate: self)
}

現在、呼び出しによりポインターインタラクションをビューエレメント (button) に追加できるようになっています。

button.addInteraction(self.interaction)

また、UIPointerInteractionDelegate というデリゲートの追加も必要です。

extension ViewController: UIPointerInteractionDelegate {

    func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? {
        if let view = interaction.view {
            let preview = UITargetedPreview(view: view)
            return UIPointerStyle(effect: UIPointerEffect.lift(preview))
        }
        return nil
    }

}

こちらのようになります：

ポインターのスタイル

func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle?

この最初の関数では、ポインターのインタラクションのスタイルを指定します。例えば、UIPointerEffect.highlight(preview) 、UIPointerEffect.lift(preview) 、または UIPointerEffect.hover(preview, preferredTintMode: .overlay, prefersShadow: true, prefersScaledContent: true) が利用できます。

トラックパッドのポインターが指定範囲に入った時または指定範囲から出た時に実行するアクション

ユーザーのトラックパッドのポインターが特定の範囲に入った時または特定の範囲から出た時にアクションを実行することができます。

func pointerInteraction(_ interaction: UIPointerInteraction, willEnter region: UIPointerRegion, animator: UIPointerInteractionAnimating) {
    if let view = interaction.view {
        // TODO
    }
}

func pointerInteraction(_ interaction: UIPointerInteraction, willExit region: UIPointerRegion, animator: UIPointerInteractionAnimating) {
    if let view = interaction.view {
        // TODO
    }
}

ビュー要素の範囲を手動で定義

ビュー要素の範囲を手動で定義したい場合には、この関数を拡張に追加できます。

func pointerInteraction(_ interaction: UIPointerInteraction, regionFor request: UIPointerRegionRequest, defaultRegion: UIPointerRegion) -> UIPointerRegion? {
    if let view = interaction.view {
        // TODO
    }
}

ポインターインタラクションを実装すると、トラックパッドでiPadを使用しているユーザーにより良いエクスペリエンスを提供することができます。これらのインタラクションにより、ユーザーはアプリケーションでクリックすべき場所をさらによく把握することができるようになります。

Twitter @MszPro

私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。