SwiftUI List with Custom Cell & Passing Data
Вставка
- Опубліковано 15 лип 2024
- Head to squarespace.com/seanallen to save 10% off your first purchase of a website or domain using code SEANALLEN.
In today's video I show you how to create a List with a custom cell in SwiftUI. We also create a NavigationView that allows us to navigate to a detail view while passing data. You will learn how to create a link button that navigates to safari as well as some basic refactoring. This tutorial was created in Xcode 12.4 and Swift 5.3.
Download Starter Project:
www.dropbox.com/sh/4574sr0ecb...
SF Symbols Video:
• What's New in SFSymbol...
If you like my teaching or presentation style, I've started creating my own courses:
seanallen.teachable.com/
Timestamps
What Are We Building? - 0:00
Starter Project - 0:30
Custom Cell - 2:20
List & NavigationView - 9:20
Adding The Data - 11:20
Video Detail View - 17:32
NavigationLink - 29:28
Refactor - 32:06
Twitter:
/ seanallen_dev
Link to my book - How I Became an iOS Developer:
gumroad.com/l/sean-allen-origin
Hired.com:
hired.com/x/1n01g
Check out my podcast, iOS Dev Discussions:
itunes.apple.com/us/podcast/i...
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Ray Wenderlich Books:
store.raywenderlich.com/a/208...
Ray Wenderlich Videos:
store.raywenderlich.com/a/208...
Paul Hudson's Hacking With Swift:
gumroad.com/a/762098803
Learn Advanced Swift Here:
gumroad.com/a/656585843
Links to my iOS Dev Setup & iOS Dev Book Recommendations
www.amazon.com/shop/seanallen
#swift #softwaredeveloper #iosdeveloper - Наука та технологія
If you enjoy my teaching/presentation style, I've started creating my own iOS developer courses at seanallen.teachable.com. You can watch the first ~10% of each one for free to get a feel for them.
These swiftUI tutorials are FIRE ☄️
Glad you enjoy them, Noam!
@@seanallen i enjoy them more tho..
Another commenter posted "Don't know if this is only my problem, but I needed to add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. Otherwise, it looks a bit messy."
I had the same issue and the above fixed it for me. So verified :)
had exact same issues, really helped thanks
@9:40 if your version doesn't have the Text views to the right of the Image view, then wrap the Image view and VStack in an HStack. Seems Sean is using a different version, I'm on Xcode 13 Beta 5 and the Text views were below the Image view. Wrapping them in an HStack, solved the problem. Seems the older version had an implied HStack.
I came looking for this exact comment! You're a legend!
I notice that this version of Xcode/iOS 15 aren't pushing the lists to the edge of the screen anymore. Is there any way to correct this and make it full width?
As always, great content Sean! You have definitely been one of about 5-6 UA-camrs that have helped me become a "real developer" in Swift. Still lots to learn, but starting to realize that I know so much more than I did when I started last July. But I love your teaching style so much that I will definitely be a customer for your new course coming out next week!
One tip..when you are extracting that Subview you can rename it right there rather than going back and doing so. It's easy to forget...I do it all the time...but easy to see someone else doing it LOL! (I know you are focused on delivering the best explanation while recording! I don't have that excuse...)
As always, so good Sean. I often come back to your videos and rewatch them before building out a particular feature. Super clear and concise with some great tips. Much better than wading through my own ill written notes on the subject ;-) Thank you!
Thanks for the kind words, Robin. I always recommend repeat viewing of content. At least in my experience, going through a tutorial, blog post, or video only once isn't quite enough for the concepts to sink in. I usually have to go through the content, try to implement it myself, then rewatch the content for it to really sink in.
Besides being a tutorial it is really helpful to choose topics that can adapt to your own application, thank you very much.
You are just so good. I was just wondering at 21:00 how you remember all these different modifiers and you literally just answered the question. Good to hear there isn’t any real magic to it other than experience.
Without doubt, the best Swift tutorial!! Congrats!
You made it so easy sean! Thank you so much for your content. 🎉
You've got me. Now I have to watch all of your vids :)
Enjoy 😀
Thank you , Sean. Really nice presentation for a beginner SwiftUI coder. Great help.
Always excited to see your videos, Sean!
Glad you like them!
Already said this in other video but again, you are the master of iOS programming Sean. Thanks for the tutorial!
Thanks for the kind words, Martin.
You are so gifted Sean! what a blessing to watch your content!
Wow, thank you!
Great clean presentation again, Sean! Good stuff!
Glad you liked it, Gee!
Thanks for making these AMAZING SwiftUI tutorials. It's really easy to understand and just open Xcode and follow you and increase my skills.
Happy to hear you enjoy them, Ernest. More on the way!
Thanks Sean, very helpful. By the way moving a block or line, you can also use cmd-option [ or ] for up and down.
I like your style of teaching! It is great!
Happy to hear that, Krastyo!
Great video! Thank you for this detailed explanation. I am always looking forward for your videos.
Glad you enjoy them, Christos!
WoW, can't believe SwiftUI can build this so easily. Thanks for the tutorial, learn so much from it.👍🏻
Happy to hep, Karho 👍
I really like the way you refactor your code. It looks really tidy. thank you for the tutorial.
Thanks for the compliment Michael. Code readability and organization is a big deal to me. Happy you noticed!
This is the first time watching your tutorials - after watching few minutes and how you explain everything - subscribed your channel immediately.
Glad you enjoy my teaching style, Rahman!
This is easily the best video I've found discussing SwiftUI data passing...THANK YOU
Wow, thank you. Glad you enjoyed it.
Brilliant video Sean. SwiftUI is much easier than Storyboard and UIKit. Big thumbs up 👍
Man, this was a GREAT tutorial and I appreciate it. Would love to see one to create an sign-able invoice.
Wow! This tutorial is super easy! Thanx a lot!
Seriously bro your tutorial force me to subscribe. You explained every single line step by step.
Love you content.
Want to see more.
Thank you ;)
Happy to hear you appreciate my teaching style and I appreciate the subscribe 👍
This is one of the best SwiftUI walk-throughs I’ve ever seen. This was so so so helpful.
If possible, could you do a follow up video discussing an API data binding?? Like through Airtable?
Highly relevant. Well paced. Keep I up!
Amazing content, learned multiple concepts all in one video.
Really enjoyed it followed the entire tutorial and worked awesome thank you again for your great content
Glad to hear you enjoyed it, Kemley.
your videos are amazing! I'm a beginner and learning quickly thanks to your content! Thank you!
Happy to hear that!
Nice Explanation, Clear understand Thanks Sean Allen
Thanks for the tutorial. This was super helpful
Appreciate your videos brotha 🤙
This is just what I’ve been looking for, code worked great, however I needed to add in a HStack below the list otherwise it would just create two list entries per item
thanks for posting this..i was wondering why mine looked different.
Nice and neat Sean. Thanks man.
Very helpful video, thanks!
Thank you so much. You explain perfectly. Definitely love your manner 😊
Glad you appreciate my teaching style!
Wonderful clear explanation. Never knew about Link. Very easy to follow your videos.
Glad you enjoy them, Judy 😀. Link was just added in iOS 14.
Thankyou Sean, It was very detailed explanation.
Don't know if this is only my problem, but I needed to add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. Otherwise, it looks a bit messy.
In 32:50 he puts all in HStack
This helped me. thank you
“That can lead to clever & confusing code. You still want it to be readable” yes. Thank you!
Very informative, educational, learning by your learning skills, way is outstanding, explaination is nowhere to find, thanks, please keep it up with progress, all best!
Thanks for the kind words, Ibrahim. Glad you enjoyed it!
Great job. Thanks!
love this content! thanks!
always so helpful. Thank you
Definitely earned my sub. Awesome video man.
Happy to help, Nate.
Thank you for this awesome work!
Glad you enjoyed it 👍
Great video - thanks a lot Sean! Perfect timing, just been tasked with creating a Widget for our app w/ WidgetKit and that's all in SwiftUI, shall include a little List in it too! Cheers:D
Nice. I have some widget videos on my to-do list. I'm waiting till after WWDC to see if they introduce anything new to widgets.
@@seanallen Awesome - shall keep a close eye out for those then!
Coming from an Android world, I loved this tutorial!
Thanks a lot, was able to modify this project and use it for my school project :)
happy to help, Seungwan!
Omg this is the best tutorial rly, thanks!
Glad it helped!
I really really like your video.
Thanks for the tutorial, really useful.
Happy to help!
Thanks for this Sean
No problem, Melven. More to come!
What a beneficial video, thanks Sean!
Glad you enjoyed it!
I finally learned coding because of you, THANK YOU!!🎉
That's awesome! Happy to hear that and best of luck on your coding journey, Johannes 🚀
Thank you!!😁
Awesome tutorial! Well done
Thanks, Pose!
Bro, When I'm watching your videos, it makes me feel you're like a neighbor next door where I want to go and spend time and start my first startup with...
Hi Sean, just starting out with SwiftUI and I find your videos EXTREMELY helpful! Thanks very much for this!
One question: How do I add a color to my data? I'd like to include a custom color to each item on my list.
Edit: Nevermind, figured it out :)
Great explanation 👏
Thanks Vamsi!
This convinced me. I'm going to get your teachable courses.
Happy to answer any questions about the courses if you have any. Hope you enjoy 🚀
@@seanallen None right now but I appreciate it. Wanted to let you know the skills I learn in that will immediately go into an app that will be dispatching emergency service vehicles to assignments (Ambulances & Helicopters). I run a company that builds dispatching software (mostly written in rust) and this is intended to be the Mobile Data Terminal front end for that.
Awesome. Would love to check out the finished product when the time comes.
Love your vids
Thanks Sam 😀
Who else gets excited for the refactoring bc I sure as hell do! Also the swift are the shit!!!!
Nice one. Just a couple In the VideoDetailView I would of put the two modifiers on the HStack. And in the VideoCell do not need the HStack as the View is in the list (unless you put in its own file with a Preview which you could put An HStack in that)
Muito bom, obrigado!
You are a good instructor.
Thanks for the kind words :)
I wanted to get your bundle. 26 years, CTO. Started as a assembler OS programmer. Want to learn iOS for fun. Do you do any QnA for the purchases? DM or mails? Thank you
Happy to answer any questions you have about the courses! You can DM me on twitter @seanallen_dev or you can find my email in the About section of my UA-cam channel.
Great
Great video as always! SwiftUI works like magic until it doesn't... As soon as one wants to do some customization, it seems it lacks the necessary tools... SwiftUI is for sure the future of iOS development, but it is not the present. Compared to UIKit, it looks a bit more than a toy. Easy and fun to use, but for serious stuff, the good old UIKit is still on top.
Regardless, keep up with the great work!
Agreed... it's still early. Hopefully we get a nice upgrade in a couple weeks at WWDC. But it's clearly the future and I'm excited for it.
Very good (y)
Great video as always. I was wondering how you would structure the data in firebase if you want to be able to send users friend requests and only if they accept, they are then added to the follower list? Thank you!
Hey Sean! Love the tutorial man. Any chance you think all this would be possible with UIKit as well? Cuz I'm trynna have more control on the design side and not too familiar with swift as a language.
Excellent tutorial - Thanks Sean.
Quick newbie question - is there a way to switch to another view (say "VideoDetailView") through the action of a button press?
Great video. Could you do an update video showing how to do this from an api call instead of json file
Hi Sean, This works great, Just want to adapt this app so constraints look full on ipad version. Can you route me to tutorial on how to do that?
If you wanted the text in the VideoListView to line with the top and bottom of the image, would you just add a spacer in between the two in the VStack?
Thanks a lot for the great tutorial. I made a list like this and am struggling to add a search function to it. I have been trying to use “searchable”. Any tips?
Sean, this is clear, uncomplicated and great, thank you. Can I ask? Is there any chance you could amend this lesson by showing how you would put a searchbar in the solution too?
Hello! Did you happen to find out? I’d like to know also, thank you!
sean can you please tell me how to delete the right arrow in the list when we add a navigation link to a list
Is there a way to remove the cell indicator and separator lines?
Amazing video! I was wondering in your video list.. is it possible to have Videos with different "let"'s? Ie one video will not have a title and another will.. hope I am making sense?
Amazing tutorial ! So less code compared with UIKit !
The only problem is when I rotate the device and I try to click on another cell...will stop working. Do you guys know what can be the fix for this issue ? Because will be very helpful for everybody.
just wondering are there any performance issues for the Navigation link under the List? you know that all the resources under the navigation link will be initiated right away .
This is such a great video! Thank you so much!!! One little comment....24:15 you could just put the font and foregroundColor on the HStack, right? instead of repeating?
Yup. This would be an optimization.
Very nice content, Sir. In my case, my list line only go half. It only show under VStack. When I comment VStack, it become full line again.
How to change the list row background color when selected and persist the state of the list row when user logout and login
Does this work the same with Navigation Stack???
easy
When you place the link in, should it be in a sting? If I'm not passing it in through data that I already have? In my case, I just want a button that goes to a gitHub repo
Now how do you pull to refresh that list?
Thanks for the video Sean
Please increase the font size by 10. Too small for the XS Max display.
Thanks for pointing this out. I always blow up my font on the computer, but sometimes not enough. I gotta remember that even though it looks HUGE to me while filming, it doesn't always translate to smaller screen sizes.
How could you make the image that you're showing a placeholder image until the user selects an image from the Photo Library?
Can the emulator run a whole iOS Operating system? I'm asking because you werde able to switch to safari.
Hi Sean, thanks very much for this great tutorial. In my app as I'm following along, the background is grey, with the list having cells with white backgrounds. How can I make the entire screen have a white background (in light mode)? I seem to be having a lot of trouble finding a way to do this. Thanks very much!
You can add a the .listStyle modifier onto the List and give it a style of .plain (in iOS 15).
@@seanallen Excellent! Thank you!
mismatch between the code and ui? how is it's laying out the hstack when you have no container for hstack?
Very cool. minimum effort for great looking result in like 20 min of coding excluding refactoring.. if somebody would ask me what is SwiftUI? I would point them to this video first :)
That’s a great endorsement, Laurent. Thank you!
Please do a tutorial on how to import an existing project, because nothing I do is working. I receive the error “failed to build the scheme …”
in 9:51 when I clicked on embed in list, the text moved under the thumbnail, I did everything step by step with but got this result, can you please tell me what have I missed?
add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. (taken from another comment)