UISlider: Biggering It!

Medium

Posted On by John Slater in The Basics, Tutorials

In this tutorial we’re going to cover the UISlider, a grand bit of invention that allows you to output a value as you slide up and down. This user interface element is typically seen in apps with volume controllers such as the Music app or Spotify.

The slider allows the user to move up and down to a value without having to input a number but is also great for tactile responses like volume where the user can slide up to increase the volume or down to decrease it, simple stuff but a powerful element nevertheless.

We’re going to create a simple resizing app using the UISlider, the app will have one purpose, slide up to increase a box size and down to decrease it but it will give you an understanding of the element and how to read its responses.

1. Creating Xcode Project

Create a new view-based application project and call the project “BiggerIt” because that’s what we’re going to do, make a box bigger with grammatical errors.

2. Create The Interface

Open your XIB file called BiggerItViewController.xib which will open the interface builder side of the project and allow you to drop in all the elements you’ll need.

Grab the UISlider element from the objects library on the right of your screen and drop this into the centre of your screen.

Next grab a button from the object library and drop this just above the slider. On this button choose “Custom” from the drop down and change the background to white (or any colour so we can see it) and then change it’s size to about 280.

Now select the UISlider element on your screen and set the minimum value to 0 and the maximum to the width of your button, in this case 280.

3. Create An Action

Now we have the interface setup and looking super sexy like Megan Fox, or someone equally as attractive, maybe Scarlett Johansson or even a British women like Kelly Brook or even drop into the Twilight area and throw in Ashley Greene or whatever her name is, i don’t know, i don’t watch Twilight because i’m not a teenage girl, anymore. Anyway i digress, the point is the interface looks nice but not as nice as the aforementioned.

We’re now going to start the coding for the app. We’ll start by creating an action for the slider to call as it is being changed. We’re gonna call the action biggerIt and it’s function is to, when called, take the current value of the slider and make this the width value of the button.

Open up your BiggerItViewController.m implementation file and start a new action. I typically do this just below the viewDidLoad action.


-(IBAction)biggerIt:(UISlider*)sender{

}

You’ll notice that we’ve added an extra bit of code to the end of the action name. The purpose of this is so we can pull back values from the sender, in this case the value of the slider, and then do stuff with that value. Typically you would have something like (IBAction)biggerIt:(id)sender, however if we want to pull back values that are only part of a UISlider object we need to explicitly define what object we will receive.

Getting The Value Of Slider

In the action we will need to capture the current value of the slider so we can increase the size of the button. As i mentioned earlier we will actually pass through the value as part of the sender and pulling the value from the sender is very simple.

One thing you will need to understand is that the UISlider will actually pass back a float (number with decimals) and not an int (whole number, including negatives) so we need to ensure we correctly define the variable, which in this case we will call sliderValue.

Inside the action add the following line…


float sliderValue = [sender value];

… this defines sliderValue as the value of the UISlider.

Now the action will begin pulling the value of the slider and we can start doing things with this value. We’ll come back to this action shortly however as we now need to define some objects.

4. Defining Objects & Actions

As we’ve covered in previous tutorials you must always define objects in your interface file. This project only uses one object that we will need to reference which is for the button.

Note: If you are using the new Xcode you should notice that your interface/header file, BiggerItViewController.h, will look something like below…


@interface BiggerItViewController : UIViewController

@end

… however we will need to alter the default to look like this…


@interface BiggerItViewController : UIViewController {

}

@end

Inside the curly braces is where we will define our objects and outside is where we define our actions and properties.

Define Object

The object we need to define is for the button which i’ve called biggerBlock. This object is a UIButton.


IBOutlet UIButton *biggerBlock;

This tells us that (working backwards) the object biggerBlock is a UIButton and is to be used as an IBOutlet. The IBOutlet will let us link our button to the object in Interface Builder, hence the IB prefix.

Define Action

We have one action in this project called biggerIt which is what we created earlier. To define an action the easiest thing to do is go back to your BiggerItViewController.m and copy the first line of the new action and paste this on a new line outside of the curly braces and throw a semi-colon afterwards to end that line.


-(IBAction)biggerIt:(UISlider*)sender;

Define Object As Property & Synthesize It

To appease the memory gods and just for generally good code we need to define the newly created object as a property. The @property in Objective C tells Xcode, when compiling, to automatically create the getters and setters for you.


@property(nonatomic, retain) UIButton *biggerBlock;

The retain attribute tells Xcode that we want our variable or object to retains it’s input value.

Now we have defined a property we need to synthesise this property in the implementation file (BiggerItViewController.m). Just below the @implementation line we need to add in the following.


@synthesize biggerBlock;

Check Your Code

With all this done your new BiggerItViewController.h file should look something like this…


@interface BiggerItViewController : UIViewController {

    IBOutlet UIButton *biggerBlock;

}

-(IBAction)biggerIt:(UISlider*)sender;

@property(nonatomic, retain) UIButton *biggerBlock;

@end

5. Back To The Action

Okay we’re almost done coding, now all we need to do is finish off that action we were creating in step 3.

The next step in our action is to make the button resize when the action is called. We’re already pulling in the value of the scroller so lets resize the button programmatically.


[biggerBlock setFrame:(CGRectMake) ];

This is what we use to resize an interface object. The method expects to receive a CGRectMake object with new sizes and positioning coordinates. Obviously we won’t be adjusting the x or y coordinates for this project so we’ll add some code to keep them exactly the same.

The CGRectMake object is formatted like below…


CGRectMake(x, y, w, h)

The first and second values are for the x and y propositioning of the object and the next pair are for size, width and height. Again the height will always remain the same, so this value will be fixed.

If we put together a CGRectMake like the one below, you will find that when you move the slider the box will jump straight to the top of the screen and would expand as we want.


CGRectMake(0, 0, sliderValue, 50)

However we do not want anything to move, only the sizing, so we will need to pull in the current x, y and height values.

To get the current x you use…


biggerBlock.frame.origin.x

To get the current y you use…


biggerBlock.frame.origin.y

And to get the current height you use…


biggerBlock.frame.size.height

So our new CGRectMake should look something like…


CGRectMake(biggerBlock.frame.origin.x, biggerBlock.frame.origin.y, sliderValue, biggerBlock.frame.size.height)

So now we can put this inside the new “setFrame” parameter for the biggerBlock object to look something like this…


[biggerBlock setFrame:CGRectMake(biggerBlock.frame.origin.x, biggerBlock.frame.origin.y, sliderValue, biggerBlock.frame.size.height)];

And that is everything for the the coding stage. To check you have followed correctly i have put the completed action code below.


-(IBAction)biggerIt:(UISlider*)sender{
    float sliderValue = [sender value];

    [biggerBlock setFrame:CGRectMake(biggerBlock.frame.origin.x, biggerBlock.frame.origin.y, sliderValue, biggerBlock.frame.size.height)];
}

6. Linking Action and Object

We’re almost there, all that is left is linking up our slider to our action and our biggerBlock object to our button.

Open BiggerItViewController.xib, now Ctrl+Click+Drag from “Files Owner” to your button and select biggerBlock from the popup. This will pair your defined object with your button.

Now Ctrl+Click+Drag from your slider to your “Files Owner” and choose biggerIt: which will link your slider to your action. Now when your slider is moved it will call your action.

7. Run & Test

Now hit Run (Cmd+R) and test your new app in the iPhone Simulator. When you increase the slider up goes the button.

Final Thoughts

So we’ve delved into the depths of the UISlider, an element i have personally never used in an app, and created something interactive. With what you have learned here you could go ahead and create something on top of this, maybe an image zoom, or a text size increaser. I think setting your sights on furthering what you learnt here is the best way to learn.

If you have hit a bug you cannot solve or you have created this project and made it better get in touch. I’ll try and help as best i can.

Download The Xcode Project

You can download the Xcode Project for this tutorial to help you better understand the code and syntax.

Download Now!

About John Slater

I'm a professional web designer professionally, in a professional way, but also love iOS Development and two years ago is when i threw myself into the deep end and learnt enough to create a few apps. While i develop my skills i want to help others learn iOS development, because i'm kind like that. @slaterjohn