首页 > 代码库 > iOS圆形按钮和图片在上标题在下按钮的实现
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)contentRect15 {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)setComPareBtnAttribute27 {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上，欢迎交流。原创，未经允许，禁止转载。
iOS圆形按钮和图片在上标题在下按钮的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。