Help us understand the problem. What is going on with this article?

iOS 14 の Widgets 全サイズを一度に Preview する【コピペで使える】

本記事は Qrunch とのクロス投稿です。
iOS 14 の Widgets 全サイズを一度に Preview する【コピペで使える】 | Qrunch(クランチ)


iOS & iPadOS 14 および macOS Big Sur から WidgetKit が導入され、Widget を作るためには SwiftUI で書くこととなっています。ここでは iOS 14 での Widget のお話をします。

Widgets の iOS Human Interface Guidelines を見ると "Adapting to Different Screen Sizes" セクションに1つの表があります。そこには各 iPhone のスクリーンサイズと、それぞれに対応する "Small"、"Medium"、"Large" Widget のサイズが記載されています。

せっかく SwiftUI で書くので、Xcode Previews で全てのサイズを表示させながらレイアウトするのはいかがでしょうか。このように一度に表示されると何かと便利です。

スクリーンショット 2020-07-02 3.19.00.png
※スクリーンショットは Xcode 11.5 のものです。

以下、3サイズの Widget のサイズを記載済みの PreviewProvider です。コピペしてお使いください。

Small Widget

struct SmallWidgetContentView_Previews: PreviewProvider {
    static var contentView: some View {
        ContentView()
            .preferredColorScheme(.dark)
    }

    static var previews: some View {
        Group {
            // 320pt × 568pt (iPhone SE 第1世代)
            contentView
                .previewLayout(.fixed(width: 141.0, height: 141.0))

            // 375pt × 667pt (iPhone 6/6s/7/7s/8/SE 第2世代)
            contentView
                .previewLayout(.fixed(width: 148.0, height: 148.0))

            // 414pt × 736pt (iPhone 6 Plus/6s Plus/7 Plus/8 Plus)
            contentView
                .previewLayout(.fixed(width: 159.0, height: 159.0))

            // 375pt × 812pt (iPhone X/XS/11 Pro)
            contentView
                .previewLayout(.fixed(width: 155.0, height: 155.0))

            // 414pt × 896pt (iPhone XR/XS Max/11/11 Pro Max)
            contentView
                .previewLayout(.fixed(width: 169.0, height: 169.0))
        }
    }
}

Medium Widget

struct MediumWidgetContentView_Previews: PreviewProvider {
    static var contentView: some View {
        ContentView()
            .preferredColorScheme(.dark)
    }

    static var previews: some View {
        Group {
            // 320pt × 568pt (iPhone SE 第1世代)
            contentView
                .previewLayout(.fixed(width: 291.0, height: 141.0))

            // 375pt × 667pt (iPhone 6/6s/7/7s/8/SE 第2世代)
            contentView
                .previewLayout(.fixed(width: 322.0, height: 148.0))

            // 414pt × 736pt (iPhone 6 Plus/6s Plus/7 Plus/8 Plus)
            contentView
                .previewLayout(.fixed(width: 348.0, height: 159.0))

            // 375pt × 812pt (iPhone X/XS/11 Pro)
            contentView
                .previewLayout(.fixed(width: 329.0, height: 155.0))

            // 414pt × 896pt (iPhone XR/XS Max/11/11 Pro Max)
            contentView
                .previewLayout(.fixed(width: 360.0, height: 169.0))
        }
    }
}

Large Widget

struct LargeWidgetContentView_Previews: PreviewProvider {
    static var contentView: some View {
        ContentView()
            .preferredColorScheme(.dark)
    }

    static var previews: some View {
        Group {
            // 320pt × 568pt (iPhone SE 第1世代)
            contentView
                .previewLayout(.fixed(width: 291.0, height: 299.0))

            // 375pt × 667pt (iPhone 6/6s/7/7s/8/SE 第2世代)
            contentView
                .previewLayout(.fixed(width: 322.0, height: 324.0))

            // 414pt × 736pt (iPhone 6 Plus/6s Plus/7 Plus/8 Plus)
            contentView
                .previewLayout(.fixed(width: 348.0, height: 357.0))

            // 375pt × 812pt (iPhone X/XS/11 Pro)
            contentView
                .previewLayout(.fixed(width: 329.0, height: 345.0))

            // 414pt × 896pt (iPhone XR/XS Max/11/11 Pro Max)
            contentView
                .previewLayout(.fixed(width: 360.0, height: 376.0))
        }
    }
}
treastrain
iOS・watchOS App「Japan NFC Reader」を作っています。 Nat. Institute of Tech., Hachinohe College → Muroran Institute of Tech. Student Apple Teacher Swift Playgrounds認定
https://treastrain.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした