CODEWITHSUNDEEP
iosobjective-cxcodeuibuttoncore-graphics
iReddy
iReddy

Reputation: 467

How to create Diamond shape Button using Objective-C iOS

I need to design diamond shape buttons like below image. I have tried with two UIViews and I'm able to draw diamond shape on top of the views by subclassing the UIView.But the problem is these two views are overlapping..!

Here is the method i have used :

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 4.0);
    CGContextSetStrokeColorWithColor(context, 
      [UIColor blueColor].CGColor);
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 150, 150);
    CGContextAddLineToPoint(context, 100, 200);
    CGContextAddLineToPoint(context, 50, 150);
    CGContextAddLineToPoint(context, 100, 100);
    CGContextStrokePath(context);
}

enter image description here

Upvotes: 0

Views: 1174

Answers (3)

freelixa
freelixa

Reputation: 111

this is what is look like in swift in case anyone wondering

var tr = CGAffineTransformIdentity tr = CGAffineTransformScale(tr, 0.8, 1) tr = CGAffineTransformRotate(tr, M_PI_4) self.diamond.transform = tr

but the problem is that the text also effected by it

enter image description here

Upvotes: 0

fabe
fabe

Reputation: 718

You can easily transform a square to a diamond. Assuming that you have a sqaure button called diamond the transfomation below results in a diamond.

CGAffineTransform tr = CGAffineTransformIdentity;
tr = CGAffineTransformScale(tr, 0.8, 1);
tr = CGAffineTransformRotate(tr, M_PI_4);
self.diamond.transform = tr;

enter image description here

Upvotes: 2

matt
matt

Reputation: 534925

You can't avoid the overlapping of the views. Views are rectangular shaped!

What you can do is avoid the tappability of the area outside the diamond drawing. You would do that by munging the hit-testing for these buttons, so that button is "touched" only if the user taps inside the diamond.

Upvotes: 2

Related Questions