SafeAreaView ja - Tai-Kimura/SwiftJsonUI GitHub Wiki

SafeAreaView

クラス: SJUIView (UIKit) / ネイティブSwiftUIセーフエリア処理継承元: View-ja

プラットフォームサポート

✅ UIKit: 完全サポート（セーフエリア処理付きSJUIViewを継承）
✅ SwiftUI: 完全サポート（カスタマイズ可能なエッジ設定付きネイティブセーフエリア）

概要

SafeAreaViewは、デバイスのセーフエリア領域を自動的に考慮する特殊なコンテナです。通常のViewとは異なり、SafeAreaViewはステータスバー、ナビゲーションバー、タブバー、新しいデバイスのノッチエリアなどのシステムUI要素によってコンテンツが隠されないようにします。

Viewとの主な違い

SafeAreaView: デフォルトでセーフエリア境界を考慮
View: セーフエリアを無視し、システムUIの下までコンテンツを拡張可能

SafeAreaViewの属性

SafeAreaViewはView-jaのすべての属性を継承し、以下の属性が追加されています：

属性名	制約情報でのデータ型	JSONでの型	詳細	備考
safeAreaInsetPositions	-	文字列配列	セーフエリアを適用するエッジを制御。オプション: "top", "bottom", "leading", "trailing", "all"デフォルト: ["all"]	SwiftUIのみ
すべてのView属性	-	-	SafeAreaViewはViewのすべての属性を継承

使用例

基本的なSafeAreaView

{
  "type": "SafeAreaView",
  "id": "main_container",
  "width": "matchParent",
  "height": "matchParent",
  "background": "#FFFFFF",
  "child": [
    {
      "type": "Label",
      "text": "このコンテンツはセーフエリアを考慮します"
    }
  ]
}

カスタムセーフエリアエッジ（SwiftUI）

{
  "type": "SafeAreaView",
  "id": "custom_safe_area",
  "safeAreaInsetPositions": ["top", "bottom"],
  "child": [
    {
      "type": "View",
      "background": "#007AFF",
      "child": [
        {
          "type": "Label",
          "text": "上下のセーフエリアのみ適用"
        }
      ]
    }
  ]
}

SafeAreaView内のScrollView

{
  "type": "SafeAreaView",
  "child": [
    {
      "type": "Scroll",
      "contentInsetAdjustmentBehavior": "never",
      "child": [
        {
          "type": "View",
          "orientation": "vertical",
          "child": [
            {
              "type": "Label",
              "text": "セーフエリア内のスクロール可能なコンテンツ"
            }
          ]
        }
      ]
    }
  ]
}

プラットフォーム固有の動作

UIKit

SafeAreaViewはsafeAreaLayoutGuideを使用してコンテンツを制約
デバイスの向き変更に自動的に対応
ノッチ付きデバイスを含むすべてのiOSデバイスと互換性

SwiftUI

.edgesIgnoringSafeArea()モディファイアを使用したSwiftUIのネイティブセーフエリア処理にマップ
DynamicモードとStaticモードの両方で一貫してセーフエリアを考慮
safeAreaInsetPositionsでカスタマイズ可能なエッジ設定をサポート

SafeAreaViewを使用すべき場合

SafeAreaViewを使用する場合：

画面のルートコンテナを構築する時
コンテンツがシステムUIに隠されるべきでない時
フォーム、リスト、読み取り可能なコンテンツを作成する時
iOSデザインガイドラインに従った標準的なアプリレイアウト

通常のViewを使用する場合：

フルスクリーンの背景や画像を作成する時
カスタムナビゲーションやタブバーを構築する時
エッジトゥエッジのデザインを実装する時
意図的にシステムUIの下までコンテンツを拡張する時

移行ガイド

ViewからSafeAreaViewへ

タイプを"View"から"SafeAreaView"に変更するだけです：

変更前：

{
  "type": "View",
  "id": "root",
  "width": "matchParent",
  "height": "matchParent"
}

変更後：

{
  "type": "SafeAreaView",
  "id": "root",
  "width": "matchParent",
  "height": "matchParent"
}

ベストプラクティス

ルートコンテナとして使用: SafeAreaViewを画面のルートコンテナにする
ScrollViewと組み合わせる: ScrollViewを使用する際は、適切なインセット処理のためSafeAreaViewでラップ
カスタムエッジ: SwiftUIでは、デザインのニーズに基づいてセーフエリアを考慮するエッジをカスタマイズ
一貫した動作: SafeAreaViewはすべてのiOSデバイスで一貫したレイアウトを保証