1

I have a basic task, as part of my 1 week training in iOS objective-c. My manager told me that it is okay not to care about the design of the ui, but I would like to impress him as much as possible lol. So I'm quite pushing myself to the limit.

Is it possible to code the button to make it hexagon? I tried searching on google as well as on stackoverlfow, but found related question for web development and android.

Here is my progress: enter image description here

Here is the UI that I wanna make or copy: enter image description here

user5295097
  • 31
  • 7
  • 1
    You can use UIBezierPath to draw your hexagones. You can set it then as an UIImage, and add them to the background of each buttons you want. You also have to custom UIButton if you want that outside the hexagone, it doesn't get the "touch". – Larme Sep 04 '15 at 07:12
  • Thanks Larme. I'll go search for that. But if there will be someone who will give me just a clue how to do what you're saying, it would be great! By the way, I'm doing the ui programmatically. – user5295097 Sep 04 '15 at 07:15
  • Take a refrence from [PBJHexagon](https://github.com/piemonte/PBJHexagon), as it will be useful for your requirement – Paresh Navadiya Sep 04 '15 at 07:19
  • Follow [How to draw a filled path/shape in different colors](http://stackoverflow.com/questions/17415730/how-to-draw-a-filled-path-shape-in-different-colors), this will help alot. – Pawan Rai Sep 04 '15 at 07:19
  • I like the answer of Paresh. However, I really need a clue how to implement this as a button. It is my 2nd day in using objective-c. Yesterday, I used a story board. And from now on, I'll be making my UIs by coding it. – user5295097 Sep 04 '15 at 07:46
  • 1
    quick solution for beginners is that to save an _image_ (png, jpg) and add it as `backgroundImage` to the button – don't overcomplicate it, sometimes the simpler is better, maybe later you can think in writing a code with creating a `UIBezierPath` but I don't that is the time for you yet. – holex Sep 04 '15 at 08:27

1 Answers1

0

Make a subclass of UIButton and override drawRect method.

- (void)drawRect:(CGRect)rect
{
    float polySize = 60; // change this

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGAffineTransform t0 = CGContextGetCTM(context);
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);

    //Begin drawing setup
    CGContextBeginPath(context);
    CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
    CGContextSetLineWidth(context, 2.0);

    CGPoint center;

    //Start drawing polygon
    center = CGPointMake(60, 60.0);
    CGContextMoveToPoint(context, center.x, center.y + polySize);
    for(int i = 1; i < 6; ++i)
    {
        CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
        CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
        CGContextAddLineToPoint(context, center.x + x, center.y + y);
    }

    //Finish Drawing
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathStroke);
    CGContextRestoreGState(context);
}
iAnurag
  • 9,286
  • 3
  • 31
  • 48