SwiftUI: Facebook Complex Layouts - Horizontal Scroll View

Рет қаралды 54,386

Күн бұрын

The time is here, let's try to challenge ourselves with what is possible using SwiftUI today. I went ahead and built out UI that is very similar to apps on the AppStore today. Namely, a layout that has a horizontal header with a vertical list below it. Let's see how to mock this out today.
AppStore JSON APIs
www.letsbuildthatapp.com/cour...
Tinder Firestore Swipe and Match
www.letsbuildthatapp.com/cour...
Twitter Slide Out Menu Course
www.letsbuildthatapp.com/cour...
Podcasts Course
www.letsbuildthatapp.com/cour...
Intermediate Training Core Data
www.letsbuildthatapp.com/cour...
Instagram Firebase Course
www.letsbuildthatapp.com/cour...
Facebook Group
/ 1240636442694543
Completed Source Code
www.letsbuildthatapp.com/cour...
Instagram: / buildthatapp
Twitter: / buildthatapp
Hackintosh Build
i9 9900k: amzn.to/2CvQj6v
ASUS Z390 Motherboard: amzn.to/2JpaQ2B
16GB Corsair Vengeance RGB RAM: amzn.to/2YbygvJ
Corsair H100i Platinum Water Cooler: amzn.to/2FnbM22
Thermaltake RGB Power Supply: amzn.to/2TgKDTu
Intel 1TB SSD: amzn.to/2Tkdk1V
Corsair 280x Computer Case: amzn.to/2WcjvH2
AMD Radeon 4GB RAM GFX Card: amzn.to/2TYMyAp
LG 34" Widescreen 3440 x 1440: amzn.to/2Tk7q0S
Rode NT1 Microphone: amzn.to/2TZgX1r
Focusrite Audio Interface: amzn.to/2U12gey
Panasonic GH4 DSLR: amzn.to/2U4BrG6
Magewell HDMI to USB3 Capture Card: amzn.to/2Jp2esI

Пікірлер: 168

@chemamaldonado8511 5 жыл бұрын

Man keep that work! You are the best at swift tutorials in the platform. Highly recommended 🙌🏻

@TreyCox1 5 жыл бұрын

I can't thank you enough for these videos, Brian. THANK YOU.

@maxcodes 5 жыл бұрын

Brain is a code god

@maxcodes 5 жыл бұрын

Brian*

@serkanm1365 4 жыл бұрын

u re the best of swift world. when i search on internet to "swift ui" and everywhere ur videos. thanks

@xxfkee 5 жыл бұрын

I understand Apple is enfin catching up with coding style and philosophy of our visionary teacher Brian which I am now somehow accustomed to after having finished Brian's several video tutorials. No wonder I feel very comfortable with SwiftUI. Merci beaucoup!

@talldane2538 5 жыл бұрын

These complete App build-out's this early are fantastic!

@piyushsharma1638 5 жыл бұрын

Wow, roller coaster ride of development, loved it.

@timmy334 5 жыл бұрын

Great video! I'm loving SwiftUI and will probably roll with it full time since I'm just getting into real apps. Thanks!

@w0mblemania 5 жыл бұрын

Keep up the great work Brian. Your efforts are much appreciated. Please say hello to Professor Brains.

@mattheaney729 5 жыл бұрын

Great tutorial! SwiftUI is such a massive game changer for iOS dev! Thanks Brian! 😁

@vipullal7689 3 жыл бұрын

Always the best! Thanks for this video.

@hailahong3021 5 жыл бұрын

This is the only channel that does advanced things. Other channels are just for beginners. Hope you doing well.

@LetsBuildThatApp 5 жыл бұрын

True, I find it much more interesting to talk about real world problems and not intro bs.

@MrSwisyn 5 жыл бұрын

Definitely a great tutorial! Keep that good work up.

@giuseppecapoluongo4510 5 жыл бұрын

Nice work! I'm working on SwiftUI and was stuck with the image issue you mentioned at min 23:00! Thanks, keep doing this kind of videos, we appreciate!

@owenmoore3782 5 жыл бұрын

Awesome stuff Brian!

@SwiftySanders 5 жыл бұрын

Great video Brian!!! Thanks again.

@marcaupont9145 5 жыл бұрын

Another great one Brian!

@NPCTE23 5 жыл бұрын

we'll need a tutorial on making a network request and displaying data and images, please! Thank you for this tutorial we're catching up very quickly on the new framework!

@donathmm3881 5 жыл бұрын

Yess

@Aaron-dt3xz 5 жыл бұрын

If you want to make a network request and display stuff, what I've been doing is using an loading all of the data in the SceneDelegate asynchronously with an @EnvironmentObject that I pass into the root view in the SceneDelegate. You can then do conditional checks and stuff in your views so that you can display something while the content loads. There's a good tutorial on EnvironmentObjects here: www.hackingwithswift.com/quick-start/swiftui/how-to-use-environmentobject-to-share-data-between-views Once you get the hang of it, SwiftUI is certainly WAY easier to do stuff like this in than UIKit.

@donathmm3881 5 жыл бұрын

@@Aaron-dt3xz I have to pass .environmentObject Everytime I present a next screen if I don't do it my app crashes

@Aaron-dt3xz 5 жыл бұрын

Donat Hmm If you pass .environmentObject in the SceneDelegate then you shouldn’t have to do it for every view.

@donathmm3881 5 жыл бұрын

@@Aaron-dt3xz I have done it but still crashes. Maybe because of the beta

@30guarino 5 жыл бұрын

Your “Rough around the edges” is like my feeling of accomplishment when I get no errors lol

@timmy334 5 жыл бұрын

Right?

@girishadapa90 5 жыл бұрын

Awesome no words ... NYC explanation ...

@TwoTwenty8LLC 5 жыл бұрын

If I didn’t go through your course, I would be totally lost. Now, looking at how you built this app, I can see that using your tools, swiftui is very simple. -Patrick

@Justgoodvids 5 жыл бұрын

TwoTwenty8 LLC your videos should use distinguishing thumbnails

@cappuccinopapi3038 4 жыл бұрын

Just watching this could have saved me a couple of days

@koustav2008 5 жыл бұрын

Excellent Tutorial !!!

@masbro1901 5 жыл бұрын

amazing... you are my best teacher. *thumbs up

@RonaldTable 3 жыл бұрын

Wow... thanks Brian... this is very very good tutorial ... :)

@benhwang6378 5 жыл бұрын

Nice tutorial！ thanks man ！

@glennadams7047 5 жыл бұрын

Great tutorial. Thanks

@syedaurangzaib3861 5 жыл бұрын

Superb man 👏🏽👏🏽👏🏽

@uttamsahu6965 5 жыл бұрын

Awesome 👍 no words

@graywire 4 жыл бұрын

Thanks Alot, It was really Helpful. I just did a small modification and moved Text("trending") before top vstack to have it while scrolling.

@user-sq5xv6dr1v 5 жыл бұрын

Awesome. Thank you.

@mmcanhaoable 3 жыл бұрын

Awesome video

@justcallmemarly 5 жыл бұрын

Could you make a tutorial on using the TabbedView ?

@armaandhanji2112 5 жыл бұрын

Hey Brian will this layout work on an iPad screen? Or do we need to do make special accommodations so it looks good on an iPad too? Love your channel

@aaronhawkins3722 5 жыл бұрын

Thanks Brian

@damienissa 5 жыл бұрын

18:25 Hi Brian. About padding make sense to use Text("Some text").padding([.leading, .trailing], 12) or Text("Some text").padding(.horizontal, 12)

@ialtoobi 5 жыл бұрын

Thanks Brain 👍🏼

@mohammedzee2416 5 жыл бұрын

Many thanks 🙏🏼

@EimantasK 5 жыл бұрын

Nice video! Thank you : )

@marcx3827 5 жыл бұрын

Hey Brian! First of all , thanks for your afford doing all this amazing tutorials. I also studied the new SwiftUI tutorial, and maybe this modifier helps you to ignore the "Safe Areas" instead of using the padding. The modifier is ".edgesIgnoringSafeArea(.top)" in your case .leading. I couldn't try it yet. greets from Germany

@esyx6476 5 жыл бұрын

Hi Brian, I believe you can you use .edgesIgnoringSafeArea() function on the VStack instead of -20 padding :)

@developerios6096 5 жыл бұрын

Cleaner solution, thumbs up

@himshikhargayan 4 жыл бұрын

In case the "identified by" is not working - ForEach(posts, id: \.id) { post in Text(post.propertyName) }

@bossomc 4 жыл бұрын

I found that case. It changed "ForEach(posts, id: \.self) { Text($0) }" good luck :)

@govindpathak2486 4 жыл бұрын

Apple has changed the syntax below is the correct syntax --> ForEach(users , id: \.id ){ user in UserRow(user: user) }

@nizz4m 5 жыл бұрын

you are awesome.

@ghanshyamdoifode9479 3 жыл бұрын

Thank you so much

@swiftprogrammer8972 4 жыл бұрын

I just followed this tutorial and my scrollview wouldn't scroll till i added ScrollView(.horizontal), like this. Just posting in case anyone encounters the same problem

@areola_ayatollah 4 жыл бұрын

Thank you! How did you figure that out?

@anirup.patnaik 4 жыл бұрын

Even I did struggled on the same and then ended up discovering that

@swiftprogrammer8972 4 жыл бұрын

@@areola_ayatollah I just thought maybe because i was not specific with the kind of scroll direction i wanted so i implemented that

@asankasudesh900 4 жыл бұрын

thanks for amazing tutorial.i can't see these replies

@SuperMarucca 4 жыл бұрын

if you don't want scroll indicators set ScrollView like that: ScrollView(.horizontal, showsIndicators: false)

@Zerocool37 5 жыл бұрын

nice tutorial!

@lamtrankhanh6406 5 жыл бұрын

Thanks!

@AgentCell 5 жыл бұрын

Hey Brian I asked this question in a previous video but is there a difference in RAM usage between the live preview and simulator? Is it less with the live preview?

@romulolobo9493 4 жыл бұрын

ForEach syntax changed a little bit in newer versions of swift, its causing an error on tutorial code... New syntax: ForEach(posts, id: \.self) { post in Text(post) }

@software-sage 4 жыл бұрын

Thanks man

@RodLandaeta 5 жыл бұрын

Hey mate, commenting out just to let you know the `.padding(.leading, -20)` can be done by `.listRowInsets(EdgeInsets())` or just `insets(EdgeInsets())` which is a better approach

@aliakkawi4759 5 жыл бұрын

Awesome

@waynezong8418 5 жыл бұрын

SwiftUI is amazingly powerful. Thanks Brian! But I'm wondering how you can specify the snappy horizontal collection view behavior like we did before by using SwiftUI? It looks to me like a separate layout file from the actual coding part of an app by far.

@mobilestar6575 5 жыл бұрын

Hello, Thanks again for your video. Is "var body: some View " must to have when declaring new view? And How can we implement MVMM or MVC model when we use SwiftUI? Regards.

@mevanslondon 5 жыл бұрын

Hi Brian. If you were just starting to develop a new app, would you download the beta Xcode, wait for the final release, or develop with UIKit and refactor to SwiftUI further down the road? Also, I noticed you upgraded to the new OS X on your old machine but not the new one. How risky is installing the new OS at this point and who would you recommend could do that? Thanks, your tutorials are fantastic.

@ChrisKiix 5 жыл бұрын

Great work so far with SwiftUI! The auto completion is sooo annoying !!! I’m struggling to get a Tabbar to work correctly (TabbedView) do you have any experience with it? I followed the WWDC video “SwiftUI essentials” and its not working for me 😬😬 they also use a View that is currently not available in the Beta “Form”? Greets from Stuttgart Germany! Love your content!

@LeviKline 5 жыл бұрын

This is such a great video. With SwiftUI I know you can make cross platform apps, but could you use original Swift in addition to it for things like a normal for loop and still make the app cross platform? Or does it have to conform only to SwiftUI?

@SuperMarucca 4 жыл бұрын

Hi Brian, for correct dynamic aspect ratio of the Post Image I set the frame of the image in PostView struct like that: .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading) and the padding of VStack like this: .padding(.init(top: 0, leading: -20, bottom: -8, trailing: -20))... This work perfect for me, is this the right way? THX

@davidclawson6776 5 жыл бұрын

I just completed this, and had to make a couple changes to get it all to fit: The "post_puppy" image needed to have the addition of ".aspectRatio(contentMode: .fit)", and also had leading padding of zero and trailing padding of -20.

@michaziobro5301 5 жыл бұрын

It is compatible with old storyboard approach? Can I mix them both somehow, or is it totally independent?

@maheshnallabothula609 4 жыл бұрын

Could you make a tutorial on CollectionView kind of Grid which is inherit from UIViewRespresentable and When tap on that collectionviewcell need to navigate to some other swiftUI view.Thanks in advance.

@pastpianist 5 жыл бұрын

For the scrollview portion though, you lose all the cell recycling capabilities right? Or is SwiftUI smart enough to not render until it shows even in ScrollView()?

@Tristan-zr6gf 5 жыл бұрын

Super cool tutorial. Q: all the images are „somewhat hard coded“. How would this work if you had i.e. 3 users, they upload a picture and as you pull down the feed, it updates and shows the new posts. Surely one would also hook it up to firebase or so, but a tutorial on that in swiftUI would be super cool 🤙🤓📱🤩

@KDChenStudio 5 жыл бұрын

Great tutorial! Is there a way to set the List as a horizontal style instead? Back in old days an UICollectionView would do the job, but how do we do that with SwiftUI?

@LetsBuildThatApp 5 жыл бұрын

I'm sure we'll get a horizontal list view when SwiftUI hits release.

@KDChenStudio 5 жыл бұрын

@@LetsBuildThatApp Nice, can't wait. I can see that we will no longer need RxCocoa framework once SwiftUI + Combine dominates the developer community.....haha very exciting.

@maxcodes 5 жыл бұрын

resizable() gives you a similar effect to clipped. Well, it resizes it instead of clipping it. But either way, makes it smaller. UPDATE: Just got to the point in the video where you decide to use resizable.

@jensonjohn 5 жыл бұрын

Flash man.. Give some time to render 😂❤️❤️❤️👍

@SMC247 5 жыл бұрын

Coding with this seems to feel like coding using React Native... Although, I've not actually used it yet as could not install the new Xcode yet.

@SlehyderMartinezM 5 жыл бұрын

Could you make a video of why hackintosh? is that I am struck by the theme of an original Mac or a hackinstosh.

@kenn850 5 жыл бұрын

Quick question is this not Apple's Version of flutter

@tonytonystache 3 жыл бұрын

In order to be able to scroll the "ScrollView" you must ad a ".horizontal" so it looks like this ScrollView(.horizontal){ }

@timmy334 5 жыл бұрын

Could you include passing data between views and using Firebase using SwiftUI in a future video, please?

@shivakittusamy5560 5 жыл бұрын

I would really like some sign in with Apple tutorial

@ckwcfm 5 жыл бұрын

Wondering how to make a multi column collectionView with Swift UI.

@mintchocolove4485 4 жыл бұрын

I found some codes are not working in my XCode. Here is my revision. 1. ForEach(Range, id: \.self) { } Or, insert let id = UUID() in struct Post: Identifiable 2. Text("blah blah").color(.primary) is not working. Instead, use Text("blah blah").foregroundColor(.primary)

@vikkaalfyorova 4 жыл бұрын

I got an error value of type '[String]' has no member 'identified' with ForEach (6:23). Just change to ForEach(posts, id: \.self) they changed it in Xcode 11 Beta 5 and above

@javishfri 5 жыл бұрын

woooowwwwwww

@lallimann8952 5 жыл бұрын

Hey, we were planning to launch a app after ios13 launch. And some backend classes are ready. We are using firestore for login and our database. We have to start writing code in july after ui design, what would you recommend? Storyboard or swiftui. And if storyboard , how difficult it would be to use swiftui after that.

@LetsBuildThatApp 5 жыл бұрын

I personally haven’t used storyboards for 4 years. Swiftui is up and coming but I wouldn’t refactor entire codebases until maybe a year after release.

@lallimann8952 5 жыл бұрын

Lets Build That App so what should i do, start building app in old way and refactor code base next year when its out of its beta phase.?

@LetsBuildThatApp 5 жыл бұрын

Refactors easy and you have to do it anyways in a year.

@lallimann8952 5 жыл бұрын

Lets Build That App Thanks, i will do it in old way. It would be helpful if you upload a tutorial on this topic. “Change storyboard to swiftui”.😬

@oscargidefjord848 5 жыл бұрын

Please guide us how how use firebase (crud) with this!

@denniswhite6779 5 жыл бұрын

intereseting... so deque is gone?? if so does that mean that all the rows are created at run time regardless of their display?

@LetsBuildThatApp 5 жыл бұрын

I assume the lists treats the repeating row as a cell internally.

@kidrainen01 5 жыл бұрын

This was something I struggled with.. how is it possible to have a collection view that displays users post, but above the collection view it displays a horizontal view with different user profiles to follow or something like that?

@kidrainen01 5 жыл бұрын

I haven’t updated to the Xcode 11 beta yet too.

@danbird8114 4 жыл бұрын

How do you get the background color of a list to change?

@russellwarwick 4 жыл бұрын

Anyone know how to make the horizontal ScrollView maintain it's scrolled position. When you scroll down the ScrollView resets it's position. Any help would be awesome :)

@HisMajesty99 5 жыл бұрын

You make me wanna learn SwiftUI rn lol

@hitta750 5 жыл бұрын

Watching everyone enjoy Swift UI while I cant even unzip the xip that Xcode 11 comes in. 🙃

@Fabio-rg9nv 5 жыл бұрын

I’m on beta 4 and I‘m working on a similar layout as your „Trending“ view (horizontal scrollbar with clickable images that open a new view). NavigationButton is deprecated and replaced with NavigationLink. But my issue is that when I use NavigationLink for the individual images in a list element, the images are not clickable. But what happens is that the List item where the horizontal scrollbar is in, gets clickable. I think it‘s a bug because I‘m using the same code as in one of Apple‘s tutorials. Does the same happen to you? Is there a decent workaround so my app at least works for now?

@LetsBuildThatApp 5 жыл бұрын

Interesting, good old beta changes :)

@LetsBuildThatApp 5 жыл бұрын

Hope you’re having fun with beta software.

@VishnuVijayan96 5 жыл бұрын

How to have a condition inside the body? in case if I want to hide an Image if I don't have URL

@creejohnson 5 жыл бұрын

Try this: Image(user.imageName == "" ? "avatar" : user.imageName) .resizable() .clipShape(Circle()) .overlay(Circle().stroke(Color.black, lineWidth: 2)) .frame(width: 80, height: 80)

@anthonygiannini7767 5 жыл бұрын

So can consumers like add post to this app? Like normal Facebook?

@yeilmusic 5 жыл бұрын

idk , how this work with landscape.

@the1000apple 4 жыл бұрын

Right next to "ScrollView {" I get the error "Generic parameter 'Content' could not be inferred". Google has no answer to fix this. What can I do?

@nickng8069 5 жыл бұрын

When I click on Assets Catalog, xcode crashes everytime. Anyone else has/had this problem?

@jamescampbell2822 4 жыл бұрын

NavigationButton has changed too, "NavigationLink"

@arsalanhashemi4469 4 жыл бұрын

hey brian , why you didn’t use ScrollView(.horizontal , showsIndicators: false){}

@LetsBuildThatApp 4 жыл бұрын

Its up to you how you want to customize your view.

@shiju861 5 жыл бұрын

NavigationLink is not working for me, If i used top header. Could you please add NavigationLink in this video? Like to display detail screen. Thanks in advance!!

@ashokmurthy7831 3 жыл бұрын

In XCode 12.2 "NavigationButton" has been deprecated. Use "NavigationLink" instead, as follows : NavigationLink(destination: GroupDetailView) { GroupView() } Thanks for a great tutorial.

@ashwynkhandelwal4525 5 жыл бұрын

Are you going to post an updated instagram clone video for swiftUI?

@LetsBuildThatApp 5 жыл бұрын

Might retire that course to make another much better course when SwiftUI is official.

@2019RS3 3 жыл бұрын

Out of curiosity can you do a Firebase video?

@hectormejia499 5 жыл бұрын

am I the only who finds swift ui code really messy? its still cool though, just rough on the eyes

@raulcattelan4506 4 жыл бұрын

to remove separator line struct ContentView: View { let posts = ["1","2","3"] //to remove the separator line from list of posts init() { // To remove only extra separators below the list: UITableView.appearance().tableFooterView = UIView() // To remove all separators including the actual ones: UITableView.appearance().separatorStyle = .none } var body: some View {

@clivegoransson4992 4 жыл бұрын

i notice navigationbutton has now changed to navigationlink which automatically adds an annoying arrow, this ruins the look of your sample app somewhat

@droid6298 4 жыл бұрын

sir how can we pick videos from picker help me plz

@liant9314 4 жыл бұрын

Hi Brian, could you please make a SwiftUI tutorial on 'Integrating Wordpress Posts and Send Push Notification whenever new posts are publish on the Wordpress website'?

@LetsBuildThatApp 4 жыл бұрын

Where's the documentation for that?

@liant9314 4 жыл бұрын

@@LetsBuildThatApp Thanks so much for the reply. There is no documentation for it, it's just my wish. I've a Wordpress site and want to create IOS app for it and achieve my first comment. Thank you