🎉

[更新中]WWDC23で発表されたSwiftUIの新機能

2023/06/06に公開

Swift

SwiftUI

wwdc

tech

現時点で公開されている新機能

高度なアニメーションコントロール
簡略化されたデータフロー
空間アプリを構築する
インタラクティブなウィジェット
SwiftDataのサポート
拡張されたwatchOS API
新しいMapKit API
新しいチャートタイプとインタラクティブ性
APIカバレッジの拡大

SwiftUI(iOS17+)

1. MapKit

SwiftUIのMapのカスタマイズ項目が増えました。
従来は目的地までの経路を表示するにはUIKitのMapを使用する必要がありましたが、
SwiftUIのみで完結できるようになりました。
また、MapのViewにコンパスを表示するのかなども指定できるようになっています。

Map {
    Marker(item: destination)
    // 目的にまでの経路
    MapPolyline(route)
        .stroke(.blue, lineWidth: 5)
    UserAnnotation()
}
.mapControls {
    MapUserLocationButton()
    MapCompass()
}

2. Swift Chrts

Swift Chrtsに円グラフが追加されました。
既存のグラフにもスクロールの追加など改善が加えられています。

Chart(sales, id: \.name) { element in
    SectorMark(
        angle: .value("Sales", element.sales),
        innerRadius: .ratio(0.618),
        angularInset: 1.5
    )
    .cornerRadius(5)
    .foregroundStyle(by: .value("Name", element.name))
}

3. StoreKit

アプリ内でサブスクリブションを促すViewを使うことができます。

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .lightMarketingContentStyle()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.backgroundStyle(.clear)
.subscriptionStoreButtonLabel(.multiline)
.subscriptionStorePickerItemBackground(.thinMaterial)
.storeButton(.visible, for: .redeemCode)

4. KeyframeAnimator

KeyframeAnimator(
    initialValue: AnimationValues(), trigger: runPlan
) { values in
    LogoField(color: color)
        .scaleEffect(values.scale)
        .rotationEffect(values.rotation, anchor: .bottom)
        .offset(y: values.verticalTranslation)
} keyframes: { _ in
    KeyframeTrack(\.verticalTranslation) {
        SpringKeyframe(30, duration: 0.25, spring: .smooth)
        CubicKeyframe(-120, duration: 0.3)
        CubicKeyframe(-120, duration: 0.5)
        CubicKeyframe(10, duration: 0.3)
        SpringKeyframe(0, spring: .bouncy)
    }

    KeyframeTrack(\.scale) { ... }
    KeyframeTrack(\.rotation) { ... }
}

Xcode

Preview

// Xcode14
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

// Xcode15
#Preview {
    ContentView()
}

Image

画像名を指定するときにミスを減らすことができます。

var body: some View {
    VStack {
 // 今まで
        Image("image")
 // 追加された書き方
        Image(.image)
    }
}