【SwiftUI入門】コンポーネントまとめーその３

はじめに

SwiftUI のコンポーネントまとめです。下記ドキュメントにあるやつをまとめました（ターゲットは iOS14 です）。

Immediate Mode Drawing

Canvas

iOS 15 以上なので割愛。

struct Canvas<Symbols> where Symbols : View

1	struct Canvas<Symbols> where Symbols : View

ドキュメント：Canvas

GraphicsContext

iOS 15 以上なので割愛。

@frozen struct GraphicsContext

1	@frozen struct GraphicsContext

ドキュメント：GraphicsContext

Shapes

Rectangle

四角形。

@frozen struct Rectangle

1	@frozen struct Rectangle

ドキュメント：Rectangle

簡易実装。

Rectangle()
    .fill(Color.blue)
    .frame(width: 44, height: 44)

Rectangle()

.fill(Color.blue)

.frame(width: 44, height: 44)

RoundedRectangle

角丸四角形。

@frozen struct RoundedRectangle

1	@frozen struct RoundedRectangle

ドキュメント：RoundedRectangle

簡易実装。

RoundedRectangle(cornerRadius: 10)
    .fill(Color.blue)
    .frame(width: 44, height: 44)

RoundedRectangle(cornerRadius: 10)

.fill(Color.blue)

.frame(width: 44, height: 44)

Circle

円。

@frozen struct Circle

1	@frozen struct Circle

ドキュメント：Circle

簡易実装。frame が正方形でなくても円になる。

Circle()
    .fill(Color.blue)
    .frame(width: 44, height: 44)

Circle()

.fill(Color.blue)

.frame(width: 44, height: 44)

Ellipse

楕円。

@frozen struct Ellipse

1	@frozen struct Ellipse

ドキュメント：Ellipse

簡易実装。frame が正方形なら円になる。

Ellipse()
    .fill(Color.blue)
    .frame(width: 88, height: 44)

Ellipse()

.fill(Color.blue)

.frame(width: 88, height: 44)

Capsule

左右が半円のカプセル型四角形？

@frozen struct Capsule

1	@frozen struct Capsule

ドキュメント：Capsule

簡易実装。frame が正方形なら円になる。

Capsule()
    .fill(Color.blue)
    .frame(width: 88, height: 44)

Capsule()

.fill(Color.blue)

.frame(width: 88, height: 44)

Path

パス引くやつ？

@frozen struct Path

1	@frozen struct Path

ドキュメント：Path

簡易実装。

Path { path in
    path.move(to: .init(x: 0, y: 44))
    path.addLine(to: .init(x: 22, y: 0))
    path.addLine(to: .init(x: 44, y: 44))
    path.addLine(to: .init(x: 0, y: 44))
}
    .fill(Color.blue)
    .frame(width: 44, height: 44)

Path { path in

path.move(to: .init(x: 0, y: 44))

path.addLine(to: .init(x: 22, y: 0))

path.addLine(to: .init(x: 44, y: 44))

path.addLine(to: .init(x: 0, y: 44))

}

.fill(Color.blue)

.frame(width: 44, height: 44)

Transformed Shapes

/// こいつ使ってます
struct Triangle: Shape {

    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: .init(x: 0, y: rect.maxY))
            path.addLine(to: .init(x: rect.midX, y: 0))
            path.addLine(to: .init(x: rect.maxX, y: rect.maxY))
            path.addLine(to: .init(x: 0, y: rect.maxY))
        }
    }
}

/// こいつ使ってます

struct Triangle: Shape {

func path(in rect: CGRect) -> Path {

Path { path in

path.move(to: .init(x: 0, y: rect.maxY))

path.addLine(to: .init(x: rect.midX, y: 0))

path.addLine(to: .init(x: rect.maxX, y: rect.maxY))

path.addLine(to: .init(x: 0, y: rect.maxY))

}

ScaledShape

指定の Shape のスケール指定ができるやつ？

@frozen struct ScaledShape<Content> where Content : Shape

1	@frozen struct ScaledShape<Content> where Content : Shape

ドキュメント：ScaledShape

簡易実装。

ScaledShape(shape: Triangle(), scale: .init(width: 0.5, height: 0.5))
    .fill(Color.red)
    .frame(width: 44, height: 44)

ScaledShape(shape: Triangle(), scale: .init(width: 0.5, height: 0.5))

.fill(Color.red)

.frame(width: 44, height: 44)

RotatedShape

指定の Shape を回転できるやつ？

@frozen struct RotatedShape<Content> where Content : Shape

1	@frozen struct RotatedShape<Content> where Content : Shape

ドキュメント：RotatedShape

簡易実装。

RotatedShape(shape: Triangle(), angle: .init(radians: Double.pi))
    .fill(Color.red)
    .frame(width: 44, height: 44)

RotatedShape(shape: Triangle(), angle: .init(radians: Double.pi))

.fill(Color.red)

.frame(width: 44, height: 44)

OffsetShape

指定の Shape を平行移動できるやつ？

@frozen struct OffsetShape<Content> where Content : Shape

1	@frozen struct OffsetShape<Content> where Content : Shape

ドキュメント：OffsetShape

簡易実装。

OffsetShape(shape: Triangle(), offset: .init(width: 32, height: 10))
    .fill(Color.red)
    .frame(width: 44, height: 44)

OffsetShape(shape: Triangle(), offset: .init(width: 32, height: 10))

.fill(Color.red)

.frame(width: 44, height: 44)

TransformedShape

指定の Shape をアフィン変換できるやつ？

@frozen struct TransformedShape<Content> where Content : Shape

1	@frozen struct TransformedShape<Content> where Content : Shape

ドキュメント：TransformedShape

簡易実装。

TransformedShape(shape: Triangle(), transform: .init(rotationAngle: CGFloat.pi/2))
    .fill(Color.red)
    .frame(width: 44, height: 44)

TransformedShape(shape: Triangle(), transform: .init(rotationAngle: CGFloat.pi/2))

.fill(Color.red)

.frame(width: 44, height: 44)

ContainerRelativeShape

こいつはちょっとわからない。。。

参考になりそうなやつ貼っときます。

@frozen struct ContainerRelativeShape

1	@frozen struct ContainerRelativeShape

ドキュメント：ContainerRelativeShape

簡易実装。

ContainerRelativeShape()
    .fill(Color.red)
    .frame(width: 44, height: 44)

ContainerRelativeShape()

.fill(Color.red)

.frame(width: 44, height: 44)

Shape Styles

Color

色。View とかにも設定できる。

@frozen struct Color

1	@frozen struct Color

ドキュメント：Color

簡易実装。

Color(.systemRed)
    .frame(width: 44, height: 44)

1 2	Color(.systemRed) .frame(width: 44, height: 44)

Material

iOS 15 以上のため割愛。

struct Material

1	struct Material

ドキュメント：Material

ImagePaint

画像を繰り返すやつ？

@frozen struct ImagePaint

1	@frozen struct ImagePaint

ドキュメント：ImagePaint

簡易実装。

Rectangle()
    .fill(ImagePaint(image: Image("image"), scale: 0.1))
    .frame(width: 44, height: 44)

Rectangle()

.fill(ImagePaint(image: Image("image"), scale: 0.1))

.frame(width: 44, height: 44)

AngularGradient

円錐状のグラデーション？

@frozen struct AngularGradient

1	@frozen struct AngularGradient

ドキュメント：AngularGradient

簡易実装。

AngularGradient(gradient: Gradient(colors: [.red, .black]),
                center: .center, angle: .degrees(45))
    .frame(width: 44, height: 44)

AngularGradient(gradient: Gradient(colors: [.red, .black]),

center: .center, angle: .degrees(45))

.frame(width: 44, height: 44)

EllipticalGradient

iOS 15 以上なので割愛。

@frozen struct EllipticalGradient

1	@frozen struct EllipticalGradient

ドキュメント：EllipticalGradient

LinearGradient

線形のグラデーション？

@frozen struct LinearGradient

1	@frozen struct LinearGradient

ドキュメント：LinearGradient

簡易実装。

LinearGradient(gradient: Gradient(colors: [.green, .black]),
               startPoint: .leading,
               endPoint: .trailing)
    .frame(width: 44, height: 44)

LinearGradient(gradient: Gradient(colors: [.green, .black]),

startPoint: .leading,

endPoint: .trailing)

.frame(width: 44, height: 44)

RadialGradient

放射状のグラデーション？

@frozen struct RadialGradient

1	@frozen struct RadialGradient

ドキュメント：RadialGradient

簡易実装。

RadialGradient(gradient: Gradient(colors: [.blue, .black]),
               center: .center,
               startRadius: 0,
               endRadius: 22)
    .frame(width: 44, height: 44)

RadialGradient(gradient: Gradient(colors: [.blue, .black]),

center: .center,

startRadius: 0,

endRadius: 22)

.frame(width: 44, height: 44)

Gradient

グラデーション情報の構造体。

@frozen struct Gradient

1	@frozen struct Gradient

ドキュメント：Gradient

簡易実装。

Gradient(colors: [.blue, .black])

1	Gradient(colors: [.blue, .black])

Semantic Shape Styles

PrimaryContentStyle

iOS 15 以上なので割愛。

@frozen struct PrimaryContentStyle

1	@frozen struct PrimaryContentStyle

ドキュメント：PrimaryContentStyle

SecondaryContentStyle

iOS 15 以上なので割愛。

@frozen struct SecondaryContentStyle

1	@frozen struct SecondaryContentStyle

ドキュメント：SecondaryContentStyle

TertiaryContentStyle

iOS 15 以上なので割愛。

@frozen struct TertiaryContentStyle

1	@frozen struct TertiaryContentStyle

ドキュメント：TertiaryContentStyle

QuaternaryContentStyle

iOS 15 以上なので割愛。

@frozen struct QuaternaryContentStyle

1	@frozen struct QuaternaryContentStyle

ドキュメント：QuaternaryContentStyle

ForegroundStyle

わからん。。。なんなんだこいつ？

@frozen struct ForegroundStyle

1	@frozen struct ForegroundStyle

ドキュメント：ForegroundStyle

BackgroundStyle

わからん。。。なんなんだこいつ？

@frozen struct BackgroundStyle

1	@frozen struct BackgroundStyle

ドキュメント：BackgroundStyle

TintShapeStyle

iOS 15 以上なので割愛。

struct TintShapeStyle

1	struct TintShapeStyle

ドキュメント：TintShapeStyle

SeparatorShapeStyle

macOS 用なので割愛。

struct SeparatorShapeStyle

1	struct SeparatorShapeStyle

ドキュメント：SeparatorShapeStyle

SelectionShapeStyle

iOS 15 以上なので割愛。

struct SelectionShapeStyle

1	struct SelectionShapeStyle

ドキュメント：SelectionShapeStyle

Animation

easeIn とかアニメーションのスタイルと時間を設定するやつ？

@frozen struct Animation

1	@frozen struct Animation

ドキュメント：Animation

簡易実装。

@State private var isHidden = false

VStack {
    Circle()
        .fill(Color.purple)
        .frame(width: 44, height: 44)
        .opacity(isHidden ? 0.0 : 1.0)
        .animation(.easeInOut(duration: 1.5))
    Button("Animation!") {
        self.isHidden.toggle()
    }
}

@State private var isHidden = false

VStack {

Circle()

.fill(Color.purple)

.frame(width: 44, height: 44)

.opacity(isHidden ? 0.0 : 1.0)

.animation(.easeInOut(duration: 1.5))

Button("Animation!") {

self.isHidden.toggle()

}

AnimatablePair

複数プロパティをアニメーションさせるやつ？（ちょっとわからない。。。）

@frozen struct AnimatablePair<First, Second> where First : VectorArithmetic, Second : VectorArithmetic

1	@frozen struct AnimatablePair<First, Second> where First : VectorArithmetic, Second : VectorArithmetic

ドキュメント：AnimatablePair

EmptyAnimatableData

空のアニメーション？どういうときに使うかわからん。。。

@frozen struct EmptyAnimatableData

1	@frozen struct EmptyAnimatableData

ドキュメント：EmptyAnimatableData

簡易実装。

EmptyAnimatableData()

1	EmptyAnimatableData()

AnyTransition

遷移用のアニメーション？

@frozen struct AnyTransition

1	@frozen struct AnyTransition

ドキュメント：AnyTransition

簡易実装。

@State private var isTransition = false

Button("Transition!") {
    withAnimation {
        isTransition.toggle()
    }
}
if isTransition {
    Rectangle()
        .fill(Color.red)
        .frame(width: 44, height: 44)
        .transition(AnyTransition.slide)
}

@State private var isTransition = false

Button("Transition!") {

withAnimation {

isTransition.toggle()

}

if isTransition {

Rectangle()

.fill(Color.red)

.frame(width: 44, height: 44)

.transition(AnyTransition.slide)

}

下記がなどが用意されている。もうちょっと凝ったやつがやりたい場合は combined, asymmetric などを使ってゴニョゴニョする模様。

static let identity: AnyTransition
static let opacity: AnyTransition
static var scale: AnyTransition
static var slide: AnyTransition

static let identity: AnyTransition

static let opacity: AnyTransition

static var scale: AnyTransition

static var slide: AnyTransition

参考：【SwiftUI】トランジション（transition）の使い方

Geometry

GeometryReader

View の位置とサイズを取得するための View？

@frozen struct GeometryReader<Content> where Content : View

1	@frozen struct GeometryReader<Content> where Content : View

ドキュメント：GeometryReader

簡易実装。

GeometryReader { proxy in
    Text("x: \(proxy.frame(in: .global).origin.x)\ny: \(proxy.frame(in: .global).origin.y)\nwidth: \(proxy.size.width)\nheight: \(proxy.size.height)")
}

GeometryReader { proxy in

Text("x: \(proxy.frame(in: .global).origin.x)\ny: \(proxy.frame(in: .global).origin.y)\nwidth: \(proxy.size.width)\nheight: \(proxy.size.height)")

}

GeometryProxy

GeometryReader でサイズや位置を取得するためのやつ？

struct GeometryProxy

1	struct GeometryProxy

ドキュメント：GeometryProxy

Anchor

わからん。。。このへん見たらわかるかも？
SwiftUIのAnchorの使い方を学ぶ

@frozen struct Anchor<Value>

1	@frozen struct Anchor<Value>

ドキュメント：Anchor

UnitPoint

わからん。。。相対位置を指定するやつ？このへん見たらわかるかも？
【SwiftUI】UnitPointの使い方

@frozen struct UnitPoint

1	@frozen struct UnitPoint

ドキュメント：UnitPoint

Angle

これはそのまま角度を表す構造体？

@frozen struct Angle

1	@frozen struct Angle

ドキュメント：Angle

簡易実装。

Text("Hello").rotationEffect(Angle(degrees: 45))
Text("Hello").rotationEffect(Angle(radians: Double.pi/4))

1 2	Text("Hello").rotationEffect(Angle(degrees: 45)) Text("Hello").rotationEffect(Angle(radians: Double.pi/4))

ProjectionTransform

わからん！

@frozen struct ProjectionTransform

1	@frozen struct ProjectionTransform

ドキュメント：ProjectionTransform

おわりに

使い方わからないやつも多いですがとりあえずこれで一通りは見れた！

iOS 15 でもまだゴリゴリ変わっていってる最中な気がしますがそろそろ SwiftUI 触っていこうと思います。

参考

Drawing and Animation