How to create resizable sheets in SwiftUI | Bootcamp #64

Summary

在这段视频脚本中，Nick 介绍了 iOS 16 中新增的一个功能——可调节大小的弹出层（sheet）。在 iOS 16 之前，弹出层的大小是固定的，只能覆盖屏幕的一部分。但 iOS 16 引入了新的 API，允许开发者创建可调节大小的弹出层，这意味着弹出层可以是半屏、四分之一屏或任何自定义大小。Nick 展示了如何通过简单地添加一行代码，使用现有的弹出层 API 来实现这一功能。他创建了一个名为 'resizableSheetBootCamp' 的 SwiftUI 视图，并演示了如何通过设置不同的 'presentation detents' 来控制弹出层的大小。此外，还介绍了如何通过编程方式在不同的弹出层大小之间切换，以及如何禁用交互式解散，以创建一个用户无法通过下拉关闭的弹出层。这个新功能为 Swift UI 开发者提供了更多自定义界面的可能性，使得 UI 设计更加灵活和丰富。

Takeaways

• 📱 iOS 16 新增了可调整大小的sheet功能，允许开发者创建不同尺寸的sheet。
• 🔄 与iOS 16之前的sheet相比，新功能不会全屏覆盖，而是可以根据需要调整大小。
• 💡 API与现有的sheet API完全兼容，开发者只需添加一行代码即可实现自定义尺寸的sheet。
• 📈 通过`presentation: detents`，开发者可以指定sheet的大小，如中等（medium）或大（large）。
• 🔗 可以使用`@State`变量来绑定和控制sheet的尺寸，实现程序化地在不同尺寸间切换。
• 🚫 新增的`interactiveDismissDisabled`修饰符可以禁用sheet的滑动关闭功能，适用于需要强制用户完成某些操作的场景。
• 🔽 用户仍然可以通过向下滑动来关闭sheet，这是Swift UI中sheet的一个通用特性。
• 🎨 可以使用分数（fraction）和高度（height）来创建自定义尺寸的sheet，以适应不同的设计需求。
• 📐 推荐使用分数而非固定高度，因为分数可以更好地适应不同尺寸的屏幕。
• 🧩 可以在同一个`presentation: detents`中组合多种尺寸，提供更丰富的交互体验。
• ⚙️ 需要注意的是，只能设置在`presentation: detents`修饰符中定义的尺寸，否则会导致错误。

Q & A

iOS 16 中新增的可调整大小的sheet功能是什么？

iOS 16 新增的可调整大小的sheet功能允许开发者创建可以调整大小的界面元素，这些元素可以是半屏、四分之一屏或者任何自定义大小。这个功能与现有的sheet API完全兼容，开发者只需在现有代码中添加一个新的modifier即可实现。

如何使用Swift UI在iOS 16中创建一个可调整大小的sheet？

在Swift UI中，你可以通过给`sheet`添加一个`presentation: detents` modifier来创建一个可调整大小的sheet。这个modifier接受一个包含不同大小的集合，例如`.medium`和`.large`，或者自定义的尺寸如分数或固定高度。

在iOS 16之前，sheet的界面元素是如何的？

在iOS 16之前，sheet的界面元素通常是全屏的，它覆盖了整个屏幕，没有提供半屏或四分之一屏等中间尺寸的选择。

如何使用Swift UI实现一个始终显示在屏幕上的sheet？

通过给sheet添加`interactive dismissal disabled` modifier，可以创建一个始终显示在屏幕上的sheet，用户无法通过拖动来关闭它。这适用于需要用户完成某些操作（如支付）才能继续使用应用的场景。

如何自定义sheet的大小？

可以通过设置`presentation: detents` modifier中的不同detents来自定义sheet的大小。可以使用预设的如`.medium`和`.large`，或者使用自定义的分数（如`0.5`代表屏幕的一半）和固定像素高度（如`200`像素）。

如何通过编程方式在不同的sheet大小之间切换？

可以通过创建一个绑定到`presentation detents`的变量，并在需要的时候更新这个变量的值来在不同的sheet大小之间切换。例如，可以创建两个按钮，一个设置为`.medium`，另一个设置为`.large`，通过点击这些按钮来改变sheet的大小。

为什么在尝试添加一个不在`presentation detents` modifier中定义的detent时会出错？

如果尝试添加一个不在`presentation detents` modifier中定义的detent，程序会报错，因为Swift UI只允许设置在modifier中已经定义的detents。因此，如果计划在代码中动态设置detents，需要确保这些detents已经在modifier中声明。

如何隐藏sheet的拖动指示器？

可以通过设置`presentation drag indicator`为`hidden`来隐藏sheet的拖动指示器。这在自定义拖动指示器或者不希望显示拖动指示器的情况下很有用。

用户如何与可调整大小的sheet进行交互？

用户可以通过拖动来调整sheet的大小，或者通过swipe down来关闭sheet。此外，开发者可以提供按钮或其他UI元素，允许用户通过点击来改变sheet的大小。

为什么说iOS 16中的这个新API对Swift UI开发者来说是一个巨大的胜利？

这个新API允许开发者以极少的代码更改实现复杂的、可自定义的界面元素，如可调整大小的sheet，而无需从头开始构建自定义的拖动手势，这大大简化了开发工作并提高了开发效率。

在iOS 16中，如何实现一个初始状态为特定大小的sheet，并允许用户进一步调整其大小？

可以在创建sheet时设置一个初始的`presentation detent`，然后通过`presentation: detents` modifier提供一系列用户可以拖动到的大小。用户可以通过拖动来调整sheet的大小，或者使用提供的UI元素来切换到预设的大小。

Outlines

00:00

📱 iOS 16 新特性：可调整大小的弹出层

iOS 16 引入了一个令人兴奋的新特性，即可以创建可调整大小的弹出层（sheets）。与 iOS 16 之前的版本相比，弹出层不再局限于屏幕顶部，而是可以根据需要调整为任意大小，如半屏或四分之一屏。这个新特性的亮点在于，开发者可以使用现有的弹出层 API，仅需添加一行代码和一个新修饰符（modifier），即可实现这一功能。视频中，Nick 展示了如何通过 Swift UI 实现这一特性，并创建了一个简单的示例，通过一个按钮触发弹出层，并展示了如何使用 `presentation detents` 来控制弹出层的大小。

05:01

🔍 自定义弹出层大小与交互

视频的第二部分深入探讨了如何自定义弹出层的大小和交互方式。Nick 介绍了如何使用 `presentation detents` 来设置弹出层的不同大小，包括中等（medium）、大（large）以及自定义的分数值（如 0.5 代表屏幕的一半）。此外，还展示了如何通过编程方式在不同的弹出层状态之间切换，以及如何使用 `interactive dismiss disabled` 修饰符来禁用弹出层的滑动关闭功能，这在某些特定场景下非常有用，比如用户必须完成某些操作才能继续使用应用。

10:02

🛠️ Swift UI 开发者的新工具：绑定选择与动态交互

在视频的最后部分，Nick 展示了如何使用 `@State` 变量来绑定和控制弹出层的大小，使得开发者可以创建按钮来在中等和大尺寸的弹出层之间动态切换。此外，还提到了在自定义弹出层大小时需要注意的一些限制，例如只能在 `presentation detents` 修饰符中预定义的尺寸中进行选择。最后，Nick 强调了这一新特性对于 Swift UI 开发者来说是一个巨大的胜利，因为它简化了自定义拖动手势的实现，并且提供了流畅的用户体验。

Keywords

💡iOS 16

iOS 16是苹果公司最新发布的移动操作系统版本。在视频中，它被提及为引入了可调节大小的sheet（视图）功能，这是iOS 16中一个重要的更新，允许开发者创建不同大小的视图，从而提供更丰富的用户界面体验。

💡Sheet

Sheet是Swift UI中的一个组件，用于在屏幕上显示模态内容。在iOS 16之前，sheet的大小是固定的，不能调整。视频中提到，iOS 16的新特性允许开发者通过编程方式改变sheet的大小，从而提供更灵活的界面设计。

💡Swift UI

Swift UI是苹果公司推出的一种用于iOS、iPadOS、macOS、watchOS和tvOS应用程序的UI工具包。它允许开发者使用Swift语言创建用户界面。视频中，Swift UI被用来展示如何利用iOS 16的新特性创建可调节大小的sheet。

💡Presentation Detents

Presentation Detents是iOS 16中新引入的一个概念，用于定义sheet可以呈现的不同大小。在视频中，通过设置presentation detents，开发者可以指定sheet在不同状态下的大小，如中等、大或自定义的百分比大小。

💡API

API（应用程序编程接口）是一套预先定义的函数，允许不同的软件应用程序之间进行交互。视频中提到，iOS 16的API与现有的sheet API兼容，这意味着开发者可以使用现有的代码，仅需添加少量代码即可实现新的功能。

💡Fraction

在视频中，fraction用于表示sheet大小占屏幕比例的一个数值。例如，0.5表示sheet将占据屏幕的一半。这是创建自定义大小sheet的一种方式，允许开发者根据需要灵活地调整界面元素。

💡Drag Indicator

Drag Indicator是用户界面中的一个视觉元素，用来指示用户可以通过拖动来调整界面元素的大小或位置。在视频中，提到可以通过设置来隐藏或显示drag indicator，这取决于是否希望用户能够通过拖动来调整sheet的大小。

💡Interactive Dismiss

Interactive Dismiss是指用户可以通过交云操作来关闭或解散某个界面元素的功能。在iOS 16中，新的modifier允许开发者禁用这个功能，使得sheet不能通过向下拖动来解散，这在某些特定的应用场景下非常有用，比如支付墙或免费试用结束时。

💡Custom Detents

Custom Detents允许开发者为sheet定义自定义的大小。在视频中，除了使用预设的如medium和large，开发者还可以通过fraction和height来创建任意大小的sheet，从而提供更加个性化和多样化的用户体验。

💡Binding

Binding是Swift UI中的一个特性，它允许将UI元素的状态与数据源关联起来，以便在数据变化时自动更新UI。在视频中，通过binding来动态改变sheet的presentation detents，从而在不同的视图或按钮点击事件中调整sheet的大小。

💡Swiftful Thinking

Swiftful Thinking是视频中提到的频道或品牌名称，由Nick主持，专注于Swift UI和iOS开发的教学。视频中通过Swiftful Thinking介绍了iOS 16中sheet的新特性，展示了如何利用这些特性来提升应用程序的用户体验。

Highlights

iOS 16 引入了可调整大小的sheets功能，这是iOS 16中最受欢迎的新特性之一。

在iOS 16之前，sheets只能弹出到屏幕顶部，不能全屏覆盖。

iOS 16的新modifiers允许开发者自定义sheets的大小，如半屏或四分之一屏。

API与现有的sheets API完全兼容，只需添加一行代码即可实现自定义sheets。

许多应用程序开始采用这种新的sheets设计，如半屏模态框。

通过Swift UI，开发者可以用一行代码实现这些新的sheets功能。

创建一个名为'resizableSheetBootCamp'的新Swift UI视图文件。

使用@State属性控制sheets的显示，初始值为false。

通过添加presentation modifier来控制sheets的大小。

使用detents来定义sheets的大小，如large和medium。

可以拖动sheets在不同的detents之间切换，提供流畅的用户体验。

可以使用presentation drag indicator隐藏或显示拖动指示器。

sheets支持向下滑动以解散，但新modifier可以禁用交互式解散。

可以完全自定义sheets的detents，包括使用fraction和height。

fraction允许根据屏幕的百分比来设置sheets的大小。

height允许根据像素值来设置sheets的大小。

可以组合使用不同的detents，如fraction、height和预设的medium或large。

可以使用编程方式在不同的detents之间切换，增加交互性。

需要注意的是，只能设置在presentation detents modifier中定义的detents。

modifiers可以放置在destination view的任何部分，以实现更清洁的布局。

iOS 16的sheets功能为Swift UI开发者提供了巨大的便利，使得自定义UI变得更加容易。

Transcripts

all right guys this is probably my

favorite thing to come out of iOS 16. if

you're not using this yet you should

probably restart uh iOS 16 gives us the

ability to create sheets that are

resizable so prior to iOS 16 we

basically had one sheet that could pop

up and if you ever use that sheet

modifier you would see that it goes

basically to the top of the screen it's

not a full screen cover so it doesn't

cover the entire screen but it goes

basically to the top like right to the

safe area at the top of the screen

however now that we have these iOS 16

modifiers we can actually change the

size of that sheet so we can do like a

half screen sheet a quarter screen sheet

basically literally any size that we

want we can now do and my favorite part

of the feature is that literally the API

works perfectly with the existing sheet

API so we can use our existing code and

literally just add one new line of code

one new modifier and all of a sudden we

have this magic customizable sheet it's

really awesome to use I've definitely

seen a lot of apps these days starting

to shift more towards this so if you use

an app where like a sheet comes up about

halfway that's exactly what we're

talking about and now we can do it in

Swift UI with literally one line of code

[Music]

welcome back everybody my name is Nick

this is swiftful thinking in this video

we're going to cover the resizable sheet

I think this is my favorite thing to

come out of iOS 16. thank you Apple for

releasing this API let's take a look at

it we're going to right click the

Navigator create a new file it is a

swift UI View and let's call this

resizable

cheat boot camp

click create let's jump in here get the

canvas working

and we are going to start with a very

simple screen in this one a quick button

with a title says click me of course and

we're gonna up here create an at State

private VAR show sheet of type Bool set

it equal to false

in here we're going to call

showsheet.toggle we're going to add a

very simple sheet with is presented

is presented bind to that Boolean and

then adds some content and I'm just

going to come down here and create a

struct called my next View

which will be a view a review needs a

body I'm just going to put a quick maybe

a text here that says hello world

uh the destination will be my next View

and this should not be something that is

new to you guys I've covered sheets in

this playlist I think we used it in a

bunch of videos already did literally an

entire where is it

sheet boot camp we did a whole sheets

bootcamp looked at full screen cover and

sheet but up until iOS 16 the sheet only

only allowed us to do this one sheet so

we can see here that the sheet goes up I

would say probably about you know 90

percent of the way to the screen the

full screen cover goes all the way to

the top but there was no way to do a

sheet that's like half screen or like

quarter screen or something like that

iOS 16 though allows us to do these

custom basically any size sheet we want

not just this full screen sheet and the

really cool feature about this is that

it is 100 compatible with this existing

modifier so in my app if I already have

this modifier of sheet I don't need to

change that at all all I need to do is

just add an extra modifier onto the

destination view here

so what I'm going to do is call on this

I'm just going to add a DOT presentation

detents

detents are basically the sizes of the

sheet that we want it to go to there's

two completions here I'm going to start

with this basic one and it looks like

it's a set of presentation detent if now

if you're just learning Swift in this

boot camp you probably are not that

familiar with the set a set is basically

the same thing as an array except all

the items are unique you can't have two

of the same items in a set whereas an

array you could have two of the same

item and so here we're just going to

create what looks like an array it's

really a set and then inside this

detents we need to tell it what sizes do

we want this sheet to be able to resize

to

so we don't put any it's the default

Behavior we can see it goes all the way

up to here I'm gonna actually just make

this screen have a background color

let's do color dot red

just so we can see this a little bit

better

so we can see the screen goes you know

all the way up the full size of a screen

so what is this this detent is actually

called dot large so if I add in large

here it allows me to go to this large

state

but if I wanted to go maybe halfway I

could actually add in medium

so a medium state allows it to literally

go halfway which is this is like a very

ideal use case in a lot of apps I think

there's more and more we're starting to

see these like half screen half modals

and now we can do it out of the box in

Swift UI with a medium detent

something that's really cool about this

is that this is an array or a set so we

can actually add multiple in here so if

I add in both of these I can actually

then drag the sheet between these two

detents which is really convenient so

again if I take out the large I can't

actually drag it up to that large state

so we have total control over where can

the user or can't the user drag it to

when we add multiple of these you do see

that little tab drag indicator that

appears here so we have the option of

calling presentation drag indicator

hidden so if we want to hide it now so

generally I would say if you are

allowing the user to drag it you should

show the drag indicator unless you're

building like maybe you want to draw

your own drag indicator that looks a

little bit better obviously you can do

that as well

one thing that is pretty cool on sheets

in general is that the user can swipe

them down to dismiss right so even with

the old sheet you'll be able to swipe it

down and it goes away

but we have this new modifier that

actually allows us to interactive

dismiss disabled which allows us to show

a sheet and then the user is not allowed

to actually drag it down

and if you've never seen this before you

might be thinking like why on Earth

would I ever want to do that well you

could imagine an app where maybe like

the

maybe the paywall or like the free trial

screen appears and the user is not

allowed to get back into your app until

they complete some action or do a

payment and so this is a perfect use

case where we can show a sheet and

literally have it like stuck on the

screen

I think like this would be a major tease

if you had like your actual app running

back here and then you did something to

trigger the sheet and then put this

interactive dismiss disabled so now the

user is like this close into your app

but they actually can't do anything

because the sheet is showing and they

can't dismiss it until they make a

purchase that would be like

the biggest tease you could possibly

have in your app

definitely a lot of use cases for this

even if you're not thinking of them

right now

before we wrap up let's look at a couple

more custom detents so of course we have

the medium we have the large but we can

also just totally customize our own

detents to any size that we want

I'm just going to do it on another line

here let's just do a DOT presentation

detents and this time I'm going to look

for there's a fraction and a height

so a fraction is basically like a

percentage of the screen I don't know if

it's exactly a percentage of the screen

but it's more or less the same so for

example if I do 0.5 that would be about

50 of the screen very similar to a

medium not exactly the same I could do

maybe 0.75 now we're up here I'm gonna

do 0.9 getting close to the top I can do

0.1 down towards the bottom so this

might be like a really cool you know if

you want to just show a little something

at the bottom and then maybe have the

user able to like drag this up

you could have a fraction of 0.1 and

then also have maybe a DOT medium and a

large right so we could do something

like on a pure right where we

automatically

trigger the show sheet equals true

so your app starts with his little sheet

popped out here and then the user can

then like drag it a little bit bigger

drag it a little bit bigger and also

close it down or something like that we

get really customizable with some of

this we can also do as I was saying

before the presentation detents of a DOT

height height is how many pixels do we

want it to be so we could do 200 pixels

that's about 200 right there we could do

800 pixels do 500 pixels generally I

would say I would use the fraction in

the medium large more than the height

because the height you need to really

understand

the different screen sizes right some

some devices have less height than

others and you wouldn't want to make

your sheet larger than like the screen

device or something like that so a

fraction is probably safer although like

a certain UI if you have a specific

element that's 300 pixels High then

maybe the height makes more sense

we can also obviously combine a bunch of

these together so I could put this

inside here and now we're using all of

these in one same detent here we have

like the the fraction of ten percent the

height of about 300 the medium and then

the large

so really cool it's a really cool really

smooth interaction here like if you were

to build your own drag gesture on a

screen it would take a lot of work to

get to be this smooth so this is a huge

win for Swift UI Developers

and the last thing I want to show you

guys is that other completion here with

the dot presentation detents where we

can basically bind to a selection

so up here I'm going to put a at State

private VAR let's call this detents

of type

and it looks like we need a presentation

detent so presentation detent

and we'll set it equal to dot large to

start yeah we'll start with the large

detent

and for the detents let's just go back

to medium and large

and so before the user could drag

between medium and large now they can do

that and we can also programmatically

shift between medium and large

so here I have click me and we have

Hello World maybe there's like a button

on a screen that allows us to switch

between the medium and the large so what

I'm going to do is actually let's see

let's take the detent and let's make a

binding

VAR let's call this detents of type

presentation detent

will bind to it on our second screen

and now I just want to update these

detents from the secondary screen so I'm

just going to create in here like a

v-stack

maybe some spacing of 20. let's get rid

of this and let's add in a button

let's make this one the medium button

and we'll set the detents equal to

medium

and let's just copy that we'll do a

large button most of the detent is equal

to large

so now I'm going to click me and now we

can programmatically go to a medium I

can go to the medium State I can go to

the large State I am noticing there's

like a little bit of a like a glitch

here when I shift down to the medium I

am not exactly sure how to fix that at

this time I'm sure that's not supposed

to be happening

so a couple things I want to note

quickly is that in here we in theory

could add any detent so we can add in

maybe the fraction of 0.5 to these

detents but when I click it and I go to

medium it's not going to work so it kind

of just broke and the reason it broke is

because we're only allowed to set

detents that we have set in our

presentation detents modifier

so it's something to be very careful of

right like if we are going to add in

this fraction here we should also make

sure it's included in our array when we

set up the modifiers click this

and now it's working

also these these modifiers they

basically can be on any part of this

destination view so I can also take

these I'll just copy them and put them

down on this view if like that's a

little bit cleaner for you you're

welcome to do that as well before we

wrap up let's just add in maybe two more

here I'm going to do a this will be that

Medium

this will be let's say maybe 20 percent

fraction is 0.2

and let's just do one more of maybe

let's say 600 pixels

and that will be of height 600.

and again to make sure that these all

work we need to make sure all of these

cases are inside are right here so we

have 0.2 medium we have height of 600

and we have large

there we go 20 medium 600 large awesome

all right I I would argue this is the

coolest thing to come out of iOS 16. let

me know in the comments what you think

of it I think there's like a lot of

really cool UI that we can start doing

especially with just like the medium

detent I think it's cool that we can

make our own custom bindings so if you

use like I think like Lyft and Airbnb

they have a lot of UI that kind of looks

in this realm personally I think like

the best part of it for me is purely the

medium detent like if we can just do a

sheet with just the medium detent

especially if we can lock it that really

opens us up to very easily putting some

of these these modal sheets on the

screen

prior to iOS 16 if we want to do this UI

we had to build it totally custom and

that was a pain so thank you Apple for

another awesome API in iOS 16.

thank you guys for watching as always

I'm Nick this is swifflethinking and

I'll see you in the next video

[Music]