Applet Orchard

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

[ad_1]
FREE 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 UICollectionView 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 FREE video series that I share with you how to build Twitter with Firebase, Instagram App User Interface — literally!, and Nike Retail Store User Interface.

FREE DOWNLOAD STARTER PROJECT:

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

This is his free-style no notes, no teleprompter presentation and live coding broadcast with you guys everyday.

To join Duc’s free courses, register for free 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 online courses or video series.

*************************************************
*** FREE TRAININGS IN IOS DEVELOPMENT ***
*************************************************
To subscribe and get free tutorials, courses and weekly content, visit me at:
Connect with Duc on facebook:
Tweet him:
Get daily inspiration:

Posted

in

by

appletorchard

Tags:

Comments

21 responses to “UICollectionView with Swift: Build Carousel Like Home Screen – iOS Development Tutorial Pt 1”

  1. George Hanna Avatar
    George Hanna

    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.

    Reply
  2. Tony Li Avatar
    Tony Li

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

    Reply
  3. Swifty Codes Avatar
    Swifty Codes

    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 ?

    Reply
  4. Fake Cheater Avatar
    Fake Cheater

    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.

    Reply
  5. sraldous Avatar
    sraldous

    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.

    Reply
  6. Fabian Flores Avatar
    Fabian Flores

    Hello Duc, thank you very much for this video.

    Reply
  7. onewonews Avatar
    onewonews

    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

    Reply
  8. ds t Avatar
    ds t

    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

    Reply
  9. Bradley Carter Avatar
    Bradley Carter

    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

    Reply
  10. Nimeelya Mattluru Avatar
    Nimeelya Mattluru

    why u have used the var interest didSetUP method ()

    Reply
  11. Xin Lok Avatar
    Xin Lok

    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.

    Reply
  12. Simeon Ajala Avatar
    Simeon Ajala

    Where is the part 2

    Reply
  13. Marquise Williams Avatar
    Marquise Williams

    Great Pace Duc and detailed tutorial.

    Reply
  14. TickTock Avatar
    TickTock

    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.

    Reply
  15. Jay Patel Avatar
    Jay Patel

    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.

    Reply
  16. Neelesh Shah Avatar
    Neelesh Shah

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

    Reply
  17. Vatsal Shukla Avatar
    Vatsal Shukla

    good video.

    Reply
  18. News News Avatar
    News News

    Hey duc how can I get the animation that the picture will chance after a view second like on the apple homepage

    Reply
  19. News News Avatar
    News News

    Hey Duc A nice feature is to add like in the tvOS the focus engine style

    Reply
  20. Don Paul Avatar
    Don Paul

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

    profileImage.layer.clipToBounds = true

    Reply
  21. Samuel BIO Avatar
    Samuel BIO

    Good video

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *