How to use and ignore the Safe Area in SwiftUI

How to use and ignore the Safe Area in SwiftUI | Bootcamp #17

Рет қаралды 26,738

Күн бұрын

In this video we will review the Apple documentation on how Safe Area Insets work and then explore how to manage them within our iOS application. We will also discuss when to ignore the safe area insets to allow our View to extend to the edges of the screen.
***NOTE: As explained at the end of the video, Apple has deprecated the .edgesIgnoringSafeArea() modifier that I use throughout most of this video. Instead, we should now use the .ignoresSafeArea() modifier. We can still include the "edges" in the parameter if needed, by calling .ignoresSafeArea(edges: ).
Next video: • How to add Buttons to ...
Last video: • LazyVGrid, LazyHGrid, ...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-thinking.com
DISCORD: / discord
GITHUB: github.com/SwiftfulThinking/
SAY THANKS: www.buymeacoffee.com/nicksarno

Пікірлер: 78

@yourbestsail Жыл бұрын

Its looks like the safe area is not working like that anymore. By default now the background ignores the safe area by default....

@Soh965 2 жыл бұрын

This guy wears helmet because he talks about safe areas. The logic is just impeccable. LOVE IT

@SwiftfulThinking 2 жыл бұрын

This guy's a clown! 🤡😂

@tommo0 10 ай бұрын

for those who are lost: in the latest versions of swift/xcode, you should never use .ignoringSafeArea, and this entire video can be skipped in 2023. when you move a frame or stack or view to an edge, it will automatically make the background color "bleed" out into the unsafe areas for you.

@biffbiffson7350 4 ай бұрын

Thank you for posting that!

@wahhmann123 17 күн бұрын

No longer need to use the ZStack trick?

@ConfidentlyRong-jo5yt Ай бұрын

Glad I didn't skip this video! Had no idea the .background modifier was a view! You the best! Button video here I come!

@maxdaelman Жыл бұрын

Just wanna say, I've been following from Bootcamp 1, I am learning a lot and thanks for the amazing videos!

@SwiftfulThinking Жыл бұрын

Good luck Max!

@pierrempolet Ай бұрын

the best teacher that i ever had in my life. thank you very much

@kurtschmucker4229 2 жыл бұрын

The examples in this video were especially good. In particular, showing that you can inadvertently place text behind the iPhone notch was a really great example of what not to do. Thanks.

@pitmanra 3 жыл бұрын

15:19 Good to have the update to ignoresSafeArea() . Thanks.

@nicholasliu2675 2 жыл бұрын

Wonderful! I try a lot of ways to fix the "bug"( I thought apple did not design it well, maybe they made a mistake, I still think so because it is not obviousely easy to use). You use a simple and clear way to fix the problem. Well done! Buddy

@user-ex4fs7kt8q Ай бұрын

You are so kind and thank you for continuing to provide helpful videos even after the iOS14 update.

@paulraggett7837 3 жыл бұрын

Good catch on the change after 14.3. Once again excellent product. Thank you.

@SwiftfulThinking 3 жыл бұрын

Thanks for the comment Paul!

@ataberkkilinctekin188 Жыл бұрын

Maaan, these beginner contents are amazing. Thanks a lot for all of these videos !!!

@CMessineo 5 ай бұрын

Love all the videos so far, but this is the first video that I've come across that seems outdated (even beyond your update at the end). It looks like the 15.x version is smart enough to automatically extend background outside the safe area without needing to add any code. Of course, you could use the .ignoresSafeArea if you wanted your text to appear in those areas.

@redstonerepeater2476 Жыл бұрын

Amazing tutorial, Ngl, made me chuckle at 7:20 when you said "so before we end this video" with 10 minutes left

@sema_f 2 жыл бұрын

Thanks 🙏 for updating this video …i was wondering…

@sireyck 10 ай бұрын

Hi Nick, thanks for the course, really enjoying it so far. Just wanted to add that something must have changed between when you created it and now as your code's background no longer cuts off at the safe area margins. The background is now extending to the edges of the device without having to specify ignore safe area.

@soulmood5893 Жыл бұрын

Best teacher I have seen so far.

@brucknerdevilliers 2 жыл бұрын

Hi Nick - Looks like things have changed. Running Xcode 13.2.1 - Seems like Apple has made things even safer and no need to use .ignoringSafeAreas. In the following code the frame consumes the entire screen in both the Preview and the Simulator, but the other objects are limited to the safe area:

@brucknerdevilliers 2 жыл бұрын

Also works the same with .ignoresSafeArea.

@govindsolanki1295 Жыл бұрын

@@brucknerdevilliers How we can make our background to be in the safe area ?

@user-goldeneunga Жыл бұрын

@@govindsolanki1295 Use ZStack

@JasonEyermann Жыл бұрын

Me too

@davidbejo7367 10 ай бұрын

@@govindsolanki1295 Set ignoresSafeAreaEdges in background to empty array. For example: .background(.red, ignoresSafeAreaEdges: [])

@kode561 3 жыл бұрын

You called me right out at 07:00 As I take breaks and practice between videos I always do that edges and padding and thats the sloppiest part of my code I was literally just doing that before this video and testing different iPhones and had to keep adjusting, this vid is beautiful.

@SwiftfulThinking 3 жыл бұрын

Haha yea, I used to do the same thing too! I'm happy this helped you out.

@kode561 3 жыл бұрын

Swiftful Thinking i havent got to the core data video yet im on vid 32/54 but a video series on firebase and data and networking would be great

@user-ev3dl9zt8s 3 жыл бұрын

Thank you!!!

@dmitrygolovin8066 2 жыл бұрын

Great video Nick! Seems like in Xcode 13, background modifiers ignore safe area by default.

@panosjapan7 11 ай бұрын

How do we solve this problem?

@kamaldeepsinghbhatia1472 9 ай бұрын

@@panosjapan7 we need to pass an empty array for that e.g. `.background(Color.red, ignoresSafeAreaEdges: [])` this will ensure that the color stays within safe area Just wanted to add, I tried it on "Text" so I found that my text is staying within safe area and it's just the color was going beyond. Here's what I'm doing - VStack { Text("Hello, World!") Spacer() } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) .background(Color.red) So, Text is staying within safe area but color is ignoring that

@TeemoChan Жыл бұрын

I'm really enjoying Your videos

@SwiftfulThinking Жыл бұрын

I'm so glad!

@jahongirtursunboyev6470 Жыл бұрын

thanks Nick!

@moku7787 6 ай бұрын

Thank you 🔥

@AADITYAAA 2 жыл бұрын

best teacher out there

@SwiftfulThinking 2 жыл бұрын

lol very generous of you, but thanks

@leneil46 Жыл бұрын

You got skills

@kasunjayasekara3052 3 жыл бұрын

Superb thanks a lot :)

@SwiftfulThinking 3 жыл бұрын

Thank you Kasun!!!

@eldarsadykov 2 жыл бұрын

Thank you!!!!!!!!!!!!!

@Nunny25 3 жыл бұрын

Thanks...

@ZhengCheng 3 жыл бұрын

Thank you~

@vazzhh 8 ай бұрын

super nice. pero por suerte en xcode 15 ya no hace falta poner ignoreSafeArea. igual es muy bueno saber todo esto.

@rotorcraft68 2 жыл бұрын

Can you explain how to do this on macOS Monterey? I got a 2021 MBP 14" with the "notch" and I want to run a simple window app that shows a color and when going full screen it uses the ENTIRE screen, not just the area below the notch. All attempts at using various methods that work on iOS fail on macOS Monterey as the app is always pushed below the notch into a safe area regardless. The reason I want to do this is to check for dead/stuck pixels at the TOP of the display in that menu bar area on a batch of new 2021 Macs. Thanks!

@simranpreetchahal1270 11 ай бұрын

Do you have link to your code used in these videos?

@andrerobillard1082 2 жыл бұрын

My .frame covers the whole screen, not just the safe area. I have the same code as you but yours stays with the safe area. I’m on Xcode 13.3.1. Did something change?

@prettygirl6146 2 жыл бұрын

by default all my views go beyond the safe area. how to prevent this?

@user-yd9xy3rb4x 3 жыл бұрын

Hi guys. The question is kinda odd. But anyway, why did we get the method changed if it brings no new functionality ? I mean I don't mind, I am just wondering.

@wa7a1993 2 жыл бұрын

Hello Nick, Thanks for your videos. I would like to know about any features that are not available on old versions, would that be an issue for users, please?

@SwiftfulThinking 2 жыл бұрын

Hi, I'm not sure your question. What type of feature do you want to know about?

@wa7a1993 2 жыл бұрын

@@SwiftfulThinking I'm talking about any new features or modifiers that come to SwiftUI like .ignoreSafeArea that target a specific Version. Does that affect the user of the app after launching or involve only the developer? I hope my question is straightforward :)

@lamsungfai 2 жыл бұрын

Hi Nick At 10:00 I found that the red colour in VStack cover whole screen including the safe area. Did something change in swift?

@CFthorin 2 жыл бұрын

Same here. I'm guessing that the .background just by default ignores the safe area?

@911lalala Жыл бұрын

Same here

@CFthorin 2 жыл бұрын

For me, when I have the scrollview not ignoring the safe area, the rounded rectangles when scrolled vertically travel outside the safe area. How you keep the scrolled items inside the safe area?

@SwiftfulThinking 2 жыл бұрын

This is usually a good thing lol but you can use .clipped to clip views to their frame

@jean-michelnogaro7471 Жыл бұрын

Bonjour. J'ai remarqué que le background (Color.red) ne respectait pas la safearea. Par contre le texte .. oui. Je pense qu'il s'agit d'un nouveau réglage des dernières versions de xcode .. Hello. I noticed that the background (Color.red) did not respect the safearea. On the other hand the text .. yes. I think this is a new setting of latest versions of xcode..

@kainerda2088 2 жыл бұрын

Something is strange here in both examples (Xcode 13.1).. It seems that .background() by default ignores the safe area when attached to a top-level component. Bug or feature, I'm not sure. The question now would be what is the opposite of .edgesIgnoringSafeArea() / .ignoresSafeArea(). Is there something like ".respectsSafeArea ()"? 🤔

@SwiftfulThinking 2 жыл бұрын

Hi Kai, the background does NOT ignore the safe area by default. If your background layer is ignoring the safe area "by default" then it's probably in a view hierarchy where another modifier is forcing it to ignore the safe area lol. There is nothing like "respect safe area" you just need to manage their hierarchy and different layers of the view.

@TheVidCat 2 жыл бұрын

Same here! Xcode 13.1. Tried both examples and .background ignores the safe areas by default without needing to specify .edgesIgnoringSafeArea(). I would also want to know what is the cause of that.

@raimitis 2 жыл бұрын

Same for me. Xcode 13.4. Regardless what I do in my case whole screen has red background colour.

@dominicklarkin7336 2 жыл бұрын

Same with me. I followed the code he wrote exactly but it just seems to ignore the safe area regardless of if I use the '.edgesIgnoringSafeArea()' or not.

@panosjapan7 11 ай бұрын

@@SwiftfulThinkingH'es right. . I copied your code (at 4:44) and it behaves differently on XCode 13.4

@pitmanra 3 жыл бұрын

Dude! 10:09 there's that Command-/ described as Back Slash again. Your videos are so perfect otherwise.

@SwiftfulThinking 3 жыл бұрын

Haha dude! Idk why I keep doing that. oyy

@offthedeepend762 2 ай бұрын

This guy is so not funny its funny

@SwiftfulThinking 2 ай бұрын

I’m cringing bro

@offthedeepend762 Ай бұрын

Nah man its an entertaining breath of fresh air - appreciate you dude

@knowledgeispower4953 6 ай бұрын

Nice bro

@PaulDabit Ай бұрын

God bless you brother ❤❤❤❤❤❤ Jesus Christ bless you brother ❤

@magedmohmed4403 Жыл бұрын

Thanks again for your hard work , Thank you very much 🤎🤎

@Benbbr 3 жыл бұрын

You blow me away with the simplicity and practicality of your lessons. Kudo's! As 'we' are building our own reference guide, why comment-out code while we can use multiple views/screens in our view struct. Per example a iPhone to go with it, building up the good and bad practice. Can't wait to finish the course. 💪🏽

@SwiftfulThinking 3 жыл бұрын

Thanks for watching! Happy to help.