衝突するビュー

このルールに人工知能をどのように活用しているかを学びましょう！

情報を含むビューは、完全にまたは部分的に他のビューと交差してはいけません。

このルールは Appleのヒューマンインターフェイスガイドラインによって設定されたベストプラクティスを強制します。このルールはMobile Dashboardから無効にするか、 iOS向けに書かれたテストでルールを無視することによって無効にできます。

Mobile Dashboardからルールを無効にする方法を学ぶ。

影響

衝突するビューは視覚に影響を与え、動的タイポグラフィを利用している人々にも影響を与える可能性があります。動的タイプ設定はテキスト要素のサイズを自動的に調整することがあります。フォントが大きくなるとビューも大きくなり、重なる可能性があります。重なり合うテキスト要素は、エンドユーザーに提示された情報を見逃したり読みにくくしたりする可能性があります。

確認

1. 各情報ビューの境界を確認してください
2. 次のいずれかを見つけるでしょう：
   • アクセス不可: ビューの境界が他のビューと交差しています。
   • アクセス可能: 情報を含むビューが重なっていません。
3. テキスト要素がある場合は、より大きな動的タイプサイズを試し、このプロセスを繰り返して、サイズが大きくなったときにこれらのビューが他のビューと交差しないことを確認してください

修正方法

UIKit

不適切な制約が、このルールによって見つかった問題を引き起こすことがあります。すべての状況が異なるため、ビューの制約が情報要素間に十分なスペースを提供していることを確認してください。もし、二つの隣接する情報ビュー間に制約が存在しない場合、動的タイプが大きな設定に更新されても重ならないように制約を追加する必要があるかもしれません。

SwiftUI

重なり合うビューは、このルールによって見つかった問題を引き起こします。すべての状況は少しずつ異なりますが、各ビューがビューの境界が重なることを制限する適切なビュー修飾子を持っていることを確認してください。親としてHStackおよびVStackビューを使用することをお勧めします。ZStackも別の選択肢ですが、テキスト要素を含むビューには使用すべきではありません。

React Native

重なり合うビューは、このルールによって見つかった問題を引き起こします。すべての状況は少しずつ異なりますが、次の点を確認してください：

• テキストを含むビュー、または拡張可能なコンテンツを持つビューには maxHeight 設定がありません
• フレックスレイアウトを使用する場合、 gap プロパティに値を追加して、読みやすさを向上させることを考慮してください