UICollectionView with Swift: Build Carousel Like Home Screen – iOS Development Tutorial Pt 1



không lấy phí DOWNLOAD STARTER PROJECT:

In this episode, we will re-create the Carousel Effect that you see on popular websites like Apple.com, Amazon.com or Facebook.com — but for iOS and Swift.

This same effect is increasingly popular in apps like Instagram, Facebook, App Store. So let’s discover how to build this one with and UICollectionViewController!

You’ll learn:
+ How to create UICollectionView and UICollectionViewController
+ UICollectionViewDataSource and UICollectionViewDelegate
+ UIScrollView and UIScrollViewDelegate
+ How to implement smooth UIScrollView and UICollectionView scrolling

First, let’s download the starter project I prepared for you below. You’ll also receive a không lấy phí video series that I share with you how to build Twitter with Firebase, Instagram App User Interface — literally!, and Nike Retail Store User Interface.

không lấy phí DOWNLOAD STARTER PROJECT:

********************************
*** ABOUT CODE MASTERY ***
********************************
Code Mastery is hosted by Duc Tran, founder of Developers Academy.

This is his không lấy phí-style no notes, no teleprompter presentation and live coding broadcast with you guys everyday.

To join Duc’s không lấy phí courses, register for không lấy phí at

*************************
*** MEET DUC TRAN ***
*************************

Duc Tran is founder of Developers Academy, one of the world’s leading iOS, Android and Web development trainers.

More than 2,000,000 developers have studied his video trainings; 100,000 developers see his posts each month. Each year, Duc has helped 20,000 plus developers gratudate from his trực tuyến courses or video series.

*************************************************
*** không lấy phí TRAININGS IN ***
*************************************************
To subscribe and get không lấy phí tutorials, courses and weekly content, visit me at:
Connect with Duc on facebook:
Tweet him:
Get daily inspiration:

About admin

Check Also

Trẻ 24-36 tháng học online: Nhận biết - phân biệt TO VÀ NHỎ

Trẻ 24-36 tháng học online: Nhận biết – phân biệt TO VÀ NHỎ

Tiết học : nhận biết phân biệt to nhỏ dành cho trẻ 24 tháng đến …

50 comments

  1. Hey thankyou for this, however i want the first and last cells to stick to left & right, how do I do it?

  2. Hi David , im unable to find the strter project in the link provided in description.

  3. Hey Duc.
    At 32:00, when I type "dequeueReusableCell", xcode does not recognise it, and it doesn't allow me to type "cell" at the subsequent line. What can I do to fix that?
    Thanks a lot!

  4. How did you make that splash screen thing?

  5. LETS GO DUC LETS GO DUC!!

  6. Thank you so much! I tried different carousel tutorial and thank to you I was able to understand the code behind. You explained very well the entire process.

  7. Thanks for the tutorial! I noticed the debugger spitting out layout issues (and also noticed it was happening to yours as well. If you change these values to this, it will work just fine:

    let cellWidth = floor(collectionView.bounds.width * cellScaleFactor)
    let cellHeight = floor(collectionView.bounds.height * cellScaleFactor)
    let insetX = (collectionView.bounds.width – cellWidth) / 2
    let insetY = (collectionView.bounds.height – cellHeight) / 2

  8. Hi… Great tutorial but would you be able to update this? I keep getting an error and I downloaded your finished project for this and it has the same error:
    018-12-13 22:49:27.647309+0900 Interests[29225:1677731] The behavior of the UICollectionViewFlowLayout is not defined because:
    2018-12-13 22:49:27.647473+0900 Interests[29225:1677731] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.

    Thank you very much.

  9. Hey duc great job, how to make an layouts like listview to gridview

  10. And what about make it paginated?

  11. Dragging doesn't work. Bullshit

  12. Hi Duc,

    How to add Gesture recognizer connecting to different view controller for each images. I tried searching this online and unable to get any where.. please let me know.

  13. Hi Duc
    thanks for the great tutorial, the last pointee part doesn t work on Swift 4 do you know how we could replace that. Many thanks again

  14. A circle is literally just layer.cornerRadius as a number and layer.masksToBounds as a Bool.

  15. hey Duc, how to achieve the same with paging enabled ?

  16. Thank you soo much 🙂

  17. Great!!! That I missing!

  18. how to handle a click of an image of uicollectionview and open a new page of internet ?

  19. Someone have an idea how to make 2 rows carousel ?? I will be grateful for your help

  20. This is exactly what I was looking for.  Including the part where the image stops at center when scrolling. Thanks so much.

  21. Good stuff, I really enjoyed the tutorial. There is one query, why have you not registered the class of UICollectionViewCell and why it worked perfectly without registering with UICollectionView. Please clarify the doubts. Thanks

  22. Duc, can you make a video about collectionview with buttons? Somehow I'm not able to get the buttons clickable. The buttons show up, but I'm not able to click on it.

  23. Hi Duc,  Looked everywhere, but can't find where to show the distances to edges while live dragging prior to adding constraints in Xcode 9

  24. Really nice tutorial but one question. How can I make the snapping effect faster. Because currently when you leave it in the middle it takes so long to snap to a cell. Thanks in advance

  25. Hi Duc, Thanks for tutorial. It's really awesome. I'm getting debug errors
    in my console
    When I run your project getting this error

    "The behavior of the uicollectionviewflowlayout is not defined because swift 3 the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values."

    what would be the issue ? I'm very new to ios. Someone there plz help me to sort out. I don't understand what was the reason.

    Thanks in advance

  26. profileImage.layer.cornerRadius = profileImage.frame.size.width/2
    profileImage.layer.masksToBounds = true

  27. I like the video and I like your pace! thank you!

  28. Hey man great tutorial. Learned more than Carousel Effect. Really really great tutorial. But, please can you talk a little bit slower, however other than that keep it up man.

  29. this helps me a lot, but don't you feeling that it always looks like too slow waiting it move to the correct position?

  30. Very Nice tutorial Sir. I Being new to iOS development can you please tell or make a video on automatic scrolling of this thing and as the end index is reached start the scrolling again from the start ?

  31. hey Duc at 40:11. offset = CGPoint(……y = – ScrollView.Contentinset.top). why is it minus? . cant we put it (y= targetContentOffset.potee.y) because we are not bothering vertical position of cell.? Thnk you.

  32. This helped me a lot, but your sample project gives layout errors in the console:
    Interests[35648:3119024] The behavior of the UICollectionViewFlowLayout is not defined because:
    2017-06-20 15:30:32.959 Interests[35648:3119024] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
    2017-06-20 15:30:32.960 Interests[35648:3119024] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fdd84607c70>, and it is attached to <UICollectionView: 0x7fdd8481ea00; frame = (0 87; 414 562); clipsToBounds = YES; autoresize = RM+BM; gestureRecognizers = <NSArray: 0x6000002437b0>; layer = <CALayer: 0x60000002cb00>; contentOffset: {-83, 0}; contentSize: {20, 493}> collection view layout: <UICollectionViewFlowLayout: 0x7fdd84607c70>.
    2017-06-20 15:30:32.960 Interests[35648:3119024] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

  33. Hello Duc, thank you very much for this video.

  34. i code following from this clip but my code is error can you fix it for me?
    it really important because it will be my final project in university

  35. Hi Duc, how can I paging this collectionview ( I want scroll step by step ) If I use "Paging Enabled" the view work not correct . Thank you so much

  36. DUDE! Lay off the meth!! Trying to keep up with you has caused so many errors and misspelled stuff, I've had to go back and figure out what the hell I missed. Thanks for the help though. SLLOOOOWWW DOOOWWWWNNNN

  37. why u have used the var interest didSetUP method ()

  38. Duc, I like this tutorial, Well explained. Can you please let me know how what we have to do if I want to scroll just one photo at once? appreciate your help.

  39. Great Pace Duc and detailed tutorial.

  40. Yo dude, my computer from 2012 is too old to download Xcode, should I wait for around 6 months before downloading this app because I am getting a new computer. Which language should I learn because currently I am learning Objective-C.

  41. Hi Duc, Can you tell me how to put cell in middle of screen when device orientation change.in my project i am showing images in full screen but when orientation change image not staying middle.

  42. Duc, the download links to StrechyHeader files and the starter does not have the Interest swift file, Can you please fix this. Thanks

  43. profileImage.layer.cornerRadius = profileImage.frame.size.width/2

    profileImage.layer.clipToBounds = true