Objective-C,自定义一个可在xib中预览的控件

作者: 忠橙_g | 来源:发表于2016-12-30 17:10 被阅读256次

Objective-C,自定义一个可在xib中预览的控件
UI-Xib
Swift与Objective-C混编,Objective-C的
iOS使用Xib自定义控件
XIB和代码自定义控件的步骤
UIView
SwiftUI 修改预览样式
iOS开发Tips
如何用Swift创建自定义iOS控件
IB_DESIGNABLE 和 IBInspectable 的用

早在iOS8时期，苹果就给我们提供了IB_DESIGNABLE 和 IBInspectable，让我们可以在xib中直接设置预览UIView的子类的某些属性。
之前由于项目是纯代码写的，所以一直没用到它们。正好这次的项目要用storyboard来实现，所以准备将一些自定义控件进行修改，让它们可以在xib中进行预览，以减少代码量和增加开发效率。
接下来，我们自定义一个包含文字、图片、角标的按钮控件（这种控件很常见吧，通常是上面图片下面文字，然后图片上还可能有角标）来试试这个功能。

1.最基础的功能

首先，用纯代码实现一个自定义的view，效果如下图：

效果图

代码比较简单，就不上代码了。

2.添加IB_DESIGNABLE 和 IBInspectable关键字

首先，在类的前面加上IB_DESIGNABLE关键字

#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface  XXX : UIView
@end

然后，考虑哪些属性是可以在xib中设置的

需要注意的是，在xib中能够显示的属性只有
Boolean、Number、String、Localized String、
Point、Size、Rect、Range、Color、Image
几种，其他属性包括自定义的枚举，即便加了IBInspectable在xib中也是不会显示的
1.view的圆角

@property (nonatomic,assign) IBInspectable CGFloat cornerRadius;   //圆角

2.图片的Image

@property (nonatomic,copy) IBInspectable UIImage * image;  //图片
@property (nonatomic,assign) IBInspectable CGSize imageSize;  //图片大小

3.标题文字

@property (nonatomic,copy) IBInspectable NSString * title;  //标题

4.角标文字

//角标文字（如果为nil或者空字符串，则隐藏角标）
@property (nonatomic,copy) IBInspectable NSString * badge;

添加完IBInspectable关键字后，就可以在xib中看到这些属性了

属性

试着修改一下值，发现并没有什么变化。因为还没有写实现的代码。
一般情况下，当属性值在xib中被修改时，会调用属性的setter方法，以及view的drawRect:方法，所以我们需要在里面实现对view的绘制代码。

需要注意的是，xib绘制时，并不会调用init方法，所以如果要添加子控件的话，是要在setter或drawRect:进行创建后，再修改对应属性效果。

因此，将几个子控件的初始化方法独立成getview的方法如下

#pragma mark - getViews
- (UIImageView *)getImageView{
    if (_imageView == nil) {
        self.imageView = ({
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectZero];
            imageView.clipsToBounds = YES;
            [self addSubview:imageView];
            imageView;
        });
    }
    return _imageView;
}

- (UILabel *)getTitleLabel{
    if (_titleLabel == nil) {
        self.titleLabel = ({
            UILabel * label = [[UILabel alloc]initWithFrame:CGRectZero];
            label.textColor = [UIColor blackColor];
            label.textAlignment = NSTextAlignmentCenter;
            label.numberOfLines = 2;
            label.font = [UIFont systemFontOfSize:13];
            [self addSubview:label];
            label;
        });
    }
    return _titleLabel;
}

- (UILabel *)getBadgeLabel{
    if (_badgeLabel == nil) {
        self.badgeLabel = ({
            UILabel * label = [[UILabel alloc]initWithFrame:CGRectZero];
            label.textColor = [UIColor whiteColor];
            label.clipsToBounds = YES;
            label.textAlignment = NSTextAlignmentCenter;
            label.font = [UIFont systemFontOfSize:8];
            label.backgroundColor = [UIColor redColor];
            [self addSubview:label];
            label.hidden = YES;
            label;
        });
    }
    return _badgeLabel;
}

然后，在setter方法中调用getview的方法设置属性

#pragma mark - setter
//设置view的圆角
-(void)setCornerRadius:(CGFloat)cornerRadius{
    _cornerRadius = cornerRadius;
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0?true:false;
}
//设置标题文字
-(void)setTitle:(NSString *)title{
    _title = title;
    [self getTitleLabel].text = title;
    [[self getTitleLabel] sizeToFit];
    //设置label的文字时，需要手动调用刷新界面的方法，不然会出现布局乱的bug
    [self reloadView];
}
//设置图片
-(void)setImage:(UIImage *)image{
    _image = image;
    [self getImageView].image = image;
}
//设置角标
-(void)setBadge:(NSString *)badge{
    _badge = badge;
    [self getBadgeLabel].text = badge;
    if (_badge==nil) {
        _badgeLabel.hidden = YES;
        return;
    }
    _badgeLabel.hidden = NO;
    //设置label的文字时，需要手动调用刷新界面的方法，不然会出现布局乱的bug，原因不明
    [self reloadView];
}

这里，将绘制view的方法独立出来

- (void)reloadView{
    [self layoutBadgeView];
    [self layoutImageAndTitle];
}

-(void)layoutBadgeView{
//绘制圆角的角标
   float _badgeRadius = 5;
    _badgeLabel.text = _badge;
    [_badgeLabel sizeToFit];
    float minheight = _badgeRadius * 2;
    float width = CGRectGetWidth(_badgeLabel.frame) + minheight;
    float heigh = CGRectGetHeight(_badgeLabel.frame) > minheight ? CGRectGetHeight(_badgeLabel.frame):minheight;
    _badgeLabel.frame = CGRectMake(0, 0, width, heigh);
    _badgeLabel.layer.cornerRadius = heigh/2;
}

- (void)layoutImageAndTitle{
  //调整标题和图片的位置
    CGRect rect = self.bounds;
    float _alignPadding = 5;
    float height = CGRectGetHeight(_titleLabel.frame) + _alignPadding + _imageSize.height;
    _imageView.frame = CGRectMake((rect.size.width - _imageSize.width)/2,(rect.size.height - height)/2,_imageSize.width, _imageSize.height);
    _titleLabel.frame = CGRectMake(0, CGRectGetMaxY(_imageView.frame) + _alignPadding, rect.size.width , CGRectGetHeight(_titleLabel.frame));
    _badgeLabel.frame = CGRectMake(CGRectGetMaxX(_imageView.frame), CGRectGetMinY(_imageView.frame), CGRectGetWidth(_badgeLabel.frame), CGRectGetHeight(_badgeLabel.frame));
}

#pragma mark - DrawRect
- (void)drawRect:(CGRect)rect {
    [self reloadView];
    //调整层级顺序
    [self bringSubviewToFront:_titleLabel];
    [self bringSubviewToFront:_badgeLabel];
}

以上，一个很基础的控件就完成了。
接下来，还需要对它进行一些扩展,让它能够有更好的适应性。包括：
1.设置图片圆角、背景色、填充模式
2.设置角标样式（圆角和数字）
3.设置标题字体
4.设置图片与文字的位置关系
等

具体代码在GZCAlignButton
效果如下：