スワイプ時の色付け

ユーザーはカードを左右にスライドさせることで、この答えが正しいか間違っているかをマークすることができますが、2つの方向を視覚的に区別することは今のところありません。出会い系アプリのTinderを参考に、良い場合は右スワイプ、悪い場合は左スワイプというように。

デフォルト設定の携帯電話では、カードは緑か赤になりますが、ユーザーが「色分けしない」設定を有効にしている場合、カードは白のままで、背景に追加のUIが追加されます。

まず、現在のカードの効果を見てみましょう：

RoundedRectangle(cornerRadius: 25, style: .continuous)
 .fill(Color.white)
 .shadow(radius: 10)

ジェスチャーの動きに合わせて背景色を緑または赤にし、ドラッグの動きに合わせて前景の塗りつぶしの白を大きくします。

まずは背景の部分です。shadow()モディファイアの直後に以下のコードを追加します：

.background(
 RoundedRectangle(cornerRadius: 25, style: .continuous)
 .fill(offset.width > 0 ? Color.green : Color.red)
)

前景の透過については、2 - 1/50 のジェスチャ幅ではなく、1 - 1/50 のジェスチャ幅を使用する点を除き、ドラッグアンドドロップによるフェードと同様に処理されます。 違いは、フェードが少なくとも50ポイントをドラッグすることでトリガーされる必要があったのに対し、移動するとすぐに色が変わるようになったことです。

fill() 修飾子を次のように置き換えてください：

.fill(
 Color.white
 .opacity(1 - Double(abs(offset.width / 50)))
)

アプリを実行すると、ドラッグ＆ドロップが進むにつれて、カードが白から赤や緑に変わり、フェードインし始めるのがわかります。かっこいい！

しかし、赤緑色覚異常の人にとっては、この方式は機能しません。カードの明るさの変化が見えるだけで、左右の違いを感じることができないのです。

この問題を解決するには、色を使用するかどうかを確認するための環境プロパティを追加する必要があります：

@Environment(\.accessibilityDifferentiateWithoutColor) var differentiateWithoutColor

RoundedRectangle では、前景と背景の両方にこのテクニックを使用します。

現在の RoundedRectangle コードを次のように置き換えてください：

RoundedRectangle(cornerRadius: 25, style: .continuous)
 .fill(
 differentiateWithoutColor
 ? Color.white
 : Color.white
 .opacity(1 - Double(abs(offset.width / 50)))
 )
 .background(
 differentiateWithoutColor
 ? nil
 : RoundedRectangle(cornerRadius: 25, style: .continuous)
 .fill(offset.width > 0 ? Color.green : Color.red)
 )
 .shadow(radius: 10)

その結果、デフォルトの設定では、カードは緑か赤に変わりますが、色の区別を有効にしていない場合、この色の変化は起こりません。したがって、正しいか正しくないかを区別するために、何らかの追加UIを提供する必要があります。

このプロパティをContentViewに追加します：

@Environment(\.accessibilityDifferentiateWithoutColor) var differentiateWithoutColor

その後、VStackに以下のビューを追加します：

if differentiateWithoutColor {
 VStack {
 Spacer()
 HStack {
 Image(systemName: "xmark.circle")
 .padding()
 .background(Color.black.opacity(0.7))
 .clipShape(Circle())
 Spacer()
 Image(systemName: "checkmark.circle")
 .padding()
 .background(Color.black.opacity(0.7))
 .clipShape(Circle())
 }
 .foregroundColor(.white)
 .font(.largeTitle)
 .padding()
 }
}

この条件により、このUIは "not color-coded "が有効な場合にのみ表示されます。

支援機能が有効であるかどうかにかかわらず、すべてのユーザーが素晴らしい体験を得られるようにすることです。これは、アプリ開発者が目指すべきことです。