Kevin is a Software Developer with 20 years experience designing and building business intelligence and system integration solutions.
The iOS SDK and Xcode offers the basics in terms of UI controls. Two of the most used UI controls are checkboxes and radio buttons which are sorely lacking in the UIControls that comes with the iOS SDK. Fortunately, the Cocoa Touch framework offers some excellent enclosed APIs provide the functionality needed to create checkboxes and radio buttons quickly.
This tutorial will show you with little code how to practically create checkboxes and radio buttons. Although very feasible to create completely in code, I will be using predefined images of the checkboxes and radio buttons which are extremely easy to make with an assortment of graphic tools. In any software application or web applications in production, developers will include icons and images to help them create the look and feel that is required. So it makes common sense to use images to mimic the checkboxes and radio buttons in an iOS software application.
Before getting to the application which will only require minute coding, I would like to show how to style some checkboxes and radio buttons. For this example, I will be using Powerpoint, but the same effect can be achieved with a variety of graphic tools which can include Apple’s Keynote or Google’s Presentation or Drawing. There is also Open Office that can be used or Gimp to name a few.
The first part of creating a checkbox is to draw two squares. This is easy in Powerpoint. Add two square shapes to a blank slide. Format them as you wish but in one of them add two lines crisscrossed like in the following screenshot. Right click on each image or shape and select “Save as Image” which will allow you to save these images as a png file.
Likewise for the radio buttons, first draw a circle, about .38 inches in diameter. Then draw a second circle shape inside the first making sure that the second circle is well centered within the first. Format, the circles, are you like to blend with your app. Next, select the first two and right click on the two images and select “Grouping” from the context menu and “Group” to group these two images together to form a cohesive image. Then make a copy of this new image. In the second image, select the inner circle and change the fill to black or some other dark color. Finally, save the two radio buttons as before to the file system. I have provided a screenshot of my radio buttons, but you can make yours that best suits your needs.
Build the Application
Create a Single View iOS (iPhone) application. Once the project is setup, select the project root group and add a new group by right clicking on this project node and selecting new group. Name it Images. Then Right click on this new group and select “Add Files to ….” command and browse to the directory where you save your checkbox and radio button images. Click “Add” to copy them to the project.
In the header file of the ViewController custom class add three UIButton instance variables: checkbox, radiobutton1 and radiobutton2 as in the source code listing below. These will be the checkbox and radio buttons in our scene later. Also add two instance methods: checkboxSelected and radiobuttonSelected. I will explain these in the implementation file.
viewDidAppear - Checkboxes
First synthesize the variables using the @synthesize directive. This is the same as creating gettter and setters. You can also assign a new name to the variable if you like as :
@synthesize checkbox = __checkbox;
However for this project I am performing a simple synthesis. Next I would like to draw your attention to the viewDidAppear method in the ViewController.m code listing below, which doesn’t in the default implementation but is a standard instance method in the UIViewController class. So add it here as in the ViewController.m code listing below as previously cited. In this method we are going to initialize the checkbox UIButton using the initWithFrame property. This property takes a CGRectMake object as input. As you may know the CGRectMake object has four parameters: x, y, width and height. I will set these parameters to 0, 0, 75, 75 respectively. This will place the button in the top left corner of the scene and make the button square with a size of 75x75 pixels. Remember users need to be able to use their fingers to select these buttons.
Next we will assign the checkbox images: CheckboxOff.png and CheckboxOn.png unless you named yours differently to the background and also define the which state the button must be at in order to set the background. For the “off” state, we will set the state to UIControlStateNormaland for the “on” set the state to UIControlStateSelected. The next line will set up the action events and what to do when the button is clicked. So add the addTarget with the @selector(checkboxSelected:) value. Remember to add the “:” colon at the end of the method name otherwise you will get a runtime error. The second parameter is the “forControlEvents” which event will trigger the action. In our case we will use the “UIControlEventTouchUpInside” which will trigger when the button is released.
All that is needed now is to add the button to the view which we will do with the addSubview property of the ViewController. Refer to the viewDidAppear method in the code listing below for a visual aid to this text.
ViewController.m - viewDidAppear For Checkboxes
However if you run the app now, you will CheckboxOff.png image but it won’t do anything because we still have to add the code to the checkboxSelected method. The method is quite simple. It checks to see if the button is selected using the sender argument and the isSelected property. If its selected then set the property to NO otherwise set it to YES. This will trigger the background images to switch from one to the other.
ViewController.m - checkboxSelected
viewDidAppear - Radio Buttons
The radio buttons follow the same pattern with a few exceptions. First instead of one button, there are two but the code is identical except for the CGRectMake method. The first radio button has the following values: 0, 80, 75, 75. This means that the first radio button will placed next to the left edge of the scene but it will be 80 pixels from the top edge. the square will occupy the same space. The second radio button will have the following CGRectMake values: 80, 80, 75, 75. This means that set next to the first radio button and will occupy the same space. The other exception is that I added the tag property to the radio button UIButtons. We will use these in the radiobuttonSelected next.
Of course the value of the addTarget will be different since the buttons will call the radiobuttonSelected method when the radio buttons are touched. Add each radio button to the view with the addSubView property. Have a look at the provided code excerpt on the radio buttons to glean a better understanding on how to setup the code.
ViewController.m - viewDidAppear for Radio Buttons
Finally lets look at the radiobuttonSelected method. It uses the sender’s tag value with the switch to determine which radio button is being pushed. Then it simply sets the isSelected property depending on which button is pushed, toggling from YES to NO and back again depending on the current value of the isSelected property.
The complete code is provided as always and play the included video to get a feel on how the code behaves at runtime. As you can see creating custom radio and checkboxes is very easy t do.
ViewController.m - radiobuttonSelected
This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.
© 2012 Kevin Languedoc
Aditya on February 03, 2017:
Aravind on January 16, 2017:
thanks for the tutorial it helped for me
Padma on January 09, 2017:
Very useful thanks a lot
raja on January 06, 2017:
i want radio button in tableview cell
sushant jagtap on December 22, 2016:
thank you for this awesome and simple solution...
hitesh rakholiya on August 07, 2016:
@dubai on November 02, 2015:
This is what is was looking for a long time. Glad i found this blog soon which solved my problem in minutes. Thank you so much for this.
Kevin Languedoc (author) from Canada on May 26, 2015:
Thanks for the feedback
jaqen on May 25, 2015:
hi, thx for this tutorials. btw what if i had more than 5 radio, should i type all of that? thx
Mittal on May 19, 2015:
pradeep on March 30, 2015:
this is very useful tutorials.
pange on July 07, 2014:
I'm new to iPhone app development and I found that this tutorial is one of great resource that I got :D
Kevin Languedoc (author) from Canada on November 30, 2013:
Thanks for the great feedback
nathankalam on November 28, 2013:
This is very useful. it would appreciate for multiple check box. Thanks for everything
Kevin Languedoc (author) from Canada on August 29, 2013:
Santosh on August 29, 2013:
Thanks a lot..crisp and clear
Kevin Languedoc (author) from Canada on March 14, 2013:
Thank you Falgun Ruparella
Falgun Ruparelia on March 07, 2013:
It really helped a lot.... Good explanatory article ...
Kevin Languedoc (author) from Canada on January 20, 2013:
Guntarion on January 13, 2013:
This is very useful, kevin languedoc. Thank you verymuch! :-)
Kevin Languedoc (author) from Canada on January 08, 2013:
Great I am glad I was able to help
Vibhs on January 08, 2013:
That is what I've been looking for long time...