Backgrounds and Overlays in SwiftUI | Bootcamp #9
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- The .background() and .overlay() modifiers in SwiftUI are extremely powerful and often overlooked. In this video we will learn how to use both modifiers to effectively to create complex views. In iOS applications, it is often best practice to use backgrounds and overlays to put a layers in front or behind each other.
Next video: • VStack, HStack, and ZS...
Last video: • Frames and Alignments ...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...
Underrated channel
Thanks JB! I just started ~2 months ago so I'm new to TH-cam. Thanks for watching!
PSA: in a future (major) iOS version the ".overlay(_:alignment:)" will be deprecated. Same for the background. Use ".overlay(alignment: Alignment, content: () -> View)" instead:
.overlay(alignment: .center) {
Rectangle()
.fill(Color.blue)
.frame(width: 50, height: 50)
}
realy thank u
Wow! You make amazing video. I'll say before Christmas you will have 15,000 sub. all the course I brought on Udemy. And I learn way more here. lol. God bless man!! your are amazing
Haha only 300 so far! Thanks for watching Thedren.
@@SwiftfulThinking and ur at 2 k right now!!! i say 100k by next year
100000000% agree. No iOS course on Udemy even comes close to this. Hope to find Nicks Jetpack Compose cousin one day.
You really nailed this overlay stuff for me. Great, that you also showed how to place the modifiers in separate lines. Very thorough and helpful. Thanks again!
10/10, such a usefull demo, so far I'm really loving this series! Thank you for making it it :)
Love the way you teach a concept in detail! I took your Firebase course on Udemy and it helped me a lot.
Thank you!! I have some even better courses coming soon :)
You are Awesome!! Subbed :)
ABHIJEET!! Thanks for the sub man :)
Thank you for helping me understand overlay!
😎 These are super powerful
You have the gift of teaching. Thanks for these videos!
I didn't know we can design a cool icon like that with just background() and overlay(). Thank you for your great tutorial!
Hi Nick, why are some modifiers called with the . (dot) like .background() and others like LinearGradient() are called using capital letters? What is the rule on how I can remember when to use a dot and when to use capital letters to call a modifier on an element? Another thing I am trying to get my head around is when...say a Circle() is called why the .fill or .fit is applied outside of the parentheses and not immediately in the Circle() parentheses? Kind regards, Robert.
Hi Rob! As for a "rule", honestly, I think you'll just get used it as you keep writing in SwiftUI. However, the real answer is that Swift is a type-safe language and the compiler can infer Types. So if the compiler knows exactly what type you're going to add, you can just use .(dot), however, if it's not 100% sure, we can declare a type. For example, when we add the foreground(__) modifier, the ONLY thing we can add inside is a Color, which is why we can type .red ... however if we look at the background(__) modifier, there are several different Types we can put in there (gradients, colors, other views, etc.), which is why we would need to use background(Color.red) and not background(.red).
Excellent
This youTube channel is so amazing, i found it late in my learning but in the perfect time to reboost me and to push my level to another step. Thank you so much for all of this, it's the first time i want to watch every single video of a channel. It will take time but i will do.
Haha thanks! I will look out for your comments as you progress through the playlists 😅
@@SwiftfulThinking I had trouble understanding this concept. Thank you for the question and the detailed answer.
You do a fabulous job on youtube
Thank you!!! I have a question, how can I zoom up editor area?
Hi, I use CMD and + to zoom in and out of the code (Editor -> Font Size -> Increase)!
Hi Nick, i am trying to learn swiftUI and i have a basic question. @2:02, why are you using background(Color.red) and not background(.red) ?? I guess my biggest pet peeve with SwiftUI is about not understanding when to use '.' dot notation versus when to prefix it. For example, .font(.title) works but background(.red) throws an error. Can you please explain the difference and when to use what format ?
This is specific to each modifier. This is because .font can only ever have a Font type, so it is implied that we use .title to mean Font.title. However, a .background can have different types (you could use a color or a ZStack or many other things), so we need to specifically tell the compiler we mean to use Color type .red
For some odd reason a couple of options don’t show up for instance the color option to choose gradients doesn’t pop up in the drop down menu and the .background(View) has a compilation error that’s saying “Type ‘View.Protocol’ cannot conform to ‘View’ “
Each video is so helpful!! Thank you!
color literal is deprecared
Thank you for helping out . I am learning a lot this way even though there is no completed app at the end. These are important topics that you cover in these tutorials. I do have one question that caused me to stumble a little. I have Xcode 14 beta installed on my MacBook Pro and I cannot find color Literal to add the color image in the tutorial like you do. Am I missing something?
yeah i cannot find color literal as well. what is the replacement for this?
@@jordandriebe It is no longer available.
hello hello. when you use Color Literal in this xCode version. what is the name in Xcode version 15. I cant find
Hi! you have to add this line of code --> let myColor = Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255)) or var myColor = Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255)) (it's the same thing! Not sure why they removed it or why it works with that line as i am a beginner. Then you have to call your variable in your fill modifier or color modifier shape or icon or anything, just write (Color(myColor)).
Hope this was helpful
can't find color Litreal I use Xcod 14 would u help pleas?
Someone gave a comment few clips back as to how to use it in 14.
Go to menu bar and choose to Edit, then Show Color. Then choose a color you want, and drag the the color to inside the parenthesis of Color( ).
sup bro..❣
what if I want to have a fully transparent hole in the middle of my view, taking into account I have numerous layers?
Travail énorme !! Merci 😍
How are you getting the same gradient colors filled in without typing it? Like when you type in Linear Gradient, it auto-filled what you first type out and not the default.
Thank you for making these videos. I really enjoy them. Would you mind going a little deeper into Geometry Reader? I know you have a video on it but I’m am look for more advanced use of geometry reader. Thank you!
Very Cool!
Nice tutorial, but i am wonder how to pass image overlays to another view with binding or state? because when I overlay image, the result does not with overlays.
scary coding things... you make it really easier
Nice video and nice explanation. Thanks so much
4:37
Backgrounds and overlays , Thank you
Amazing.! Thanks again
Thank you too!
Loving this, love the intro music too lol
How to use #colorLiteral in code 14
Now that was a fun video!
since color literal isn't a thing anymore, what replaced it?
I have the same issue. Looks like color Literal has been problematic in Xcode for quite a while. It works in some versions but not in Xcode 14.2.
If you bring up the Inspector (top right hand corner of Xcode window) and click on the parent Circle() you can play with the Shadow custom color - but its not very friendly
Great video! Many thanks for this bootcamp!
Glad you enjoyed it Eric!
Thank you very much!
Thanks for men
THANKS
Thanks
Hai i;m trying to do this but for some reason the rectangles stays in place is there a bug here please help
same
I had the same problem but i found my mistake. The alignment need to be apply to the overlay an not to the frame so we need to write:
.overlay(Rectangle()
.fill(Color.blue)
.frame(width: 50, height: 50), alignment: .topLeading
)
and not:
.overlay(Rectangle()
.fill(Color.blue)
.frame(width: 50, height: 50, alignment: .topLeading)
)