[WWDC24] SwiftUIの新機能のまとめ

2024年6月25日 所 友太 / @tokorom

image

WWDC24の What’s new in SwiftUI のまとめです。

今回、このセッションで紹介される項目の数が例年以上に多すぎてびっくりでした。 セッションでは短い間隔でポンポンとたくさんの機能が流れるように紹介されていきます。

このまとめでは、セッションでは軽く触れられた程度の内容も、APIリファレンスへのリンクをつけるなどしてもう少しだけ補足します。

このセッションを視聴する/この記事を参照する目的は、WWDC24で発表されたSwiftUIの新機能をさらっと把握し頭の中にインデックスを貼ることだと思います。

サイドバー/タブバー

sidebar-customize

struct KaraokeTabView: View {
    @State var customization = TabViewCustomization()
    
    var body: some View {
        TabView {
            Tab("Parties", image: "party.popper") {
                PartiesView(parties: Party.all)
            }
            .customizationID("karaoke.tab.parties")
            
            Tab("Planning", image: "pencil.and.list.clipboard") {
                PlanningView()
            }
            .customizationID("karaoke.tab.planning")

            Tab("Attendance", image: "person.3") {
                AttendanceView()
            }
            .customizationID("karaoke.tab.attendance")

            Tab("Song List", image: "music.note.list") {
                SongListView()
            }
            .customizationID("karaoke.tab.songlist")
        }
        .tabViewStyle(.sidebarAdaptable)
        .tabViewCustomization($customization)
    }
}

tvos-sidebar

macos-segmented

sheet

.presentationSizing(
    .page
        .fitted(horizontal: false, vertical: true)
        .sticky(horizontal: false, vertical: true)
)

Zoom Navigation Transition

struct PartyView: View {
    var party: Party
    @Namespace() var namespace
    
    var body: some View {
        NavigationLink {
            PartyDetailView(party: party)
                .navigationTransition(.zoom(
                    sourceID: party.id, in: namespace))
        } label: {
            Text("Party!")
        }
        .matchedTransitionSource(id: party.id, in: namespace)
    }
}

struct PartyDetailView: View {
    var party: Party
    
    var body: some View {
        Text("PartyDetailView")
    }
}

struct Party: Identifiable {
    var id = UUID()
    static var all: [Party] = []
}

Controls

controls

import WidgetKit
import SwiftUI

struct StartPartyControl: ControlWidget {
    var body: some ControlWidgetConfiguration {
        StaticControlConfiguration(
            kind: "com.apple.karaoke_start_party"
        ) {
            ControlWidgetButton(action: StartPartyIntent()) {
                Label("Start the Party!", systemImage: "music.mic")
                Text(PartyManager.shared.nextParty.name)
            }
        }
    }
}

// Model code

class PartyManager {
    static let shared = PartyManager()
    var nextParty: Party = Party(name: "WWDC Karaoke")
}

struct Party {
    var name: String
}

// AppIntent

import AppIntents

struct StartPartyIntent: AppIntent {
    static let title: LocalizedStringResource = "Start the Party"
    
    func perform() async throws -> some IntentResult {
        return .result()
    }
}

Swift Charts

lineplot

import SwiftUI
import Charts

struct AttendanceView: View {
    var body: some View {
        Chart {
          LinePlot(x: "Parties", y: "Guests") { x in
            pow(x, 2)
          }
          .foregroundStyle(.purple)
        }
        .chartXScale(domain: 1...10)
        .chartYScale(domain: 1...100)
    }
}

TableColumnForEach

tablecolumnforeach

Table(guestData) {
    // A static column for the name
    TableColumn("Name", value: \.name)
    
    TableColumnForEach(partyData) { party in
        TableColumn(party.name) { guest in
            Text(guest.songsSung[party.id] ?? 0, format: .number)
        }
    }
}

MeshGradient

meshgradient

MeshGradient(
    width: 3,
    height: 3,
    points: [
        .init(0, 0), .init(0.5, 0), .init(1, 0),
        .init(0, 0.5), .init(0.3, 0.5), .init(1, 0.5),
        .init(0, 1), .init(0.5, 1), .init(1, 1)
    ],
    colors: [
        .red, .purple, .indigo,
        .orange, .cyan, .blue,
        .yellow, .green, .mint
    ]
)

Document Launch Scene

DocumentGroupLaunchScene

DocumentGroupLaunchScene("Your Lyrics") {
    NewDocumentButton()
    Button("New Parody from Existing Song") {
        // Do something!
    }
} background: {
    PinkPurpleGradient()
} backgroundAccessoryView: { geometry in
    MusicNotesAccessoryView(geometry: geometry)
         .symbolEffect(.wiggle(.rotational.continuous()))
} overlayAccessoryView: { geometry in
    MicrophoneAccessoryView(geometry: geometry)
}

SF Symbols

macOS

Window

window-plain

Window("Lyric Preview", id: "lyricPreview") { ... }
    .windowStyle(.plain)
    .windowLevel(.floating)

.defaultWindowPlacement { content, context in
    let displayBounds = context.defaultDisplay.visibleRect
    let contentSize = content.sizeThatFits(.unspecified)
    return topPreviewPlacement(size: contentSize, bounds: displayBounds)
}

UtilityWindow

modifierKeyAlternate

modifierKeyAlternate

Button("Preview Lyrics in Window") {
    // show preview in window
}
.modifierKeyAlternate(.option) {
    Button("Preview Lyrics in Full Screen") {
        // show preview in full screen
    }
}
.keyboardShortcut("p", modifiers: [.shift, .command])

onModifierKeysChanged

LyricLine()
    .overlay(alignment: .top) {
        if showBouncingBallAlignment {
            // Show bouncing ball alignment guide
        }
    }
    .onModifierKeysChanged(mask: .option) {
        showBouncingBallAlignment = !$1.isEmpty
    }

pointerStyle

pointerStyle

ForEach(resizeAnchors) { anchor in
    ResizeHandle(anchor: anchor)
         .pointerStyle(.frameResize(position: anchor.position))
}

visionOS

pushWindow

struct EditorView: View {
    @Environment(\.pushWindow) private var pushWindow
    
    var body: some View {
        Button("Play", systemImage: "play.fill") {
            pushWindow(id: "lyric-preview")
        }
    }
}

hoverEffect

hoverEffect

.hoverEffect { effect, isActive, _ in
    effect.scaleEffect(isActive ? 1.05 : 1.0)
}

iPadOS

スクイーズ

@Environment(\.preferredPencilSqueezeAction) var preferredAction
    
var body: some View {
    LyricsEditorView()
        .onPencilSqueeze { phase in
            if preferredAction == .showContextualPalette, case let .ended(value) = phase {
                if let anchorPoint = value.hoverPose?.anchor {
                    lyricDoodlePaletteAnchor = .point(anchorPoint)
                }
                lyricDoodlePalettePresented = true
            }
       }
}

watchOS

Live Activity

ダブルタップジェスチャー

時間や日付の表示形式

textFormat

ウィジェットの表示示唆

SwiftUI Framework foundations

カスタムコンテナ

customContainer

Entryマクロ

extension EnvironmentValues {
  @Entry var karaokePartyColor: Color = .purple
}

extension FocusValues {
  @Entry var lyricNote: String? = nil
}

extension Transaction {
  @Entry var animatePartyIcons: Bool = false
}

extension ContainerValues {
  @Entry var displayBoardCardStyle: DisplayBoardCardStyle = .bordered
}

アクセシビリティ

Xcode Preview

#Preview {
   @Previewable @State var showAllSongs = true
   Toggle("Show All songs", isOn: $showAllSongs)
}

テキストの選択範囲

struct LyricView: View {
  @State private var selection: TextSelection?
  
  var body: some View {
    TextField("Line \(line.number)", text: $line.text, selection: $selection)
    // ...
  }
}

searchFocused

textInputSuggestions

textSuggestions

色の混合

colorMix

カスタムシェーダー

ContentView()
  .task {
    let slimShader = ShaderLibrary.slim()
    try! await slimShader.compile(as: .layerEffect)
  }

ScrollView

ScrollView {
    // ...
  }
  .onScrollGeometryChange(for: Bool.self) { geometry in
    geometry.contentOffset.y < geometry.contentInsets.top
  } action: { wasScrolledToTop, isScrolledToTop in
    withAnimation {
      showBackButton = !isScrolledToTop
    }
  }

VideoPlayer(player: player)
  .onScrollVisibilityChange(threshold: 0.2) { visible in
    if visible {
      player.play()
    } else {
      player.pause()
    }
  }

struct ContentView: View {
  @State private var position: ScrollPosition =
    .init(idType: Int.self)

  var body: some View {
    ScrollView {
      // ... 
    }
    .scrollPosition($position)
    .overlay {
      FloatingButton("Back to Invitation") {
        position.scrollTo(edge: .top)
      }
    }
  }
}

Swift 6

UIKit/AppKit連携

visionOS 2

Volumeベースプレート

WindowGroup {
  ContentView()
}
.windowStyle(.volumetric)
.defaultWorldScaling(.trueScale)
.volumeBaseplateVisibility(.hidden)

onVolumeViewpointChange

 Model3D(named: "microphone")
  .onVolumeViewpointChange { _, new in
    micRotation = rotateToFace(new)
  }
  .rotation3DEffect(micRotation)
  .animation(.easeInOut, value: micRotation)

没入度の範囲指定

immersiveProgerssive

新しいSurroundingsEffect

struct LoungeView: View {
  var body: some View {
    StageView()
      .preferredSurroundingsEffect(.colorMultiply(.purple))
  }
}

オーナメント

テキストViewの拡張

textRender

struct KaraokeRenderer: TextRenderer {
  func draw(
    layout: Text.Layout,
    in context: inout GraphicsContext
  ) {
    for line in layout {
      for run in line {
        var glow = context

        glow.addFilter(.blur(radius: 8))
        glow.addFilter(purpleColorFilter)

        glow.draw(run)
        context.draw(run)
      }
    }
  }
}

struct LyricsView: View {
  var body: some View {
    Text("A Whole View World")
      .textRenderer(KaraokeRenderer())
  }
}

まとめは以上です。 盛りだくさんすぎてびっくりでした。

所 友太
Engineer
所 友太 / @tokorom
静岡大学情報学部卒業後、UIEvolution株式会社、クックパッド株式会社での勤務を経てフリーのiOSアプリ開発者として活動。 著書に『iPhoneプログラミングUIKit詳解リファレンス』『よくわかるAuto Layout（監修）』『iOS 11/12 Programming』など。
Related Entries
WWDC2023 KeynoteのApple Pro Visionの紹介をとにかく細かく視聴してコメントしました
WWDC2023 KeynoteのApple Pro Visionの紹介をとにかく細かく視聴してコメントしました 2023年6月15日 所 友太 タイトルのとおりですが、KeynoteのApple Pro Visionの紹介部分を見直して、一場面一場面停止して詳細を眺めつつ、感じたことを１つ１
Human Interface GuidelinesのApp Clipsの章の日本語訳
Human Interface GuidelinesのApp Clipsの章の日本語訳 2020年7月7日 所 友太 前回、HIGのWidgetsの章を日本語訳した記事が好評だったので、今回はWidgesと同じくiOS 14の目玉機能の「App Clips」につ
Human Interface GuidelinesのWidgetsの章の日本語訳
Human Interface GuidelinesのWidgetsの章の日本語訳 2020年7月2日 所 友太 WWDC20でiOS 14の新機能として発表されたWidgetsについて勉強するため、Human Interface Guidelines (HIG) の Widgetsの章 を日本語訳します。 日
SwiftUIアプリを24時間で作ってリリースするひとりハッカソンの結果報告
SwiftUIアプリを24時間で作ってリリースするひとりハッカソンの結果報告 2020年1月27日 所 友太 2019年はSwiftUI誕生の年 2019年のSwiftUIの発表はたいへんインパクトがありましたね！ Objective-CからSwiftへ
WWDC 2023 visionOSデザインまわりで見ておいたほうが良いセッション
WWDC 2023 visionOSデザインまわりで見ておいたほうが良いセッション 2023年8月25日 Kaz Motoyama こんにちは、Spinnersの元山@kudakurageです。 WWDC23でApple Vision Proが発表されてからもう2ヶ月くらいですが、vis
[visionOSアプリ練習] SwiftUIアプリで3Dモデルを表示する
[visionOSアプリ練習] SwiftUIアプリで3Dモデルを表示する 2023年6月26日 所 友太 visionOS SDK Betaがリリースされましたので少しずつ勉強していきます！ まずは第一歩目としてSwiftUIアプリの中で3Dモデルを表示してみました。 ど
Latest Entries
[WWDC24] SwiftUIの新機能のまとめ
[WWDC24] SwiftUIの新機能のまとめ 2024年6月25日 所 友太 WWDC24の What’s new in SwiftUI のまとめです。 今回、このセッションで紹介される項目の数が例年以上に多すぎてびっくりでした。 セッションでは短い
[visionOS] 最もシンプルな完全没入空間を試すサンプルコード
[visionOS] 最もシンプルな完全没入空間を試すサンプルコード 2023年9月28日 所 友太 ぼくがやりたかったのはシンプルに完全没入空間 immersiveStyle = FullImmersionStyle になにか表示するというだけなのですが、それなのに地味にはまったため記事にしています。 完全没
[iOSDC Japan 2023] SharePlayの歴史と進化 - そしてvisionOSへ
[iOSDC Japan 2023] SharePlayの歴史と進化 - そしてvisionOSへ 2023年9月19日 所 友太 Photo by @huin 去る2023年9月1日に iOSDC Japan 2023 に参加し、 SharePlayの歴史と進化 - そしてvisionOSへ というセッションをもたせていただきまし
WWDC 2023 visionOSデザインまわりで見ておいたほうが良いセッション
WWDC 2023 visionOSデザインまわりで見ておいたほうが良いセッション 2023年8月25日 Kaz Motoyama こんにちは、Spinnersの元山@kudakurageです。 WWDC23でApple Vision Proが発表されてからもう2ヶ月くらいですが、vis
[visionOSアプリ練習] SwiftUIアプリで3Dモデルを表示する
[visionOSアプリ練習] SwiftUIアプリで3Dモデルを表示する 2023年6月26日 所 友太 visionOS SDK Betaがリリースされましたので少しずつ勉強していきます！ まずは第一歩目としてSwiftUIアプリの中で3Dモデルを表示してみました。 ど
WWDC2023 KeynoteのApple Pro Visionの紹介をとにかく細かく視聴してコメントしました
WWDC2023 KeynoteのApple Pro Visionの紹介をとにかく細かく視聴してコメントしました 2023年6月15日 所 友太 タイトルのとおりですが、KeynoteのApple Pro Visionの紹介部分を見直して、一場面一場面停止して詳細を眺めつつ、感じたことを１つ１
すべての記事一覧をみる