ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
新しいデザインによるUIKitアプリの作成
UIKitアプリをアップデートして、新しいデザインシステムを最大限に活用しましょう。タブビュー、スプリットビュー、バー、プレゼンテーション、検索、コントロールなどの重要な変更について詳しく説明し、カスタムUIでLiquid Glassをどのように使用するかのデモを行います。このビデオの内容を十分理解できるよう、まず一般的なデザインガイダンスとして「Get to know the new design system」を視聴することをおすすめします。
関連する章
- 0:00 - Introduction
- 1:55 - Tab views and split views
- 7:19 - Navigation and toolbars
- 13:31 - Presentations
- 15:18 - Search
- 17:24 - Controls
- 19:15 - Custom elements
- 25:01 - Next steps
リソース
関連ビデオ
WWDC25
WWDC24
-
このビデオを検索
こんにちは 「新しいデザインによる UIKitアプリの開発」にようこそ UIKitチームのエンジニア Sanaaです このビデオでは アプリに Liquid Glassを取り入れて 新しいデザインを利用する方法を紹介します
iOS 26では新たに美しいデザインを導入し システム全体にわたって 素材やコントロールの 外観と操作性をアップデートしました このデザインの中心は Liquid Glassと呼ばれる新しい素材です 半透明、ダイナミック、躍動感を 特長としています システム全体にわたり UIKitのコンポーネントと素材が Liquid Glassによって アップデートされました
新しいSDKで再コンパイルすると アプリにこの新しい外観が適用されます まだご覧になっていない場合は デザインビデオの 「Meet Liquid Glass」と 「Design with the Liquid Glass Design System」を視聴して 新しいデザインシステムの 概要とベストプラクティスを ぜひご確認ください
最初はタブビューとSplit Viewです 新しいデザインが導入され コンテンツ上に浮かんで表示されます
次に ナビゲーションバーとツールバーの 新しい外観と動作について説明します 透明になり Liquid Glassの ボタンが表示されます コンテンツのスペースも広くなります
その後 新しくなった ズームトランジションや アラートとアクションシートの 新しい動作など 表示関連のアップデートについて説明します
さらに 検索体験のアップデートを紹介します 検索バーを配置する際の 選択肢が増えました
ボタン、スイッチ、スライダなどの コントロールについて説明します そして最後に Liquid Glassの外観と 操作性をカスタムUI要素に 取り入れる方法を紹介します
タブビューとSplit Viewから始めましょう
新しいLiquid Glassの外観により UITabBarControllerと UISplitViewControllerが アップデートされました
タブバーは一貫性のある 最上位ナビゲーションをアプリに提供します アプリの概要を一目で確認できます また 別のセクションへ すばやく切り替えることができます iPhoneでは 新しいデザインのタブバーは コンテンツの上に浮かんで表示されます
スクロール時は最小化されるように 設定することで コンテンツに集中できます
スクロール時にタブバーを最小化するには tabBarMinimizeBehaviorを 希望の方向に設定します ここでは TVアプリを .onScrollDownに設定しています 反対方向にスクロールすると タブバーが再び拡張されます
ミュージックアプリの ミニプレーヤーのように タブバーの上に アクセサリビューを表示できます UITabBarControllerは タブバーの上に アクセサリビューを表示して その外見を一致させます タブバーを最小化すると アクセサリビューの表示位置が下がり タブバーの横に表示されます
bottomAccessoryを設定するには contentViewを使用して UITabAccessoryを作成します 次に UITabBarControllerに bottomAccessoryプロパティを設定します
アクセサリがタブバーの横に表示される時は 表示スペースが狭くなります ここでは 限られたスペースに ミュージックアプリを表示するため ミニプレーヤーの一部のメディア コントロールが非表示になっています
アクセサリビューを調整するには tabAccessoryEnvironment特性への変更を 監視するよう登録します アクセサリビューがタブバーと 並んでいるかどうかをチェックし 必要な場合はこのビューを更新します
updatePropertiesを使用し 特性の自動トラッキング動作によって アクセサリビューを更新することもできます
自動特性トラッキングおよび 新しいupdatePropertiesメソッドについては 「What’s new in UIKit」をご覧ください
iPadでは タブバーとサイドバーも Liquid Glassに追加され UITabBarControllerの使用時に アプリのコンテンツ上に浮動表示されます UITabとUITabGroupを使用すると アプリに合わせて自動的に調整され iPadでタブバーとサイドバーを 切り替えられるようになります 詳細については WWDC24の「Elevate your tab and sidebar experience in iPadOS」 およびWWDC25の 「Make your UIKit app more flexible」を ご覧ください
新しいデザインで サイドバーの見栄えがよいのは 一致するメインスクロールビューの下に 鮮やかなコンテンツが表示される場合です iOS 26のTVアプリはそのよい例です アートワークが画面いっぱいに表示され サイドバーの下にも表示されています 常に中央に配置され 完全に見える状態です この効果は iOS 26の多数の アプリで使用されます 新しいUIBackgroundExtensionViewにより アプリの見栄えも各段によくなります
拡張ビューは横幅全体を カバーする必要があります これには サイドバーの端の セーフエリアも含まれます この効果の入力は イメージビューなど 皆さんが提供するコンテンツビューです ビュー階層に配置され シームレスに拡張して 空白のスペースを埋めます
これは目的をもって使用すべき 特殊な効果です 画面下部にはエピソードリストなどの セクションがあります サイドバーの下で自然にスクロールされ 拡張する必要がありません
番組のタイトルや説明など アートワークの上に表示される要素は 拡張しないでください これらはサブビューではなく 拡張ビューの兄弟として追加します
ビュー表示コントローラには ポスターのイメージビューが 既に追加されています この効果を追加するには backgroundExtensionViewを作成して そのcontentViewプロパティに 画像ビューを割り当てます 拡張ビューを階層に追加します 最後に extensionViewの兄弟として detailsViewを追加します デフォルトでは拡張ビューのセーフエリアを コンテンツビューが埋めます 正のセーフエリアが設けられた すべてのエッジが拡張され 空白エリアを埋めます この例では ナビゲーションと ステータスバーでは上端 サイドバーでは左端になります アートワークを覆うナビゲーションバーで TVアプリのコンテンツは非常に小さいため 最上部での拡張効果は必要ありません 代わりに 最上層のセーフエリアの外側に コンテンツビューを手動で配置します
サンプルコードに戻り この効果レイアウトを手動で調整しましょう extensionViewで automaticallyPlacesContentViewをfalseに設定します AutoLayout制約を使用して 画面上にイメージビューを配置します サイドバーの下で イメージビューを拡張するため extensionViewの safeAreaLayoutGuideに等しい leadingAnchorの制約を追加します
trailingAnchorとbottomAnchorの制約を 追加するのも忘れないでください
次に 新しいデザインを取り入れた ナビゲーションバーとツールバーの 表示と動作を見ていきましょう iOS 26では ナビゲーションバーとツールバーにも 新しいLiquid Glassの外観が適用され コンテンツ上に浮動表示されます ツールバーまたはナビゲーションの barButtonアイテムを指定すると アイテムの視覚的なグループに 自動的に分けられます 各グループは Liquid Glassの背景を共有します
デフォルトでは イメージを使用するバーボタンは 他のイメージボタンと背景を共有します 複数のアイテムを持つ ボタングループも背景を共有します
テキストボタンに加え システムの完了ボタン、閉じるボタン、 主要なスタイルボタンは それぞれ異なるガラス背景を使用します こちらの画像は これらのルールを 実際に適用したものです 左端の選択ボタンと 右端の完了ボタンは 中央の4つのイメージボタンと Liquid Glassの背景を共有していません ナビゲーションバーを設定するには すべてのBarButtonItemを navigationItemのrightBarButtonItemsに 直接割り当てます これにより 先ほど説明した デフォルトのシステム動作が得られます アイテムをさらにグループ分けするには fixedSpaceアイテムを使用します この例では共有ボタンを分離するので shareButtonとinfoButtonの間に fixedSpaceを挿入します
読みやすくするため バーボタンはデフォルトで labelColorを使用します アクションに関する情報を伝えるために 色を付けたい場合は 別の色を指定できます
例えばここで フラグボタンを更新し tintColorとして systemOrangeを使用しましょう
フラグシンボルにのみ色が適用されました
ボタンの背景に色を付けるには styleをprominentに設定します
既にflexibleSpaceを使用して 複数のアイテムをツールバーに 配置しているかもしれません Liquid Glassの場合 デフォルトでは 各flexibleSpaceアイテムにより アイテム間で背景が分離されます
これらのアイテムを均等に配置し 1つの背景としてグループ化するには flexibleSpaceを使用して hidesSharedBackgroundをfalseに設定します
iOS 26では UINavigationItemを使用して ナビゲーションエリアのタイトルおよび 大きいタイトルエリアを より詳細に管理できます これには タイトルの下に表示される 新しい字幕も含まれます
属性付き文字列を使用すると タイトルと字幕の両方を きめ細かく調整できます
カスタムビューを指定して インタラクティブ要素を追加します
コンテンツスクロールビューの上に 大きなタイトルが配置され バーの下のコンテンツと共に スクロールされるようになりました
大きなタイトルを常に表示させるには ナビゲーションバーの下で スクロールビューを完全に拡張します
この例では メールアプリのツールバーに 検索フィールドが配置され 新しいsubtitle APIを使用して 未読メールの件数が ナビゲーションバーに表示されています
メールにフィルタを適用すると 大きなタイトルの下のボタンに 現在のフィルタが表示されます このボタンは navigationItemで largeSubtitleViewとして 設定されており ナビゲーションバーの 大きなタイトルの下に表示されます iOS 26では 新しいデザインシステムの一環として ナビゲーションバーの背景が デフォルトで半透明になりました ナビゲーションバーとツールバーから 背景のカスタマイズを削除します UIBarAppearanceまたは backgroundColorを使用して Liquid Glassの外観を操作します
バーのボタンは Liquid Glassの背景を使用します レイアウトマージンを使って カスタムビューのコンテンツをレイアウトし 適切なスペースを設定します ナビゲーションバーやツールバーの下の すべてのスクロールビューには 映像処理が自動的に適用されます これにより 重なって表示される バーのコンテンツが読みやすくなります これはエッジ効果と呼ばれます この新しいエッジ効果が適用されるのは システムバーだけではありません スクロールビューの エッジに重なるビューの カスタムコンテナでも使用できます この例では 2つのボタンが スクロール ビューの下端に重なって表示されています 重なっているボタンの下に エッジ効果を挿入するには scrollEdgeElementContainerInteraction を作成して contentScrollViewとエッジを割り当てます さらにそれを buttonsContainerViewに追加します 多数の浮動要素がある 高密度のUIの場合は スクロールビューのエッジで ハードエッジスタイルを指定します これは iOS 18の標準的な バーの背景と外観が似ています これを有効にするには エッジ効果のスタイルを.hardに設定します
iOS 18ではインタラクティブで割り込み可能な ズームトランジションが導入されました iOS 26では標準のナビゲーションスライド トランジションで同じ流動性が得られます
これはメモアプリです メモを開くと トランジション中も応答が維持されます
間違ったメモを選択した時は すぐにスワイプして戻ることができます
また トランジションの途中でも スクロールを開始できます 同様に 戻るボタンを複数回タップして すばやく戻ることができます
いつでもアプリを操作できるのは ユーザーにとって非常に便利です ということは アプリをいつでも操作できる状態に しておく必要があります 割り込み可能なトランジションの 適切な処理について詳しくは WWDC24のビデオ 「Enhance your UI animations and transitions」をご覧ください また 左端だけでなく コンテンツエリアのどこでもスワイプして 戻れるようになりました 新しいコンテンツ バックスワイプジェスチャは 他の競合するインタラクションを 自動的にチェックします
例えば スワイプアクションの実行中は コンテンツをバックスワイプできません ただし それ以外のエリアでは バックスワイプを行えます
コンテンツバックスワイプよりも 優先させるには カスタムジェスチャのエラー要件を interactiveContentPopGestureRecognizerで 設定する必要があります
新しいデザインは表示方法にも適用されます 新しいダイナミックズームトランジションも その1つです メニューやポップオーバーなどが Liquid Glassボタンから表示された場合 そのボタンがオーバーレイに変形します
その際 アニメーションによって ソースと表示結果との 視覚的な一貫性が維持されます
メニューには自動的に この動作が適用されます ポップオーバーはソースがbarButtonItemの時 この新しいアニメーションが適用されます シートにこの効果を適用するには 新しいズームトランジションを使用します viewControllerで preferredTransitionを.zoomに設定し ソースのbarButtonItemを クロージャで返します
iOS 26ではシートのデザインが アップデートされました その外観は 高さが小さい要素から 大きい要素に対応します この新しいLiquid Glassの 外観を利用するには カスタム背景を削除してください
iPadのアクションシートは ソースビューに固定されています iOS 26以降では iPhoneでも同じように動作し 元のビューの上に直接表示されます
alertControllerの popoverPresentationControllerで sourceItemまたはsourceViewを設定します どのデバイスに表示されているかは 関係ありません ソースビューを割り当てると 新しいトランジションが アクションシートに自動的に適用されます
インラインで表示される アクションシートには キャンセルボタンがありません 他の場所をタップする操作が キャンセルアクションと見なされるためです ソースを指定しない場合は アクションシートが中央に配置され キャンセルボタンが表示されます iOS 26は より一体化された 新しい検索体験を提供します アプリのニーズに適した場所に 検索フィールドを配置できます iPhoneでは 検索バーがツールバーに 自動的に移動するので 検索フィールドに簡単にアクセスできます
既にツールバーを使用している場合は その他のバーボタンに加えて searchBarPlacementBarButtonItemを 追加します これによって 希望の場所に 検索を配置できます
利用可能なスペースに応じて 拡張フィールドまたは ツールバーボタンとして表示されます
iPadでは ユニバーサルアクセス可能な検索に macOSのツールバーパターンが 適用されています ナビゲーションバーの右端に 検索を配置します この配置はSplit Viewに適しています この動作を有効にするには navigationItemの searchBarPlacementAllowsExternalIntegrationを trueに設定します
ビューの切り替え中に 検索できるようにするには UITabBarControllerを使用します 検索用のタブを 右端に追加できるようになりました 検索ボタンをタップすると 拡張して 検索フィールドが表示されます 他のボタンは縮小されます
この検索タブビューは 検索候補を配置するのに適しています デフォルトでは いずれかの候補を選択するか または検索フィールドをタップして 検索を開始します
検索タブがタップされた時に 検索フィールドを 自動的に有効にするには このタブのautomaticallyActivateSearchを trueに設定します
専用の検索ビューでは サイドバー／タブバーのセクションとして 検索を追加することを検討してください iPadでは ナビゲーションバーの右端に 検索バーを統合するか 上に重ねるか または標準幅で中央に配置できます 検索バーを中央に配置するには preferredSearchBarPlacementとして integratedCenteredを使用します タブバーが表示されている時 検索バーはその下に配置されます
次に アップデートされた コントロールの外観について説明します
iOSのコントロールのデザインが一新され ルックアンドフィールが新しくなりました 使い慣れた操作性は変わりません UISwitchなどのコントロールは サイズがわずかに変更されています 現在のレイアウトが新しいサイズに 対応しているかどうかご確認ください スイッチやセグメントコントロールなどには インタラクション用の新しいLiquid Glassの 外観が自動的に適用されます
既存のボタンスタイルに加えて UIButtonConfigurationにより 2つの新しいLiquid Glassの外観を 利用できるようになりました 標準のLiquid Glassを適用するには .glass()構成を使用します アプリの色合いが反映されたLiquid Glassを 適用するには .prominentGlass()を使用します スライダを使用すると Liquid Glass効果だけでなく サムを動かした時に 勢いと伸縮性が加わります iOS 26では TrackConfigurationにより 目盛りを表示できるようになりました この構成を使用して スライドの外観と動作を設定します 例えば この速度スライダの値を 5つに制限するには trackConfigurationを allowsTickValuesOnlyに設定し 目盛り5を指定します
ニュートラル値を使用するように スライダを構成し スライダの端ではなく 任意の位置にスライダフィルを 設けることもできます この場合 スライダフィルは 選択された値と ニュートラル値との差を表します この例では デフォルトより 速い速度が選択されていることがわかります スライダがインタラクティブでない場合は 進捗状況バーのように サムなしスタイルにすることもできます このスタイルは 大きなサムがじゃまになる メディア再生に適しています システムコントロールがLiquid Glassを 取り入れている場所に配置されます 特殊なユースケースについては 新しいLiquid Glassの ルックアンドフィールを導入するための APIがUIKitに用意されています アプリのUIでLiquid Glassを使用する場合 Liquid Glassのデザイン意図に 留意することが重要です Liquid Glassは UIBlurEffectなどの 他の視覚効果とは異なります そのため 使用に適した 特定の場所があります Liquid Glassはインタラクティブレイヤー としてデザインされています アプリのコンテンツとユーザーの 指先の間に浮かんで表示され ユーザーがタッチする メインコントロールを提供します こうした理由から Liquid Glassは アプリの最も重要な要素に制限されます 最高の体験を提供するため 可能であれば システムビューとコントロールを使用してください
マップアプリではLiquid Glassを使用して 地図上にカスタムボタンを浮かせています 明確なコントロールレイヤーとして 自然に利用できます Liquid Glassを使用した 浮動イリュージョンの最適な候補といえます シートを拡張すると マップのボタンが非表示になります これはLiquid Glass要素が 他のLiquid Glass要素と重なるのを防ぎ Liquid Glassの1つの浮動レイヤーが 適切に機能するようにするためです
Liquid Glassを カスタムビューで使用するには UIVisualEffectViewと 新しいUIGlassEffectを作成し
アニメーションブロックで この効果を設定します
特殊なアニメーションを使用して Liquid Glassが表示されます
デフォルトではカプセル型です この形状をカスタマイズするには 新しいcornerConfiguration APIを 使用します
Liquid Glassの外観には ダークモードとライトモードがあります 選択したUserInterfaceStyleに対応します Liquid Glassを既存の Liquid Glassコンテナに追加すると その外観が自動的に変わります コンテナに合わせて コーナーを自動的に調整するには .containerRelativeと cornerConfigurationを使用します このビューをコンテナの コーナーに近づけると cornerRadiusが自動的に調整されます
コーナーから遠ざけると コーナー半径が小さくなり 同心性が自動的に維持されます Liquid Glassの外観は サイズに基づいて調整されます
サイズが大きいほど不透明になり
サイズが小さいほど透明になります ライトモードとダークモードが 自動的に切り替わり コントラストが明確になります
ラベルやイメージなどの コンテンツを追加するには visualEffectViewの contentViewを使用します textColorに基づいて ラベルが自動的に鮮やかになります これにより どのような背景でも 読みやすさが保証されます
ダイナミックカラーを使用すると 背後のカラーに応じて Liquid Glassとそのコンテンツの ライト／ダークが自動的に切り替わります
重要なビューをハイライトするには Liquid Glassで.tintColorを設定し その他のLiquid Glassプロパティと共に アニメーション化します textColorなど コンテンツに対する変更も 同時にアニメーション化します
Liquid Glassでカスタム色を使用するには 新しいUIGlassEffectを作成し カスタムtintColorを割り当て その効果を新しいUIGlassEffectとして アニメーション化します 鮮やかバージョンに合わせて Liquid Glassの色が自動的に調整されます Liquid Glass上のコンテンツを削除するには そのコンテンツのalphaを0に設定します
ボタンなど インタラクティブなシステム要素は ユーザー操作に反応します ボタンをタップすると ボタンが鼓動するように動きます これと同じ効果を カスタムビューに追加するには glassEffectで isInteractiveをtrueに設定します
最後に 画面上で Liquid Glassが不要になった時は この効果をnilに設定して削除します
適切なアニメーションによって 実体化／非実体化されるようにするため 常にalphaより effectプロパティの設定を 優先させてください これらの例では Liquid Glassを 使用したビューは1つだけでした 複数の要素を相互に作用させる時は Liquid Glassの動作を使用します Liquid Glassは複数の異なる形状を シームレスに融合できます
Liquid Glassビューを動的にマージするには UIGlassContainerEffectを使用します UIVisualEffectViewを構成して Liquid Glassビューを作成し それらをサブビューとして コンテナのcontentViewに追加します 両者の間にスペースがある限り 2つの別々なビューとして表示されます
2つのビューを近づけると 水滴のように 結合されます 互いに影響を与えあう距離を指定するには UIGlassContainerEffectの spacingプロパティを使用します
重なり合うフレームを アニメーション化する場合 2つのLiquid Glassビューが結合して 1つの形状になります Liquid Glassを複数の要素に分割するには まず アニメーションなしで それらを同じ位置に追加します 次に それらを一緒に アニメーション化します
UIGlassContainerEffectの役割は アニメーションの有効化だけではありません 均一な適応を実現できます Liquid Glassはその背景に動的に適応します さらに 一貫した外観も維持されます
Liquid Glassでアップデートされた素材と UIKitコンポーネントについて説明しました UIKitには 新しいデザインに合わせて アプリをアップデートするための ツールが用意されています ここから Xcode 26での アプリ開発を始めましょう 新しいデザインのほとんどは アプリにすぐに取り入れることができます アプリの各画面を確認して どのビューが目立つかを特定します
カスタムコントロールを使用している場合は 標準のUIKitコントロールの 使用を検討します そして最後に Liquid Glassを取り入れて それぞれのユースケースを さらに魅力的にする方法を考えてください
皆さんのアプリで 新しいデザインシステムが どのように活用されるかを 楽しみにしています ありがとうございました
-
-
2:31 - Minimize tab bar on scroll
// Minimize tab bar on scroll tabBarController.tabBarMinimizeBehavior = .onScrollDown -
3:08 - Add a bottom accessory
// Add a bottom accessory let nowPlayingView = NowPlayingView() let accessory = UITabAccessory(contentView: nowPlayingView) tabBarController.bottomAccessory = accessory -
3:35 - Update the accessory with the tabAccessoryEnvironment trait
// Update the accessory with the trait registerForTraitChanges([UITraitTabAccessoryEnvironment.self]) { (view: MiniPlayerView, _) in let isInline = view.traitCollection.tabAccessoryEnvironment == .inline view.updatePlayerAppearance(inline: isInline) } // Automatic trait tracking with updateProperties() override func updateProperties() { super.updateProperties() let isInline = traitCollection.tabAccessoryEnvironment == .inline updatePlayerAppearance(inline: isInline) } -
5:51 - Extend content under the sidebar
// Extend content underneath the sidebar let posterImageView = UIImageView(image: ...) let extensionView = UIBackgroundExtensionView() extensionView.contentView = posterImageView view.addSubview(extensionView) let detailsView = ShowDetailsView() view.addSubview(detailsView) -
6:51 - Adjust the effect layout
// Adjust the effect layout let posterImageView = UIImageView(image: ...) let extensionView = UIBackgroundExtensionView() extensionView.contentView = posterImageView extensionView.automaticallyPlacesContentView = false view.addSubview(extensionView) posterImageView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ posterImageView.topAnchor.constraint(equalTo: extensionView.topAnchor), posterImageView.leadingAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.leadingAnchor), posterImageView.trailingAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.trailingAnchor), posterImageView.bottomAnchor.constraint(equalTo: extensionView.safeAreaLayoutGuide.bottomAnchor), ]) -
8:38 - Custom grouping
// Custom grouping navigationItem.rightBarButtonItems = [ doneButton, flagButton, folderButton, infoButton, .fixedSpace(0), shareButton, selectButton ] -
8:53 - UIBarButtonItem tint color and style
// Tint color and style let flagButton = UIBarButtonItem(image: UIImage(systemName: "flag.fill")) flagButton.tintColor = .systemOrange flagButton.style = .prominent -
9:10 - Toolbar with evenly distributed items in a single background
// Toolbar with evenly distributed items, grouped in a single background. let flexibleSpace = UIBarButtonItem.flexibleSpace() flexibleSpace.hidesSharedBackground = false toolbarItems = [ .init(image: UIImage(systemName: "location")), flexibleSpace, .init(image: UIImage(systemName: "number")), flexibleSpace, .init(image: UIImage(systemName: "camera")), flexibleSpace, .init(image: UIImage(systemName: "trash")), ] -
10:15 - Titles and subtitles
// Titles and subtitles navigationItem.title = "Inbox" navigationItem.subtitle = "49 Unread" -
10:27 - Large subtitle view
// Titles and subtitles navigationItem.title = "Inbox" navigationItem.largeSubtitleView = filterButton -
11:20 - Edge effect for a custom container
// Edge effect’s custom container let interaction = UIScrollEdgeElementContainerInteraction() interaction.scrollView = contentScrollView interaction.edge = .bottom buttonsContainerView.addInteraction(interaction) -
11:48 - Hard edge effect style
// Hard edge effect style scrollView.topEdgeEffect.style = .hard -
13:55 - Morph popover from its source button
// Morph popover from its source button viewController.popoverPresentationController?.sourceItem = barButtonItem -
14:07 - Morph sheet from bar button
// Morph sheet from bar button viewController.preferredTransition = .zoom { _ in folderBarButtonItem } -
14:46 - Source item for action sheets
// Setting source item for action sheets alertController.popoverPresentationController?.sourceItem = barButtonItem -
15:36 - Placing search in the toolbar
// Place search bar in a toolbar toolbarItems = [ navigationItem.searchBarPlacementBarButtonItem, .flexibleSpace(), addButton ] -
16:01 - Universally accessible search on iPad
// Place search at the trailing edge of the navigation bar navigationItem.searchBarPlacementAllowsExternalIntegration = true -
16:47 - Activate the search field when search bar is tapped
// Activate the search field when search bar is tapped searchTab.automaticallyActivatesSearch = true -
17:03 - Search as a dedicated view
// Search as a dedicated view navigationItem.preferredSearchBarPlacement = .integratedCentered -
17:52 - Buttons
// Standard glass button.configuration = .glass() // Prominent glass tintedButton.configuration = .prominentGlass() -
18:16 - Neutral slider with 5 ticks and a neutral value
// Neutral slider with 5 ticks and a neutral value slider.trackConfiguration = .init(allowsTickValuesOnly: true, neutralValue: 0.2, numberOfTicks: 5) -
18:59 - Thumbless slider
// Thumbless slider slider.sliderStyle = .thumbless -
20:28 - Glass for custom views
// Adopting glass for custom views let effectView = UIVisualEffectView() addSubview(effectView) let glassEffect = UIGlassEffect() // Animating setting the effect results in a materialize animation UIView.animate { effectView.effect = glassEffect } -
20:49 - Custom corner configuration
// Custom corner configuration UIView.animate { effectView.cornerConfiguration = .fixed(8) } -
20:54 - Dark mode
// Adapting to dark mode UIView.animate { view.overrideUserInterfaceStyle = .dark } -
21:02 - Adding glass to an existing glass container
// Adding glass to an existing glass container let container = UIVisualEffectView() container.effect = UIGlassEffect() container.contentView.addSubview(effectView) -
21:08 - Container relative corners
// Container relative corners UIView.animate { effectView.cornerConfiguration = .containerRelative() effectView.frame.origin = CGPoint(x: 10, y: 10) } -
21:23 - Container relative corners, animated
// Container relative corners UIView.animate { effectView.frame.origin = CGPoint(x: 30, y: 30) } -
21:30 - Glass adapts based on its size
// Glass adapts based on its size UIView.animate { view.overrideUserInterfaceStyle = .light effectView.bounds.size = CGSize(width: 250, height: 88) } UIView.animate { effectView.bounds.size = CGSize(width: 150, height: 44) } -
21:49 - Adding content to glass views
// Adding content to glass views let label = UILabel() label.text = "WWDC25" label.textColor = .secondaryLabel effectView.contentView.addSubview(label) -
22:15 - Applying tint color to glass
// Applying tint color to glass let glassEffect = UIGlassEffect() glassEffect.tintColor = .systemBlue UIView.animate { effectView.effect = glassEffect label.textColor = .label } -
22:33 - Using custom colors with glass
// Using custom colors with glass let glassEffect = UIGlassEffect() glassEffect.tintColor = UIColor(displayP3Red: r, green: g, blue: b, alpha: 1) UIView.animate { effectView.effect = glassEffect // Animate out the label label.alpha = 0 } -
23:03 - Enabling interactive glass behavior
// Enabling interactive glass behavior let glassEffect = UIGlassEffect() glassEffect.isInteractive = true effectView.effect = glassEffect -
23:20 - Animating glass out using dematerialize animation
// Animating glass out using dematerialize animation UIView.animate { effectView.effect = nil } -
23:52 - Adding glass elements to a container
// Adding glass elements to a container let container = UIGlassContainerEffect() let containerView = UIVisualEffectView(effect: container) let glassEffect = UIGlassEffect() let view1 = UIVisualEffectView(effect: glassEffect) let view2 = UIVisualEffectView(effect: glassEffect) containerEffectView.contentView.addSubview(view1) containerEffectView.contentView.addSubview(view2) -
24:12 - Adjusting the container spacing
// Adjusting the container spacing let containerEffect = UIGlassContainerEffect() containerEffect.spacing = 20 containerEffectView.effect = containerEffect -
24:27 - Merging two glass views
// Merging two glass views UIView.animate { view1.frame = finalFrame view2.frame = finalFrame } -
24:33 - Dividing glass into multiple views
// Dividing glass into multiple views UIView.performWithoutAnimation { for view in finalViews { containerEffectView.contentView.addSubview(view) view.frame = startFrame } } UIView.animate { for view in finalViews { view.frame = finalFrame(for: view) } }
-
-
- 0:00 - Introduction
Learn how you can incorporate the new design language of iOS 26 into your apps. The new design, centered around the dynamic and translucent material called Liquid Glass, automatically updates the appearance of apps recompiled with the latest SDK. This video covers various aspects of the new design, including the updated look and behavior of tab views, split views, navigation bars, toolbars, and more, which now feature Liquid Glass elements. There is also guidance on bringing the Liquid Glass to custom UI elements.
- 1:55 - Tab views and split views
'UITabBarController' and 'UISplitViewController' now have a modern Liquid Glass appearance. Tab bars on iPhone now float above content and can minimize on scroll, enhancing focus. You can customize this behavior and add an accessory view above the tab bar, which animates down when minimized. On iPad, tab bars and sidebars also float in Liquid Glass. Apps adopting 'UITab' and 'UITabGroup' automatically adapt between tab bar and sidebar views. Sidebars look best with vibrant content extending underneath, achieved using the new 'UIBackgroundExtensionView', which creates a seamless visual effect.
- 7:19 - Navigation and toolbars
In iOS 26, navigation and toolbars feature a new glass-like appearance, floating above content with automatic grouping of bar button items into visual groups sharing glass backgrounds. Text buttons, system "Done" and "Close" buttons, and prominent style buttons have separate backgrounds. You can customize button groups, tint colors, and backgrounds. 'UINavigationItem' gives more control over title and large title areas, and also allows to set subtitles. Scroll views underneath navigation bars or toolbars apply an edge effect for legibility.
- 13:31 - Presentations
The design of presentations, menus, popovers, sheets, and action sheets is now updated to enhance visual continuity. Glass buttons morph into overlays for menus and popovers, and sheets now adapt their appearance from smaller to larger heights. Action sheets on both iPhone and iPad are anchored to their source views, appearing directly over them. Remove custom backgrounds from sheets, and specify source views for action sheets and alert controllers to apply the new transitions and behaviors. Inline action sheets on iPhone no longer have a cancel button because tapping anywhere else dismisses them.
- 15:18 - Search
The search experience across iPhone and iPad is enhanced in iOS 26. On iPhone, the search bar now sits in the toolbar, appearing as an expanded field or button based on space. On iPad, search is at the trailing edge of the navigation bar for split views, or as a dedicated tab in a 'UITabBarController', which expands into a search field when tapped. You can also customize search placement in sidebars, tab bars, and navigation bars, and enable automatic search field activation upon tab selection.
- 17:24 - Controls
iOS controls have undergone a subtle redesign, maintaining their familiarity while incorporating new Liquid Glass effects. Sliders have enhanced features such as momentum preservation, stretching, and the option to display tick marks, neutral values, and a thumbless style resembling a progress bar. Two new Liquid Glass appearances are available for buttons. Make sure that your layouts accommodate the updated control sizes.
- 19:15 - Custom elements
UIKit provides APIs for you to bring Liquid Glass to your custom UI. Use Liquid Glass sparingly for the most important elements. Apply the effect to custom views using a 'UIVisualEffectView' and 'UIGlassEffect', and customize shape, appearance, and tint color. You can animate Liquid Glass elements to materialize, dematerialize, and merge seamlessly like water droplets when overlapping. The 'UIGlassContainerEffect' ensures uniform adaptation and consistency across different backgrounds. Interactive elements can scale and bounce upon user interaction, enhancing the experience.
- 25:01 - Next steps
Liquid Glass introduces new UIKit components and materials that you can easily integrate into apps. Build your apps with Xcode 26, audit each screen, and consider replacing custom controls with standard UIKit ones. Leverage Liquid Glass to enhance your app's design while making special use cases stand out.