iOS-自定义button详解

在开发中经常会遇到一种情况,就是按钮的UI布局(上图下文、左文右图等)和系统自带的布局(左图右文)不一样 这种情况:一种解决办法是创建一个button并在上面加一个imageView和一个label,但是这样遇到图片的位置会根据文字的长度变化的情况,会相当麻烦;另一种解决办法就是自定义一个button,这种方法更加简洁,同时处理点击事件的逻辑也更方便

  1. 首先创建一个类,继承自UIButton
  2. 初始化方法
+(instancetype)buttonWithType:(UIButtonType)buttonType{
    CCButton *ccButton = [super buttonWithType:buttonType];
    if (ccButton) {
        ccButton.titleLabel.textAlignment = NSTextAlignmentCenter;
        // 开启button的imageView的剪裁属性,根据imageView的contentMode属性选择是否开启
        ccButton.imageView.layer.masksToBounds = YES;
        ccButton.layer.masksToBounds = YES;
    }
    return ccButton;
}
  1. 重写button的几个边界方法,return语句后面的数字,是我打断点得到这几个函数的执行顺序
// 返回背景边界(background)
-(CGRect)backgroundRectForBounds:(CGRect)bounds{
    NSLog(@"背景边界:%@",NSStringFromCGRect(bounds));
    return CGRectMake(0, 0, 200, 10);// 6 7  14
}
// 返回内容边界 标题+图片+标题与图片之间的间隔(title + image + the image and title separately)
-(CGRect)contentRectForBounds:(CGRect)bounds{
    NSLog(@"内容边界:%@",NSStringFromCGRect(bounds));
    return CGRectMake(0, 0, 10, 10); // 1 3 5 8 10 12 15 17 19
}
// 返回标题边界
-(CGRect)titleRectForContentRect:(CGRect)contentRect{
    NSLog(@"标题边界:%@",NSStringFromCGRect(contentRect));
    return CGRectMake(0, 0, 200, 30); // 2 11 18
}
// 返回图片边界
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
    NSLog(@"图片边界:%@",NSStringFromCGRect(contentRect));
    return CGRectMake(0, 0, 100, 60); // 4 9 13 16 20
}

输出如下图:

刚开始对这几个函数不是很明白,经过多次调试,才明白各自的功能:

  • -(CGRect)backgroundRectForBounds:(CGRect)bounds 该函数返回的是背景view的大小,参数bounds是button的大小,即button.frame
-  如果:`return bounds`

此时背景view和button的大小相同,是默认的大小 - 如果:return CGRectMake(0, 0, 50, 50),且button.frame = CGRectMake(0, 0, 100, 100) 此时背景view的大小是{{0,0},{50,50}},而button的大小是{{0,0},{100,100}},在背景view之外的button是透明的且不能改变颜色,它可以响应点击事件 - 如果:return CGRectMake(0, 0, 100, 100),且button.frame = CGRectMake(0, 0, 50, 50) 此时分两种情况,一种是layer.masksToBounds = YES,button的背景view和frame都是{{0,0},{50,50}};另一种layer.masksToBounds = NO,button的背景view的大小是{{0,0},{100,100}},button.frame大小是{{0,0},{50,50}},此时界面显示是一个{{0,0},{100,100}}的button,但是只有button的{{0,0},{50,50}}范围内才会响应点击事件

  • -(CGRect)contentRectForBounds:(CGRect)bounds 该函数返回内容view的大小,内容view包括title view 、image view 和二者之间的间隔,参数bounds是button的大小,即button.frame
    • 如果:return bounds 此时在返回title view边界和image view边界函数中的contentRect参数的值为button.bounds
    • 如果:return CGRectMake(0, 0, 100, 100) 此时在返回title view边界和image view边界函数中的contentRect参数的值为{{0,0},{100,100}}
  • -(CGRect)titleRectForContentRect:(CGRect)contentRect 该函数返回标题view的大小,参数contentRect由函数-(CGRect)contentRectForBounds:(CGRect)bounds确定
  • -(CGRect)imageRectForContentRect:(CGRect)contentRect 该函数返回图片view的大小,参数contentRect由函数-(CGRect)contentRectForBounds:(CGRect)bounds确定
  1. 最后写一个上图下字的示例,这只是一个简单的例子,具体情况可以根据使用场景调整
// 该自定义button的背景和内容view都和它的frame一样大,所以可以不用重写-(CGRect)backgroundRectForBounds:(CGRect)bounds和-(CGRect)contentRectForBounds:(CGRect)bounds这两个函数
// 返回标题边界
-(CGRect)titleRectForContentRect:(CGRect)contentRect{
      // 这contentRect就是button的frame,我们返回标题view宽和button相同,高为20,在button的底部
      return CGRectMake(0, contentRect.size.height-20, contentRect.size.width, 20);
}
// 返回图片边界
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
      // button的image view 是正方形,由于title占了20的高了,所以取height - 20和width中最小的值作为image view的边长
      // 如果图片的位置是根据文字来布局的,这里可以通过self.titleLabel.text拿到title,再计算出图片的位置
      CGFloat imageWidth = MIN(contentRect.size.height - 20, contentRect.size.width);  
      return CGRectMake(contentRect.size.width/2 - imageWidth/2, 0, imageWidth, imageWidth);
}
  1. demo地址:https://github.com/cdcyd/CommonControlsCollection

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2707
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2762
来自专栏魂祭心

原 canvas绘制clock

4064
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3859
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4848
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6808
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2152

扫码关注云+社区