【SwiftUI】画像サイズを確認するデバッグView

画像サイズを確認するデバッグView
.debugSizeView()
で確認可能

import SwiftUI

extension View {
    /// Viewの右下にサイズを表示するデバッグモディファイア
    /// - Parameter showSize: サイズ表示の有効／無効
    /// - Returns: サイズ表示付きのView
    func debugSize(_ showSize: Bool = true) -> some View {
        self.overlay(
            Group {
                if showSize {
                    GeometryReader { geometry in
                        VStack {
                            Spacer()
                            HStack {
                                Spacer()
                                Text("\(Int(geometry.size.width))x\(Int(geometry.size.height))")
                                    .font(.system(size: 10, weight: .bold))
                                    .foregroundColor(.white)
                                    .padding(.horizontal, 4)
                                    .padding(.vertical, 2)
                                    .background(Color.red.opacity(0.3))
                                    .cornerRadius(4)
                                    .padding(.trailing, 4)
                                    .padding(.bottom, 4)
                            }
                        }
                    }
                }
            }
        )
    }

    /// Viewの境界線を表示するデバッグモディファイア
    /// - Parameter showBorder: 境界線表示の有効／無効
    /// - Parameter color: 境界線の色
    /// - Returns: 境界線付きのView
    func debugBorder(_ showBorder: Bool = true, color: Color = .red) -> some View {
        self.overlay(
            Group {
                if showBorder {
                    Rectangle()
                        .stroke(color, lineWidth: 1)
                }
            }
        )
    }

    /// Viewのサイズと境界線を同時に表示するデバッグモディファイア
    /// - Parameter showDebug: デバッグ表示の有効／無効
    /// - Returns: デバッグ情報付きのView
    func debugSizeView(_ showDebug: Bool = true) -> some View {
        self
            .debugBorder(showDebug)
            .debugSize(showDebug)
    }
}

#Preview {
    VStack(spacing: 20) {
        Text("Hello World")
            .padding()
            .background(Color.blue.opacity(0.3))
            .debugSizeView()

        HStack {
            Text("Left")
            Text("Right")
        }
        .padding()
        .background(Color.green.opacity(0.3))
        .debugSizeView()

        Rectangle()
            .fill(Color.orange.opacity(0.3))
            .frame(width: 100, height: 50)
            .debugSizeView()
    }
    .padding()
}