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

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 で全てのサイズを表示させながらレイアウトするのはいかがでしょうか。このように一度に表示されると何かと便利です。

※スクリーンショットは 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))
        }
    }
}