Logicsaurus Rex Logicsaurus Rex - 1 year ago 124
iOS Question

Draw line in UIButton that already has png image in it

I know there are lots of questions/answers about drawing in views, but this is kind of a special case because it's combining several features.

  1. I'm using a UIButton

  2. It has a type of Custom

  3. It has a png image

So I need to keep all that, but in addition, I need to draw a line along the bottom edge (perhaps inset a few points), as shown in the picture below.

This is BEFORE the line is applied

enter image description here

This is AFTER the line is applied

enter image description here

And here are the specs for one of the buttons

enter image description here

Answer Source

If you want draw this on xib, you must custom your button.

@interface DrawLineButton()
   @property (nonatomic, strong) IBInspectable UIColor* fillColor;
   @property (nonatomic, assign) IBInspectable CGFloat  toLeft;
   @property (nonatomic, assign) IBInspectable CGFloat  toRight;
   @property (nonatomic, assign) IBInspectable CGFloat  toBottom;
   @property (nonatomic, assign) IBInspectable CGFloat  lineHeight;
@implementation DrawLineButton
   // Only override drawRect: if you perform custom drawing.
   // An empty implementation adversely affects performance during animation.
   - (void)drawRect:(CGRect)rect {
   [super drawRect:rect];
    CGRect pathRect = CGRectMake(_toLeft,
                         self.bounds.size.height - _toBottom - _lineHeight,
                         self.bounds.size.width - _toLeft - _toRight,
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:pathRect];
    path.lineWidth = _lineHeight;
    UIColor* fillColor = _fillColor;
    [fillColor set];
    [path fill];
    [path stroke];
@interface DrawLineButton : UIButton

Then add the custom button to xib like this: enter image description here

I hope to help you, thanks!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download