In tutorials by No Comments

Creating Horizontal Scrollable Tab bar iOS

Tutorial on how to create a horizontal scrollable tab bar using Objective-C

We have seen lot of tab bar based iOS Applications and in those applications, maximum number of tabs that we are allowed to show is five, if anything above than that will be added as a more items and it will presented in the TableViewController. If needed we can edit those displayable tabs.

Download Source

In this tutorial, we are going to see on how to implement the scrollable buttons or scrollable tab bar as shown below

scrollable tab bar ios

This kind of scrollable interaction gives the user access to all the controls in a single scroll. It gives an intuitive experience to the user and makes very comfortable to use the app.

Step by Step implementation of Scrollable Tab bar

Step 1

  • Create a SingleViewApplication and add UIScrollView from the Object Library
  • In the .h ViewController, create an IBOutlets for UIScrollView


Step 2

  • In the viewDidLoad of the .m of the ViewController where all the action of adding buttons to the UIScrollView goes.
  • Set the initial offset of the ScrollView and also define the array to hold the set of images to be displayed in the UIScrollView

  • Define a variable “count” to assign the tag to the buttons for identification
  • Declare the tempObject to get to know the status of which button has been tapped
  • Use for loop to get all the array values defined above and in the loop initialise the button, assign the image and tag to button
  • Add the button to the ScrollView and increase the offset value so that we can place the button next to each other
  • Don’t forget to set the Content size of the ScrollView


Step 3 

  • Define the action method for the button


Step 4

Ready steady go, Build and Run the project.

screenshot scrollable buttons

Customise the image accordingly like the image shown below.

Screen Shot 2013-12-29 at 4.53.21 PM

That’s it from this tutorial and keep watching this space for more…………….

Download Source

Tagged with: