SwiftUI レイアウト編(4) Imageのサイズやスケール方法を指定したい時

SwiftUI2021

     
⌛️ < 1 min.

前回の指定方法だと、Imageに指定したファイルに含まれるイメージのサイズによってレイアウトが変わってしまう。

前回の実装の表示

SwiftUIStep0

いろいろと、修正すべき点が。

  • 指定したイメージデータが小さいため、Imageが小さい → 広告ビューにかぶらないくらい大きくしたい
  • Googleの広告ビューが左寄せになっている → 中央に配置したい -> やり直してみたら、中央寄せになってました

UIImageViewと同様の使い方希望

もちろん、自動でサイズが調整されると嬉しい時もありますが、今回は、写真のスライドショーを表示させたいので、写真ごとにビューのサイズが変わるよりは、ビューのサイズは固定で、写真データをスケールする使い方をしたいです。
UIImageViewだとスケールのさせ方まで選ぶことができましたが、Imageではどうなんでしょうか。

Imageを大きく配置

AppleのドキュメントでStructure-Imageを確認するといろいろなプロパティが確認できるんですが、その中に、frameもありました。
もちろん、frameのサイズを指定するケースもあると思うんですが、今回は、いろいろなサイズのあるiPhone/iPadでできるだけ大きく表示させたいのです。

注意

ここのframeは、UIView等のframeとは、意味合いが違うそうです。

Googleしたり、ドキュメントをみたりしていると怪しい(?)メソッドが。その名もresizable。

SwiftUIStep1

できちゃいました。resizableの引数の中にresizingModeというのがあるので、スケールするときの方法も指定できるっぽい。→ と思ったのですが、違いました。orz .tileって指定したら、タイル状に敷き詰めてくれるかと期待したけどそうもならず、このオプションなに?

あきらめずに、Imageのドキュメントを読み続けてみつけました。scaleToFit()。他に、scaleToFill()もあるので、UIImageViewと同様に設定ができるっぽい。表示したいものが写真なので、Aspect比を変更したくないので、scaleToFit指定。

SwiftUIStep2

やっと、やりたいことができた!

最終的に以下のようなコードになりました。

VStack(){
  Image(systemName: "pencil").resizable().scaledToFit()
  AdBanner(adUnitId: "ca-app-pub-XXXXXXXXXXXX").expectedFrame() // test id
}

ここまでで気づいたこと。
  • Appleのドキュメントは、あまりきちんと記述されてない。ちょくちょく”No overview available”とか書いてあって、名前から推測するしかないケースが多い
  • Landscapeモードでプレビューする方法はないらしい。でも、Simulatorで動かせば確認できるので、そこまでクリティカルな問題ではない
  • InterfaceBuilderで設定すると、InterfaceBuilderのタブを色々と切り替えてそれぞれを確認しなければいけなかったけど、SwiftUIはそこにコードで設定が記載されているので、わかりやすい

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です