CODEWITHSUNDEEP
iosobjective-c
Joao
Joao

Reputation: 619

Programatically create button with 2+ borders

I need to create a button with 2+ borders, as in the image below. Could anyone point out a direction to do it, without recurring to images?

Thank you.

enter image description here

Upvotes: 0

Views: 110

Answers (3)

Arun
Arun

Reputation: 3404

@joao,

The following is the core code you can further tune the code as per your need,

.h file

#import <UIKit/UIKit.h>

@interface OD : UIButton

@end

.m file

#import "OD.h"

@implementation OD
-(void)drawRect:(CGRect)rect
{
//    self.layer.borderColor = [UIColor blackColor].CGColor;
    UIBezierPath *aPath = [UIBezierPath bezierPath];
    [aPath moveToPoint:CGPointMake(2, 2)];

    // Draw the lines.
    [aPath addLineToPoint:CGPointMake(rect.size.width -4, 2)];
    [aPath addLineToPoint:CGPointMake(rect.size.width -4,rect.size.height-4 )];
    [aPath addLineToPoint:CGPointMake(2, rect.size.height-4)];
    [aPath addLineToPoint:CGPointMake(0, 0)];

    [[UIColor greenColor] setStroke];
//    [[UIColor redColor] setFill];
    aPath.lineWidth = 5;

    [aPath fill];
    [aPath stroke];
    [aPath closePath];

    UIBezierPath *bPath = [UIBezierPath bezierPath];
    [bPath moveToPoint:CGPointMake(8, 8)];

    // Draw the lines.
    [bPath addLineToPoint:CGPointMake(rect.size.width -8, 6)];
    [bPath addLineToPoint:CGPointMake(rect.size.width -8,rect.size.height-8 )];
    [bPath addLineToPoint:CGPointMake(8, rect.size.height-8)];
    [bPath addLineToPoint:CGPointMake(8, 8)];

    [[UIColor redColor] setStroke];
    //    [[UIColor redColor] setFill];
    bPath.lineWidth = 5;

    [bPath fill];
    [bPath stroke];
    [bPath closePath];

    self.layer.borderWidth = 2;

//    self.layer.
}
@end

Upvotes: 0

spaleja
spaleja

Reputation: 1435

Other Option:

  1. Create a Black color View
  2. Create a red color view inside first view
  3. Create gray color view smaller than red view inside first view
  4. Add button with white background having size smaller than gray view inside first view

Upvotes: 1

Vijay yadav
Vijay yadav

Reputation: 1230

To add shadows and border is simple.

1) Add the QuartzCore framework to your target.

2) Import the framework header in the class where you want to add borders and shadows. (Or if you have custom class for the button then you can simple import this framework in that class.)

3) To add the border to the button use this code (where button is an IBOutlet connected with the button in interface):

[self.button.layer setBorderWidth:3.0];
[self.button.layer setBorderColor:[[UIColor blackColor] CGColor]];

4) To add the shadow to the button use the following code:

[self.button.layer setShadowOffset:CGSizeMake(5, 5)];
[self.button.layer setShadowColor:[[UIColor blackColor] CGColor]];
[self.button.layer setShadowOpacity:0.5];

Upvotes: 1

Related Questions