🪽

【Swift UI】コンテンツのレイヤー化

に公開
SwiftUI
overlay
resizable
scaledtofit
clipshape
tech

Viewモディファイアとは

  • SwiftUIにおいて、ビュー（UI部品）の外観や振る舞いをカスタマイズするための機能です。

resizableモディファイア

.resizable()の公式ドキュメント

  • 画像ビューが親ビューのサイズに合わせて自動的にサイズを変更できるようにする
  • これを使用しないと、画像は元のサイズで表示され、レイアウトが崩れるかも
  • 画像は親ビューのサイズに合わせて自動的にリサイズされる

    resizableモディファイア あり

    resizableモディファイア なし 
Image(assetName)
    .resizable() // これ

scaledToFitモディファイア

.scaledToFit()の公式ドキュメント

  • ビューのサイズは画像によって決まる
  • ビューの縦横比を保持しながら、可能な限り小さく表示領域に収めるための修飾子

    scaledToFitモディファイア あり

    scaledToFitモディファイア なし 
Image(assetName)
    .scaledToFit() // これ

overlayモディファイア

.overlay()の公式ドキュメント

  • Viewの上に別のViewを重ねる
Image(assetName)
     .overlay(alignment: Alignment) { // これ
        content
    }
  • Viewの上に塗りつぶし図形を重ねる
Image(assetName)
    .overlay(style, in: Shape, fillStyle: FillStyle) // これ
  • Viewの上にスタイルを重ねる
  • Viewの上にShapeStyle（Colorやグラデーション、Image等の塗りつぶしView）を配置するモディファイア
Image(assetName)
    .overlay(style, ignoresSafeAreaEdges: Edge.Set) // これ

clipShapeモディファイア

RoundedRectangleの公式ドキュメント

  • 角を丸くする


clipShapeモディファイア あり


clipShapeモディファイア なし

Image(assetName)
    .clipShape(RoundedRectangle( cornerRadius:8 )) // これ

padding 修飾子

.padding()の公式ドキュメント

  • 写真の 4 つの端とそれを含むビューの間にスペースが確保される

    padding あり

    padding なし 
Image(assetName)
    .padding() // これ

まとめ

  • こちらの記事は画像を添付しビフォアフが可視化されやすくなるために作りました。
  • 最後まで読んでいただきありがとうございました。

この備忘録メモは
こちらの公式チュートリアルをもとに作成しています
引用元はこちら

Discussion