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 条评论
登录 后参与评论

相关文章

来自专栏全沾开发(huā)

总结CSS3新特性(选择器篇)

总结CSS3新特性(选择器篇) CSS3新增了 ? 嗯- -21个选择器,脚本通过控制台在这里运...

2694
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

714
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之三——颜色与色彩空间

    颜色的实质是表示颜色的二进制数据,如果没有确定的规则,则这些二进制数据完全没有意义。所谓色彩空间,即是表示这些颜色数据信息是如何解释的。同样的一张图片,...

603
来自专栏菩提树下的杨过

css2.1中的属性选择器(css高手请绕道)

早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.h...

18510
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划...

2748
来自专栏代码世界

jQuery

jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

3425
来自专栏云端架构

【云端架构】前端 css print 用法

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大...

4278
来自专栏Java后端技术

获得同级iframe页面的指定ID元素的几种实现方法

注:window.frames("iframe的name")、document.frames("iframe的name")和window.frames["ifr...

872
来自专栏微服务

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

3378
来自专栏前端知识分享

第75天:jQuery中DOM操作

还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

612

扫码关注云+社区