バッテラが如く

プログラミングしましょ!

【SwiftUI】Imageを縦横比を維持して表示する

今回はImageの縦横比を維持してリサイズする方法についてです。

※この記事の情報は次のバージョンで動作確認しています。

  • MacOS Monterey (12.1) Xcode (v13.3.1)
  • aspectRatio(contentMode: .fit)を使おう

    • .aspectRatio(contentMode: .fit) は縦横比を維持するViewが持つモディファイア
    • 縦か横のどちらかのサイズを決めるともう片方は自動で決まる

    横幅を固定させて縦は自動

    Image("image_00")
     .resizable()
     .aspectRatio(contentMode: .fit)
     .frame(width:200)
    
    • 縦か横のサイズのどちらかを確定させておく
    • frameは必ず最後に追加する

    親の高さと画像の高さを同じにする

    HStack {
        Image("image_00")
            .resizable()
            .aspectRatio(contentMode: .fit)
        
        Image("image_00")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
    .frame(height: 100)
    
    • 親ビューにframeをつけてサイズを固定する
    • Imageは自動で親の縦幅とイコールになる
    • 縦幅が確定するので横幅はアスペクト比を維持して自動で決まる