バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

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

SwiftUI

はじめに

縦横比がくそややこしいのでこの記事でまとめていきます

いくつか実装パターンがありまして、

自分のアプリの要件に合った方法を選んで使ってもらえればと思います。

前提

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は自動で親の縦幅とイコールになる
  • 縦幅が確定するので横幅はアスペクト比を維持して自動で決まる