iOS圆形按钮和图片在上标题在下按钮的实现

Posted 2020-08-04

　　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上，欢迎交流。原创，未经允许，禁止转载。