web-dev-qa-db-ja.com

Apple WatchおよびiPhoneでのSwiftUIを使用したデバイス固有のレイアウト

場合によっては、レイアウトにデバイス固有の調整を加える必要があります。たとえば、小さい画面のiPhoneでは間隔を狭くしたり、最大の画面では間隔を広げたりする必要があるかもしれません。 UIKit（さらにはInterface Builder）を使用すると、特定のサイズのクラスに対してレイアウト例外を簡単に作成できました。 SwiftUIで条件付きのデバイス固有のレイアウトを行うための最良の方法は何ですか？

私はSwiftUIのドキュメントを精査してきましたが、レイアウトでこのタイプの情報にアクセスして使用する方法が見つかりませんでした。

以下は、Apple Watch app。Appleの設計ガイドラインに従って、40mmシリーズ4の左右に8.5ポイントのパディングを追加する例です。ただし、44mmには9.5が必要です。パディングのポイント、およびApple Series 4より古い時計にはパディングを含めないでください。

SwiftUIでこれを実現する最良の方法は何ですか？

struct ContentView : View {

    var body: some View {
        HStack {
            Text("Hello World")
        }.padding([.horizontal], 8.5)
    }
}
iosapple-watchswiftuiwatchos
7
gohnjanotis

IPhoneの場合、次のような環境を使用できます。

@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?

そして、var body：画面のサイズに基づいて画像がどのように拡大縮小するかを処理するために、いくつかのビューでこれを行いました。 iPadとiPhone X以上でたくさんのテストを行いました。他の方法もあると思います。これは、少なくともSwiftUIでサイズクラスを使用する方法です。サイズクラスの使用方法に関する情報はまだ多くありません。

Image("logo")
      .opacity(1.0)
      .scaleEffect(makeCircleTextBig ? (horizontalSizeClass == .compact ? 0.18 : 0.25) : (horizontalSizeClass == .compact ? 0.06 : 0.1))
      .animation(.easeIn(duration: 1.0))

ControlSizeも確認してください： Apple Docs ControlSize

そして、これを別のアプローチについてチェックしてください： Swiftによるハッキング：SwiftUIサイズクラス

0
D. Rothschild

@gohnjanotis、手遅れかどうかはわかりませんが、GeometryReaderの前にリターンを追加しようとしましたか？実際にビューを作成する前に、いくつかの条件を使用すると、このエラーが発生することがよくあります。したがって、次のようになります。

var body: some View {
        return GeometryReader { proxy in
          if proxy.size.width > 324.0/2.0 { // 40mm watch resolution in points
            Text("BIG view here")
          } else {
            Text("small view here")
          }
        }
    }
0
appsailor