30
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SwiftUIにおけるscaledToFill()とかscaledToFit()とかaspectRatio(_:contentMode:)等の使い分け

Last updated at Posted at 2019-09-29

主にImageのリサイズの時に、FillとかFitとかaspectRatioとか色々あって何を使えばよかったんだっけ?となるので備忘録としてまとめました。

そもそも…
##Fillとは?
枠内いっぱいに表示されるように拡大縮小されるので、はみ出した分の左右もしくは上下は切り取られる。

##Fitとは?
枠内からハミ出さないように拡大縮小されるので、左右もしくは上下に空白ができる可能性がある。

##SwiftUIにおけるメソッドの違いは?
###scaledToFill()

使用例
Image("SampleImage")
    .resizable()
    .scaledToFill()

[scaledToFill()の公式ドキュメント]
(https://developer.apple.com/documentation/swiftui/tupleview/3277975-scaledtofill)
アスペクト比を維持しながら、親に合わせてこのビューをスケーリング
枠全体を覆うように拡大縮小されるので、はみ出した分の左右もしくは上下が切り取られる可能性がある。
aspectRatio(nil, contentMode: .fill) と同一効果。

###scaledToFit()

使用例
Image("SampleImage")
    .resizable()
    .scaledToFit()

scaledToFit()の公式ドキュメント
アスペクト比を維持しながら、親に合わせてこのビューをスケーリング
全体が表示されるように拡大縮小されるので、左右もしくは上下に空白ができる可能性がある。
aspectRatio(nil, contentMode: .fit) と同一効果。

###aspectRatio(_:contentMode:)

使用例
Image("SampleImage")
    .resizable()
    .aspectRatio(0.5, contentMode: .fit)

aspectRatio(_:contentMode:)の公式ドキュメント
第一引数で、幅と高さの比率を指定する。 (e.g. 0.75)
contentMode では、fit or fill を選択する。

以上、他にまた類似の指定方法があって迷いそうだったら追加したいです。

間違い等あれば教えていただければ嬉しいです!

30
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?