iOS圆形按钮和图片在上标题在下按钮的实现
1 圆形按钮的实现（点击区域也为圆形）
系统UIButton自带的方式为矩形，通过设置layer层可以将图片裁剪为圆形，但是点击区域仍是矩形。为解决这个为题，本文的方法是，创建UIButton子类，重写UIButton的- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event的方法。代码如下：
1 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 2 { 3 BOOL flag = [super pointInside:point withEvent:event]; 4 if (flag) { 5 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds]; 6 if ([path containsPoint:point]) { 7 return YES; 8 } 9 return NO; 10 } 11 return NO; 12 }
该方法的思想是:拦截触摸点击事件响应函数，利用UIBezierPath设定点击区域，在点击区域外的事件不处理。
2 图片再上标题在下按钮的实现
iOS自带的UIButton系统风格为：图片在左，标题在右，有时候需求却是图片再上、标题再下。如果重新定义一种view，则相应的相应事件都要自己实现，过于繁复。本文的方法是，创建UIButton子类，重写UIButton的两个系统方法。具体为：- (CGRect)imageRectForContentRect:(CGRect)contentRect 和 - (CGRect)titleRectForContentRect:(CGRect)contentRect。通过关键词可以发现，前者重写了按钮中图形的位置，后者重写了按钮中标题的位置。代码如下：
1 - (CGRect)imageRectForContentRect:(CGRect)contentRect 2 { 3 CGFloat imageY = 2.5; 4 CGFloat imageW = 30; 5 CGFloat imageH = 30; 6 CGFloat imageX = (contentRect.size.width - imageW)/2.0; 7 8 CGRect imageRect = CGRectMake(imageX, imageY, imageW, imageH); 9 return imageRect; 11 } 13 14 - (CGRect)titleRectForContentRect:(CGRect)contentRect 15 { 16 CGFloat titleX = 0; 17 CGFloat titleY = 30; 18 CGFloat titleW = contentRect.size.width; 19 CGFloat titleH = contentRect.size.height - titleY; 20 21 CGRect titleRect = CGRectMake(titleX, titleY, titleW, titleH); 23 return titleRect; 24 } 25 26 - (void)setComPareBtnAttribute 27 { 28 [self setTitleColor:TimerColor forState:UIControlStateNormal]; 29 [self setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted]; 30 31 self.titleLabel.font = [UIFont systemFontOfSize:11]; 32 self.titleLabel.textAlignment = NSTextAlignmentCenter; 33 34 }
视图布局采用的是固定方式，第三个函数作用是设置多个相同类型按钮的相同属性。
3 效果图暂无，后续补上。源代码后期放到Github上，欢迎交流。原创，未经允许，禁止转载。
