Logicsaurus Rex Logicsaurus Rex - 1 month ago 14
Objective-C Question

Draw line in UIButton

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

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; @end @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, _lineHeight); UIBezierPath* path = [UIBezierPath bezierPathWithRect:pathRect]; path.lineWidth = _lineHeight; UIColor* fillColor = _fillColor; [fillColor set]; [path fill]; [path stroke]; } @end //.h IB_DESIGNABLE //Must this @interface DrawLineButton : UIButton @end Then add the custom button to xib like this: enter image description here

I hope to help you, thanks!

Comments