Swift: Lets Build YouTube – Home Feed: UICollectionView, AutoLayout (Ep 1)

Today we’ll start off this brand new series on how to build out the YouTube application for iOS. I’ll give you guys a quick demo of the application and some of the features/functionality that we’ll be writing in Swift. Sit back, relax, and enjoy this first lesson where we’ll focus on building out the Home Feed portion of the app!

Twitter Slide Out Menu Course
https://www.letsbuildthatapp.com/course/Twitter-Slide-Out-Menu

Podcasts Course
https://www.letsbuildthatapp.com/course/Podcasts

Intermediate Training Core Data
https://www.letsbuildthatapp.com/course/intermediate-training-core-data

Instagram Firebase Course
https://www.letsbuildthatapp.com/course/instagram-firebase

Facebook Group
https://www.facebook.com/groups/1240636442694543/

Completed Source Code:
https://www.letsbuildthatapp.com/course/Youtube

Follow me on Twitter: https://twitter.com/buildthatapp

Comments

Doffy Donqouite says:

MAAAAAAAAAAN I DON’T KNOW YOUR NAME BUT OMG You’re giving me goosebumps ^^ I’m new to programming and I want to learn about swift as my first programming language. I hope you won’t stop making tutorial videos about swift.

Subin Revi says:

Great tutorial Brian..i hope you choose not to use Visual constraint format for title label and subtitle to demonstrate the alternative constraint options right?

Gakkie Gakkienl says:

Will this be very different with Swift 4 / Xcode 9.3?

Liroy Yarimi says:

Hi guys,
if you need help to write this app (because this write with swift 3) go to my GitHub account for the full project (write with swift 4)
https://github.com/LiroyYarimi/YouTube

Abdul says:

Thanks

But your voice make me feel sleepy :(

joijioj says:

Do we still need to set up UIScreen before code interface programmatically now?

rivenblades says:

good luck when using google api for getting thumbnails and channel thumbnails

Sam WD says:

Brain, thanks for making this but i find programatic UI really hard to follow and Interface builder seems to easy to follow.
Do you have video series built on the top of the storyboard?

Tony D says:

I know you’re swift at replying. So I”m wondering what’s different now in Swift 4.1. What version of Swift was this written in and does it matter?

Michael Benton says:

Is there a difference between doing this:
addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 20))

Compared to this:
addConstraintsWithFormat(format: “V:[v0(20)]”, views: titleLabel)

bearlearnpiano says:

Thank you so much.
Now some command is change but I can take care it. :)

Anas N. Alzayed says:

thank you for an excellent vid.
but why did use collection view instead of table view?

Lohen Yumnam says:

Can you tell me how to add infinity scroll just like real youtube App.

Riyad Shauk says:

This is awesome. I just followed along with this first video tutorial using Swift 4.2 on Xcode 10. Fun stuff and a nice way to go without using Storyboards. Here’s my Swift 4.2 version of this code (almost the same, Xcode helps out with intellisense when an API changes slightly): https://github.com/riyadshauk/youtube-app-replica

Armin Spahic says:

Great video man, but I just wanna ask why didn’t you use tableview for this example? Any specific reason?

James Goforth says:

These videos are outdated
2018-07-06 07:19:31.374286-0600 youtube[1259:39396] Unknown class _TtC7youtube14ViewController in Interface Builder file.
2018-07-06 07:19:31.407356-0600 youtube[1259:39396] *** Assertion failure in -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:isFocused:notify:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.52.10/UICollectionView.m:1981
2018-07-06 07:19:31.411273-0600 youtube[1259:39396] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘the collection view’s data source did not return a valid cell from -collectionView:cellForItemAtIndexPath: for index path {length = 2, path = 0 – 0}’
*** First throw call stack:
(
0 CoreFoundation 0x000000010cc611e6 __exceptionPreprocess + 294
1 libobjc.A.dylib 0x0000000109023031 objc_exception_throw + 48
2 CoreFoundation 0x000000010cc66472 +[NSException raise:format:arguments:] + 98
3 Foundation 0x0000000108ac6652 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 193
4 UIKit 0x000000010adf1e84 -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:isFocused:notify:] + 2437
5 UIKit 0x000000010adf14f9 -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:] + 35
6 UIKit 0x000000010adf677e -[UICollectionView _updateVisibleCellsNow:] + 4505
7 UIKit 0x000000010adfc558 -[UICollectionView layoutSubviews] + 364
8 UIKit 0x000000010a3fd808 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1515
9 QuartzCore 0x00000001103af61a -[CALayer layoutSublayers] + 177
10 QuartzCore 0x00000001103b382b _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 395
11 QuartzCore 0x000000011033a29f _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 343
12 QuartzCore 0x0000000110367940 _ZN2CA11Transaction6commitEv + 568
13 UIKit 0x000000010a3482c9 __34-[UIApplication _firstCommitBlock]_block_invoke_2 + 141
14 CoreFoundation 0x000000010cc03b0c __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__ + 12
15 CoreFoundation 0x000000010cbe82db __CFRunLoopDoBlocks + 331
16 CoreFoundation 0x000000010cbe7a84 __CFRunLoopRun + 1284
17 CoreFoundation 0x000000010cbe730b CFRunLoopRunSpecific + 635
18 GraphicsServices 0x000000010f537a73 GSEventRunModal + 62
19 UIKit 0x000000010a32e0b7 UIApplicationMain + 159
20 youtube 0x000000010871ac37 main + 55
21 libdyld.dylib 0x000000010de2d955 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

Nathenael Dereb says:

if your having trouble with the code below make sure you add the ‘s’ on addConstraint’s'(NSLayoutConstraint.constraints

addConstraints(NSLayoutConstraint.constraints(withVisualFormat:”H:|-16-[v0]-16-|”, options: NSLayoutFormatOptions(), metrics: nil, views: [“v0”: thumbnailImageView]))

Rico Youngblood says:

im following along but I was curious, is it ok that I’m not exactly understanding what you are doing at times?

michael vivar says:

when to use collectionview and tableview?

Thracion says:

Hey Brian! Why would you use UICollectionView when you could’ve used UITableView for the same purpose? I’ve seen you doing this a lot so perhaps there is something that I’m missing. Thank you!

Hasan Ozan Al says:

Please make a udemy course about Swift or Kotlin.

mohammedjreo says:

Hi Brian, do you offer a course on lets build youtube with Swift+Firebase?

shamil yusuf says:

Hi Brian,

I am facing the issue.

collectionView.reloadData() is not calling child collection view.

Jason Campbell says:

Coming from .NET, I have no idea how you know what UI elements are needed. How do you know which protocols you need to implement? Seems like you have to be very familiar with all of the different UI options. How do you get so familiar? Just looking at documentation?

Ha Nguyen Manh says:

kinda fast for newbie but 2018 already this course is still very good for learner, code along with teacher, practice on your own example projects, just 2-3 hours you can do it by yourself even newbie. Thanks Brian!

Aaron Swartz says:

Great Job!!! Master!

Liviu F says:

@ 2:05 I can’t do this any longer on my iOS …I have this trouble in my iPhone 6 , as well in my iPhone 8 …. Any ideea why happends this ?

Deviyani Swami says:

Bad tutorial

Andrew Jenson says:

Hi, I just finished episode 20 of your YouTube app tutorial. Do you plan to create more videos for this YouTube series? And do you think it’s ok to include it in my portfolio as is (through Ep 20)?

Dancuk 26 says:

How it work ?

DJ Tupolev says:

Make it with Spotify/music plsss

Rocio Cordova says:

Hi Brian, thanks for all your tutorials, they are very helpful. Want to ask something out off topic, what microphone do you use, or recommend? Thanks in advance 😀

Gordon Gaming says:

you do love swift

the language

Tony D says:

Actually, holy crap. It’s like building legos. Gotta read watch the video to the end before worrying about getting help trouble shooting! Sorry bout that!

Hong Ly says:

How to build the drag down video animation at 2:07? Thank you!

Adam Lane says:

I am trying to follow these instructions using Xcode Version 10.0 and it is not working.  Do you by any chance have a similar video using Version 10 because it seems that some things have changed since this version.

A Estrada says:

First time seeing swift code, it’s very similar to androids java. Nice!

Dew Time says:

That meetup sounds badass. Two years later, is it still going on? Any luck? I’m moving there for a job in the summer.

Hasan Mohammad says:

I always have to reduce his videos to 0.75 speed to follow along

ritesh singh says:

addConstraints(NSLayoutConstraint.constraintsWithVisualFormat( “H:|-16-[v0]-16-|”, options: NSLayoutFormatOptions(), metrics: nil, views: [“v0”: thumnailImageView])) this code is not working for me because Im using xcode 9 and swift 4 mostly. please help me out with an updated code

Dew Time says:

Hey Brian is it ok to watch this video in 2018? I know that may be a dumb question but just wondering if things have been completely outdated by now. I’m gonna watch it anyway but still want your quick advice. Edit: everything works fine!

shamil yusuf says:

Hi Brian,

will it be good if we use youtube player plugin to show the video from youtube i mean download it from pod and using or same as you showing the video in this app..
Which will be better..
Going with third party any problem..

Furqan Ahmad says:

hi brain, i know i am very much late coming to this tutorial. My delegate is somehow not calling and i am getting stuck in the middle. i am using the same steps as you are doing in first 12 mins of the video but why delegates are not calling themselves somehow and due to that i can’t see red cells. need some help :)

Andrew Jenson says:

Hi, are you still doing the meetup group in SF? thanks

MomIv says:

You motivate me to build new apps. Keep it up

Harshit Gupta says:

Nice Video. I liked the way you are explaining

THEJOiNT says:

How would you set the constraints for a vertical line?

for example lets say you have two columns of cells in a row instead of 1. format: “V:[v0(1)]|”, creates the horizontal line but i can’t figure out how to create a vertical line to separate the cells

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours