How To Design Rounded Button In iPhone

Introduction
 
In this article I will create an Empty View application. We create an entire app using code. I mean we doesn't use an xib file here. In this app we make a rounded button and do an action on it.
 
To understand it we use the following.
 
Step 1
 
Open XCode by double-clicking on it.
 
Step 2
 
Create a New XCode Project by clicking on it.
 
Step 3
 
Now Select Empty View Application and click on Next.
 
Step 4
 
Now provide your Product Name and Company Identifier.
 
Step 5
 
Select the location where you want to save your project and click on Create.
 
Step 6 
 
First we import the framework "QuartzCore" that is required. 
 
Framework-in-iPhone.png

Step 7
 
Now here we write code:
 
AppDelegate.h
  1. #import <UIKit/UIKit.h>  
  2. #import <QuartzCore/QuartzCore.h>  
  3. @interface AppDelegate : UIResponder <UIApplicationDelegate>  
  4. @property(strong,nonatomic) UIButton *btn1,*btn2,*btn3;  
  5. @property (strong, nonatomic) UIView *lineView1,*lineView2,*lineView3,*lineView4;  
  6. @property (strong, nonatomic) UIWindow *window;  
  7. @end  
MapAppDelegate.m
  1. #import "AppDelegate.h"  
  2. @implementation AppDelegate  
  3. @synthesize btn1,btn2,btn3,lineView1,lineView2,lineView3,lineView4;  
  4. - (void)dealloc  
  5. {  
  6. [_window release];  
  7. [super dealloc];  
  8. }  
  9. -(void)click1  
  10. {  
  11. [btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
  12. [btn1 setTitle:@"I" forState:UIControlStateNormal];  
  13. }  
  14. -(void)click2  
  15. {  
  16. [btn2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
  17. [btn2 setTitle:@"Love" forState:UIControlStateNormal];  
  18. }  
  19. -(void)click3  
  20. {  
  21. [btn3 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
  22. [btn3 setTitle:@"India" forState:UIControlStateNormal];  
  23. }  
  24. -(void)click{  
  25. lineView1 = [[UIView alloc] initWithFrame:CGRectMake(859019810)];  
  26. lineView1.backgroundColor = [UIColor blackColor];  
  27. [self.window addSubview:lineView1];  
  28. [lineView1 release];  
  29. lineView2 = [[UIView alloc] initWithFrame:CGRectMake(1001001080)];  
  30. lineView2.backgroundColor = [UIColor blackColor];  
  31. [self.window addSubview:lineView2];  
  32. [lineView2 release];  
  33. lineView3 = [[UIView alloc] initWithFrame:CGRectMake(18510010200)];  
  34. lineView3.backgroundColor = [UIColor blackColor];  
  35. [self.window addSubview:lineView3];  
  36. [lineView3 release];  
  37. lineView4 = [[UIView alloc] initWithFrame:CGRectMake(27310010300)];  
  38. lineView4.backgroundColor = [UIColor blackColor];  
  39. [self.window addSubview:lineView4];  
  40. [lineView4 release];  
  41. btn1 = [[UIButton alloc]initWithFrame:CGRectMake(65,180,80,80 )];  
  42. btn1.backgroundColor = [UIColor greenColor];  
  43. btn1.layer.cornerRadius = 80/2;  
  44. [btn1 addTarget:self action:@selector(click1) forControlEvents:UIControlEventTouchUpInside];  
  45. [self.window addSubview:btn1];  
  46. btn2 = [[UIButton alloc]initWithFrame:CGRectMake(150,280,80,80 )];  
  47. btn2.backgroundColor = [UIColor redColor];  
  48. btn2.layer.cornerRadius = 80/2;  
  49. [btn2 addTarget:self action:@selector(click2) forControlEvents:UIControlEventTouchUpInside];  
  50. [self.window addSubview:btn2];  
  51. btn3 = [[UIButton alloc]initWithFrame:CGRectMake(238,398,80,80 )];  
  52. btn3.backgroundColor = [UIColor purpleColor];  
  53. btn3.layer.cornerRadius = 80/2;  
  54. [btn3 addTarget:self action:@selector(click3) forControlEvents:UIControlEventTouchUpInside];  
  55. [self.window addSubview:btn3];  
  56. }  
  57. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
  58. {  
  59. self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];  
  60. // Override point for customization after application launch.  
  61. self.window.backgroundColor = [UIColor whiteColor];  
  62. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
  63. [button setImage:[UIImage imageNamed:@"Sachin.png"] forState:UIControlStateNormal];  
  64. button.frame = CGRectMake(5.050.080.080.0);//width and height should be same value  
  65. button.clipsToBounds = YES;  
  66. button.layer.cornerRadius = 40;//half of the width  
  67. button.layer.borderColor=[UIColor yellowColor].CGColor;  
  68. button.layer.borderWidth=3.0f;  
  69. [button addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];  
  70. [self.window addSubview:button];  
  71. [self.window makeKeyAndVisible];  
  72. return YES;  
  73. }  
  74. @end  
Step 8
 
Finally we click on the run button to show the output.
 
Output
 
Output 1 in iPhone:

Output1-in-iPhone.png

When we click on this image view button, the Path with rounded buttons will be shown.
 
Output 2 in iPhone:

Output2-in-iPhone.png

Here the rounded button with path is shown.
 
Output 3 in iPhone:
 
Output3-in-iPhone.png
 
When we click on the Green button, an "I" will be shown on it.
 
Output 4 in iPhone:
 
Output4-in-iPhone.png
 
Here when we click on the Red button "love" will be shown on it.
 
Output 5 in iPhone:
 
Output5-in-iPhone.png
 
Here when we click on the Purple button "India" will be shown on it.

Up Next
    Ebook Download
    View all
    Learn
    View all