码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-08-26 18:17:17      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/bravely/p/5811339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!