How to create resizable sheets in SwiftUI | Bootcamp #64
Summary
TLDR在这段视频脚本中,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
📱 iOS 16 新特性:可调整大小的弹出层
iOS 16 引入了一个令人兴奋的新特性,即可以创建可调整大小的弹出层(sheets)。与 iOS 16 之前的版本相比,弹出层不再局限于屏幕顶部,而是可以根据需要调整为任意大小,如半屏或四分之一屏。这个新特性的亮点在于,开发者可以使用现有的弹出层 API,仅需添加一行代码和一个新修饰符(modifier),即可实现这一功能。视频中,Nick 展示了如何通过 Swift UI 实现这一特性,并创建了一个简单的示例,通过一个按钮触发弹出层,并展示了如何使用 `presentation detents` 来控制弹出层的大小。
🔍 自定义弹出层大小与交互
视频的第二部分深入探讨了如何自定义弹出层的大小和交互方式。Nick 介绍了如何使用 `presentation detents` 来设置弹出层的不同大小,包括中等(medium)、大(large)以及自定义的分数值(如 0.5 代表屏幕的一半)。此外,还展示了如何通过编程方式在不同的弹出层状态之间切换,以及如何使用 `interactive dismiss disabled` 修饰符来禁用弹出层的滑动关闭功能,这在某些特定场景下非常有用,比如用户必须完成某些操作才能继续使用应用。
🛠️ Swift UI 开发者的新工具:绑定选择与动态交互
在视频的最后部分,Nick 展示了如何使用 `@State` 变量来绑定和控制弹出层的大小,使得开发者可以创建按钮来在中等和大尺寸的弹出层之间动态切换。此外,还提到了在自定义弹出层大小时需要注意的一些限制,例如只能在 `presentation detents` 修饰符中预定义的尺寸中进行选择。最后,Nick 强调了这一新特性对于 Swift UI 开发者来说是一个巨大的胜利,因为它简化了自定义拖动手势的实现,并且提供了流畅的用户体验。
Mindmap
Keywords
💡iOS 16
💡Sheet
💡Swift UI
💡Presentation Detents
💡API
💡Fraction
💡Drag Indicator
💡Interactive Dismiss
💡Custom Detents
💡Binding
💡Swiftful Thinking
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]
Weitere ähnliche Videos ansehen
How to use Popover modifier in SwiftUI | Bootcamp #69
Adding an App Icon and Launch Screen to SwiftUI | Todo List #7
How to use SafeAreaInsets in SwiftUI | Bootcamp #65
How to use NavigationStack in SwiftUI | Bootcamp #62
How To Make a DOOM CLONE in Unity || E1M7 Basic UI
Create a List of Todo items in SwiftUI | Todo List #1
5.0 / 5 (0 votes)