All posts
iOS

Circular UIScrollView – SwiftCarousel

Łukasz Mróz

Łukasz Mróz

Often times when you have some type of scrollable gallery, and there are plenty of images, you wish the gallery will start again just by swiping to the next image. Unfortunately, most of the time you have to go back by scrolling X times back just to see the first image. It is kinda painful and can be easily fixed. Let me introduce SwiftCarousel.

SwiftCarousel

SwiftCarousel is a lightweight, written natively in Swift, infinite (circular) UIScrollView. It has basic functionality like setting up by code or by Interface Builder, using different type of views with different sizes (which was lacking in the other libraries), but also some advanced functionality like:

  • Selecting items by tap (which you can disable) and setting default selected item
  • Delegate protocol in which you can implement methods like didSelectItem(), didDeselectItem() and others
  • Showing specific number of items or aligning views as they are (with resizing or without)

Today we will show how you could use it.

Animalove – Simple app to select favorite animal.

Starting off with Example1, we will create circular scroll view for self-sizing UILabels. First, create new project (I was using Xcode 7.2, but it should work properly on earlier versions that handle Swift). We will use Single View Application for iOS, and we will use Swift without any additional fireworks. If you don’t need help with configuring project, just skip to Step 3.

New project -> Single View Application
New project -> Animalove

Now we need to add SwiftCarousel to our project. We can do it by copying the latest version of class here, or by installing it from cocoapods adding this line to Podfile:

After downloading the carousel class, we can now start writing some code. Setting up is as easy as creating view (in IB or code, we will show you how to do it in Storyboard, but Example2 shows how to do it with code).

Step 1 – Add View to your ViewController

Add a View to your controller (place it wherever you want), set width & height, and what is most important here, set class as SwiftCarousel (if Xcode doesn’t see the SwiftCarousel class, please check if you installed your pods right or if the code you copied is correct).

Add UIView with SwiftCarousel class.

Step 2 – Connect your View with ViewController

Next step would be to connect your View with ViewController. We will use Assistant Editor, press and hold ctrl and using mouse we will drag it to the ViewController as an outlet.

Connect SwiftCarousel IBOutlet.

Step 3 – Add your items to the carousel!

Now we will just add our items to the carousel. In our example we will use UILabels which will self-size based on the font and text.
First, we will write a simple function that will create label based on the text:

Then we will just setup our carousel with animal names as UILabels. Configuration will be done in viewDidLoad():

What is important here is the resizeType. When we don’t set resizeType as .FloatWithSpacing(CGFloat) or .VisibleItemsPerPage(Int), we get default type which is .WithoutResizing(CGFloat). What it does is, it will place your views as they are – and our views don’t have any frames at all – so we will see blank page. But because we want our labels to fit our text, we will use .FloatWithSpacing(10.0). It translates to: “Just use .sizeToFit() on every UIView and then place it with correct frames. Also add spacing between them (which is 10 points in our case).”.

And thats it! It was really easy, wasn’t it?

Now you can configure your carousel as you want.  For instance with default selected index:

Or implement didSelectItem() delegate method:

But then you need to set the delegate property for carousel:

There are more delegate methods which you can implement:

Every method is optional so you can implement what you what you want!

Also you can select your item from code and with animation (or not):

Newsletter

The post is created by Droids On Roids Team Member.
We would love to take care of your business.

Leave comment

  • Affan Toor

    Hi, I used this carousel and it worked perfectly, saved me lot of time and effort. Thank you!

    I have a question, is there any way to programmatically scroll to a specific item? I used the ‘carousel.selectItem(1, animated: true)’ to select an item on viewDidLoad, the item is selected but it is not in the middle of the visible scroll area so user gets confuse about which item is selected. Is there any method/property which can solve my problem?

    Thanks

    • Łukasz Mróz

      To do this in viewDidLoad you can set the defaultSelectedIndex property. Later you can do it by selectItem(_:animated:) as you stated above. So the example of setting the default index would be:

      carousel.defaultSelectedIndex = 1

      Cheers.

    • Łukasz Mróz

      Hey!

      To do this in viewDidLoad you can set the defaultSelectedIndex property. Later you can do it by selectItem(_:animated:) as you stated above. So the example of setting the default index would be:

      carousel.defaultSelectedIndex = 1

      Cheers.

  • muneesh

    I want to ask in Example 2 is there any way images should be autoscroll after every 15 second?

    • Łukasz Mróz

      Hey! There is no built-in method that we’ve made, but you can use NSTimer that will do a task every 15 second, and the task would select the next item using method selectItem(:animated). You should be also aware that you might try to select to the index that is lower than 0 or index that is higher than the amount of items in carousel, so you have to be sure to make the conditional statements.