プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【SwiftUI】よく使う標準のモデファイア

  • 2020年11月1日
  • 2020年11月2日
  • Swift
  • 4view
  • 0件

前回のおさらい

【Swift】SwiftUIの記法・入門

Text("こんにちは")
    .font(.largeTitle)
    .foregroundColor(Color.red)

flame

フレームのサイズとビューの配置位置を指定

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )

alignmentのプロパティ

center中央寄せ
leading左寄せ
trailing右寄せ
top
bottom
topLeading上左
topTrailing上右
bottomLeading下左
bottomTrailing下右

CSSのleftやrightと違うのだけ少し慣れが必要ですね。

その他の引数

minWidth, idealWidth, maxWidth, minHeight.idealHeight,maxHeight

fixedSize

フレームサイズに収まらないビューの場合、デフォルトではビューが切り捨てられるが、ビューの表示を変更したくない場合に使用。

Text("こんにちはこんにちはこんにちは")
    .fixedSize()
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )
    .font(.largeTitle)
    .foregroundColor(Color.red)
        }
    }
}

※flameよりも先に記述をしないといけない。

border

ビューに境界線を描画。

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
        alignment: .bottom
    )
    .border(Color.blue, width: 2)
    .font(.largeTitle)
    .foregroundColor(Color.red)
        }
    }
}

position

ビューの位置を座標で指定する

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
    )
    .position(x: 50, y: 100)
    .font(.largeTitle)

起点は親のビューを起点とする。

offset

元々の場所を基準に表示位置をずらしたい場合に使用

Text("こんにちは")
    .flame(
        width: 200,
        height: 150,
    )
    .offset(x: 50, y: 50)
    .font(.largeTitle)

edgesIgnoringSafeArea

これは知っておきたいモデファイア。
ビューをセーフエリアを拡張して表示したいときに使用。

Color(red: 0, green: 0, blue: 0)
  .edgesIgnoringSafeArea(.vertical)

edgesIgnoringSafeAreaのプロパティ

top(上のみ)bottom(下のみ)leading(左のみ)trailing(右のみ)
horizontal(水平方向)vertical(垂直方向)all(全方向)

padding

cssでなじみ深い名称ですが、swiftでも同様の意味合いで使うことが可能

Text("こんにちは")
    .padding(15)

上下左右を個別に設定する際

Text("こんにちは")
    .padding(.init(
        top: 5,
        leading: 10,
        bottom: 5,
        trailing: 15
    ))

background

ビューの背景を指定

Text("こんにちは")
    .background(Image("sample"))

foregroundColor

ビューの前景要素に使う”色”を指定。(foregroundは色のみ)

Text("こんにちは")
    .foregroundColor(Color.red)

overlay

ビューを別のビューと重ねるときに使用

Image("sample")
    .overlay(
        Text("Overlay")
            .font(.largeTitle)
            .padding(10)
    )

画像のビューにキャプションを付ける際などに便利。

clipped

ビューをフレームサイズで切り取る

Textビューでははみ出た要素は切り捨てられるが、他のビューはフレームをはみ出して表示されるため、clippedを使用することができる。

Image("sample")
    .flame(width: 150, height: 150)
    .clipped()

clipShape

ビューを指定の形状で切り取る

Image("sample")
    .clipShape(Circle())

clipShapeのプロパティ

Capsuleカプセル型
Circle円形
Ellipse楕円形
Pathパスに合わせてシェイプ
Rectangle四角形
RoundedRectangle角丸の四角形

mask

ビューを他のビューで切り取ることができる

Image("sample")
    .mask(Image("sample"))

cornerRadius

指定した値でビューの角をまるめる
clipShapeと似ているが丸みを調整できる

Image("sample")
    .cornerRadius(10)