iOSアプリにおけるPopOver（ポップアップテキスト）の表示方法

この記事では、SwiftUIでPopoverを使用する方法について解説します。

Popoverは、ビュー上にコンテンツを小さなフローティングパネルとして表示するために使用されます。ユーザーインタラクションに応答して追加情報を提供したり、ユーザーに選択肢を提示したりするのに適しています。

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

.popoverモディファイアはisPresentedやitemバインディングを使って制御され、条件に基づいてポップオーバーを表示または非表示にします。contentクロージャ内でポップオーバーに表示するビューを定義します。

この機能は、特にiPadやmacOSアプリケーションで有効で、コンテキストに応じた追加情報を提供するのに便利です。

PopOverの作成（iOS向け）
1. popover(isPresented:attachmentAnchor:content:)
2. popover(item:attachmentAnchor:content:)
まとめ

PopOverの作成（iOS向け）

popoverには宣言には２つの方法があります。

popover(isPresented:attachmentAnchor:content:)：Bool値をバインディングしてモーダルの表示状態を管理し、contentで表示するビューを指定します
popover(isPresented:attachmentAnchor:content:)：特定のオプショナル型の値を監視し、値がnilでない場合にモーダルを表示します。これにより、選択されたアイテムに基づいて異なる内容のモーダルを表示できます

popover(isPresented:attachmentAnchor:content:)

パラメータについて

`isPresented`：`isPresented`に`true`が設定されるとモーダルが表示され、`false`に設定されると閉じます。

`attachmentAnchor`：ポップオーバーを表示する位置を指定します。

サンプルコード

SwiftUIでPopoverを作成するには、popoverモディファイアを使用します。以下に基本的な使用方法を示します。

import SwiftUI

struct PopOverView: View {
    @State private var isShowingPopover = false
    
    var body: some View {
        Button("Show Popover") {
            // ボタンタップでフラグON
            self.isShowingPopover.toggle()
        }
        // フラグとpopoverの表示位置をセット
        .popover(isPresented: $isShowingPopover,
                 attachmentAnchor:.point(.top)
        ) {
            // popoverの表示内容
            Text("Popover Content")
                .padding()
                .presentationCompactAdaptation(.popover)
        }
    }
}

このコードでは、ボタンをクリックするとisShowingPopoverプロパティのTrue/Falseが切り替わり、True状態の時Popoverが表示されます。Popoverの内容はpopover修飾子内に記述します。

参考：popover(isPresented:attachmentAnchor:arrowEdge:content:) | Apple Developer Documentation

Apple Developerのサンプルプログラムには「.presentationCompactAdaptation」の記載がありませんが、iOSでポップアップを表示するためには必要となります。

参考：presentationCompactAdaptationについて

iOS：16.4以上

iPhone画面などコンパクトサイズの画面に表示する際の適応方法を指定するモディファイアです。
iOSの場合はpopoverモディファイアをデフォルトで使用するとsheetと同様の動作となるためpresentationCompactAdaptationで動作を指定する必要があります

なお、iPadやmacOS向けであればpresentationCompactAdaptationを設定しなくても、popoverのみのデフォルトでポップアップが表示されます。

presentationCompactAdaptation(horizontal:vertical:) | Apple Developer Documentation

presentationCompactAdaptationの応用的な使い方

presentationCompactAdaptationは画面が水平方向の場合と、垂直方向の場合で表示方法を分けることが可能です。

.presentationCompactAdaptation(horizontal: .sheet, vertical: .popover)

attachmentAnchorについて

attachmentAnchorを指定するとポップオーバーを指定する位置を変更できます。

以下はそれぞれ、.top, .center, .bottomTrailingを指定した時の表示例です。他にも指定可能な値がありますが数が多いため割愛します。

popover(item:attachmentAnchor:content:)

パラメータについて

`item`：`item`パラメータにはオプショナルな値をバインディングし、この値が`nil`でない場合にモーダルが表示されます。`item`が`nil`になるとモーダルが閉じます。

`attachmentAnchor`：ポップオーバーを表示する位置を指定します。

サンプルコード

SwiftUIでPopoverを作成するには、popoverモディファイアを使用します。以下に基本的な使用方法を示します。

import SwiftUI

struct PopOverView: View {
    @State private var selectedFruits: PopOverFruits? = nil
    
    var body: some View {
        HStack {
            Button("Apple") {
                selectedFruits = PopOverFruits(name: "Apple")
            }
            Button("Orange") {
                selectedFruits = PopOverFruits(name: "Orange")
            }
        }
        // フラグとpopoverの表示位置をセット
        .popover(item: $selectedFruits,
                 attachmentAnchor:.point(.top)
        ) { fruits in
            // popoverの表示内容
            Text(fruits.name)
                .padding()
                .presentationCompactAdaptation(.popover)
        }
    }
}

// itemに設定するstruct
struct PopOverFruits: Identifiable {
    var id: String { name }
    let name: String
}