iOS自定义控件开发梳理

在日常iOS开发中,系统提供的控件常常无法满足业务功能,这个时候需要我们实现一些自定义控件。自定义控件能让我们完全控制视图的展示内容以及交互操作。本篇将介绍一些自定义控件的相关概念,探讨自定义控件开发的基本过程及技巧。

UIView

在开始之前我们先介绍一个类UIVew,它在iOS APP中占有绝对重要的地位,因为几乎所有的控件都是继承自UIView类。
UIView表示屏幕上的一个矩形区域,负责渲染区域内的内容,并且响应区域内发生的触摸事件。
在UIView的内部有一个CALayer,提供内容的绘制和显示,包括UIView的尺寸样式。UIView的frame实际上返回的CALayer的frame。
UIView继承自UIResponder类,它能接收并处理从系统传来的事件,CALayer继承自NSObject,它无法响应事件。所以UIView与CALayer的最大区别在于:UIView能响应事件,而CALayer不能。
更详细的资料:
https://developer.apple.com/reference/uikit/uiview
http://www.cocoachina.com/ios/20150828/13244.html

两种实现方式

在创建自定义控件时,主要有两种实现方式,分别是纯代码以及xib。接下来我们用这两种方式分别演示一下创建自定义控件的步骤。
我们实现一个简单的demo ,效果如下,封装一个圆形的imageView。


使用代码创建自定义控件

使用代码创建自定义控件,首先创建一个继承自UIView的类

实现initWithFrame:方法。在该方法中,设置自定义控件的属性,并创建、添加子视图:

-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
        _imageView.layer.masksToBounds = YES;
        _imageView.layer.cornerRadius = frame.size.width/2;
        [self addSubview:_imageView];
        
    }
    return self;
}

如果需要对子视图重新布局,需要调用layoutSubViews方法:

-(void)layoutSubviews {
    [super layoutSubviews];
    _imageView.frame = self.frame;
    _imageView.layer.cornerRadius = self.frame.size.width/2;
    
}

layoutSubviews是调整子视图布局的方法,官方文档如下

You should override this method only if the autoresizing and constraint-based behaviors of the subviews do not offer the behavior you want.

意思是当你需要调整subview的大小的时候,重写layoutSubviews方法。
layoutSubviews在以下情况下会被调用:
1、init初始化不会触发layoutSubviews
2、addSubview会触发layoutSubviews
3、设置view的Frame会触发layoutSubviews,当然前提是frame的值设置前后发生了变化
4、滚动一个UIScrollView会触发layoutSubviews
5、旋转Screen会触发父UIView上的layoutSubviews事件
6、改变一个UIView大小的时候也会触发父UIView上的layoutSubviews事件
这个自定义控件提供对外接口方法,为自定义的控件赋值
- (void)configeWithImage:(UIImage *)image {
_imageView.image = image;
}

最后,添加自定义控件到页面上

    _circleImageView = [[CircleImageView alloc] initWithFrame:CGRectMake(0, 80, 150, 150)];
    [_circleImageView configeWithImage:[UIImage imageNamed:@"tree"]];
    [self.view addSubview:_circleImageView];

运行效果

通过xib创建自定义控件

首先创建一个自定义控件XibCircleImageView,继承自UIView


创建xib文件,与XibCircleImageView类同名


配置xib中imageView的属性,并将XibCircleImageView 类与对应的xib文件进行绑定



代码如下

- (void)awakeFromNib {
    [super awakeFromNib];
    
    _imageView.layer.masksToBounds = YES;
    _imageView.layer.cornerRadius = self.frame.size.width/2;
   // [self addSubview:_imageView];
}

- (void)configeWithImage:(UIImage *)image {
    _imageView.image = image;
}

-(void)layoutSubviews {
    [super layoutSubviews];
    _imageView.layer.cornerRadius = self.frame.size.width/2;
    
}

在页面中调用方式有点不同,通过loadNibNamed方法创建xib对象

    //使用xib创建自定义控件
    _xibCircleImageView = [[[NSBundle mainBundle] loadNibNamed:@"XibCircleImageView" owner:nil options:nil] lastObject];
    _xibCircleImageView.frame = CGRectMake(0, 500, 100, 100);
    [_xibCircleImageView configeWithImage:image];
    [self.view addSubview:_xibCircleImageView];

当使用xib创建自定义控件时,初始化不会调用initWithFrame:方法,只会调用initWithCoder:方法,初始化完毕后才调用awakeFromNib方法,注意要在awakeFromNib中初始化子控件。因为initWithCoder:方法表示对象是从文件解析来的,就会调用,而awakeFromNib方法是从xib或者storyboard加载完毕后才会调用。
本文demo地址:https://github.com/superzcj/ZCJCustomViewDemo

小结

这两种创建自定义控件的方式各有优劣,纯代码方式比较灵活,维护和扩展都比较方便,但写起来比较麻烦。xib方式开发效率高,但不易扩展和维护,适合功能样式比较稳定的自定义控件。

事件传递机制

在自定义控件中,可能需要动态响应事件,如按钮太小,不易点击,需要扩大按钮的点击范围,接下来我们谈谈iOS的事件传递机制。

事件响应链

UIResponder类能够响应触摸、手势以及远程控制等事件。它是所有可响应事件的基类,其中包括很常见的UIView、UIViewController以及UIApplication。
UIResponder的属性和方法如下图,其中nextResponder表示指向一个UIResponder对象。


那么事件响应链与UIResponder有什么关系呢?应用内的视图按一定的结构组织起来,即树状层次结构,一个视图可以有多个子视图,而子视图只能有一个父视图。当一个视图被添加到父视图上时。每一个视图的nextResponder属性就指向它的父视图,这样,整个应用就通过nextResponder串成了一条链,即响应链。响应链是一个虚拟链,并不是真实存在的,它借助UIResponder的nextResponder串连起来。如下图

Hit-Test View

有了事件响应链,接下来就是寻找具体响应对象了,我们称之为:Hit-Testing View,寻找这个View的过程称为Hit-Test。
什么是Hit-Test?我们可以把它理解为一个探测器,通过这个探测器,我们可以找到并判断手指是否触摸在某个视图上。
Hit-Test是如何工作的?Hit-Test采用递归方式从视图的根节点开始遍历,直到找到某个点击的视图。
首先从UIWindow发送hitTest:withEvent:消息开始,判断该视图是否能响应触摸事件,如果不能响应返回nil,表示该视图不能响应触摸事件。然后再调用pointInside:withEvent:方法,该方法用于判断触摸事件点击的位置是否处理该视图范围内,如果pointInside:withEvent:返回no,那么hitTest:withEvent:也直接返回nil。
如果pointInside:withEvent: 方法返回yes,那么该视图向所有子视图发送hitTest:withEvent:消息,所有子视图的调用顺序是从最顶层视图一直到最底层视图,即从subViews的数组的末尾向前遍历。直到有子视图返回非空对象或全部遍历完毕。若有子视图返回非空对象,则hitTest:withEvent:方法返回该对象,处理结束;若所有子视图都返回nil,则hitTest:withEvent:方法返回该视图自身。

事件传递机制的应用

举几个例子,说明一下事件传递机制在自定义控件中的应用。
一、扩大view的点击区域。假设一个button的大小为20px * *20px,太小难以点击。我们通过重写这个button子类的hitTest:withEvent:方法,判断点击处point是否在button周围20px以内,如果是则返回自身,实现扩大点击范围的功能,代码如下:

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (!self.isUserInteractionEnabled || self.hidden || self.alpha<=0.01) {
        return nil;
    }
    CGRect touchRect = CGRectInset(self.bounds, -20, -20);
    if (CGRectContainsPoint(touchRect, point)) {
        for (UIView *subView in [self.subviews reverseObjectEnumerator]) {
            CGPoint convertedPoint = [subView convertPoint:point toView:self];
            UIView *hitTestView = [subView hitTest:convertedPoint withEvent:event];
            if (hitTestView) {
                return hitTestView;
            }
        }
        return self;
    }
    return nil;
}

二、穿透传递事件。
假设有两个view,viewA和viewB,viewB完全覆盖viewA,我们希望点击viewB时能响应viewA的事件。我们重写这个viewA的hitTest:withEvent:方法,不继续遍历它的子视图,直接返回自身。代码如下:

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (!self.isUserInteractionEnabled || self.hidden || self.alpha<=0.01) {
        return nil;
    }
    if ([self pointInside:point withEvent:event]) {
        NSLog(@"in view A");
        return self;
    }
    return nil;
}

更详细的资料:
http://zhoon.github.io/ios/2015/04/12/ios-event.html
http://www.jianshu.com/p/2f664e71c527

回调机制

在自定义控件开发中,需要向它的父类回传返回值。比如一个存放按钮的自定义控件,需要在上层接收按钮点击事件。我们可以使用多种方式回调消息,比如target action模式、代理、block、通知等。

Target-Action

Target-Action是一种设计模式,当事件触发时,它让一个对象向另一个对象发送消息。这个模式我们接触的比较多,如为按钮绑定点击事件,为view添加手势事件等。UIControl及其子类都支持这个机制。Target-Action 在消息的发送者和接收者之间建立了一个松散的关系。消息的接收者不知道发送者,甚至消息的发送者也不知道消息的接收者会是什么。
基于 target-action 传递机制的一个局限是,发送的消息不能携带自定义的信息。iOS 中,可以选择性的把发送者和触发 action 的事件作为参数。除此之外就没有别的控制 action 消息内容的方法了。
举个例子,我们使用Target-Action为控件添加一个单击手势。

        UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(refresh)];
        [_imageView addGestureRecognizer:tapGR];

- (void)refresh{
    NSLog(@"Touch imageView");
}

代理

代理是一种我们常用的回调方式,也是苹果推荐的方式,在系统框架UIKit中大量使用,如UITableView、UITextField。
优点:1,代理语法清晰,可读性高,易于维护 ;2,它减少了代码耦合性,使事件监听与事件处理分离;3,一个控制器可以实现多个代理,满足自定义开发需求,灵活性较高;
缺点:1,实现代理的过程较繁琐;2,跨层传值时加大代码的耦合性,并且程序的层次结构也变得混乱;3,当多个对象同时传值时不易区分,导致代理易用性大大降低;

Block

Block封装一段代码,并当做变量进行传递,它十分方便地将不同地方的代码组织在一起,可读性很高。
优点:1,语法简洁,代码可读性和可维护性较高。2,配合GCD优秀的解决多线程问题。
缺点:1,Block中得代码将自动进行一次retain操作,容易造成内存泄露。 2.Block内默认引用为强引用,容易造成循环引用。

通知

代理是一对一的关系,通知是一对多的关系,通知相比代理可以实现更大跨度的通信机制。但接收对象多了,就难以控制,有时不希望的对象也接收处理了消息。
优点:1,使用简单,代码精简。2,支持一对多,解决了同时向多个对象监听的问题。3,传值方便快捷,Context自身携带相应的内容。
缺点:1,通知使用完毕后需要注销,否则会造成意外崩溃。2,key不够安全,编译器不会检测到是否被通知中心正确处理。3,调试时难以跟踪。 4,当使用者向通知中心发送通知的时候,并不能获得任何反馈信息。 5.需要一个第三方的对象来做监听者与被监听者的中介。
更详细的资料:
https://objccn.io/issue-3-4/
http://maru-zhang.tk/2015/06/08/iOS-Development-Delegate,Notification,Block/

总结

至此,开发自定义控件的相关知识梳理了一遍,希望能帮助大家更好地理解自定义控件开发。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容