iOS自定义可预览控件

发表于 |

iOS自定义可预览控件

iOS的编辑器还是不错的，但是自定义的UI控件如果能够可预览就更加nice了，所见即所得！当然也有些坑和感觉需要完善的地方，但相信Apple会对Storyboard做出持续性的更新和改进。

要做到UI控件可预览那么就需要了解IBDesignable和IBInspectable
新建一个工程，先随便写点代码吧~直接贴在下面了，无非就是一个View的圆角和描边颜色，宽度的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import UIKit
@IBDesignable class BTCustomView: UIView {
    // MARK: setter
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            self.layer.cornerRadius = cornerRadius
        }
    }
    
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.layer.borderColor = borderColor.CGColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
}

@IBDesignable 表示改类是可被IB预览的
@IBInspectable 表示改属性可在IB编辑器里设置

接下来在Main.storyboard中随便拉一个UIView出来做测试

从上面我们可以看出这样子我们就能够很容易定制一个自己的UI，非常的方便。

如果是Objective-C又是怎么样的呢，下面附上Objective-C的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface CustomView : UIView
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;
@end
#import "CustomView.h"
@implementation CustomView
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder {
    return [super initWithCoder:aDecoder];
}
- (void)awakeFromNib {
    [super awakeFromNib];
}
- (void)setCornerRadius:(CGFloat)cornerRadius {
    _cornerRadius = cornerRadius;
    self.layer.cornerRadius = _cornerRadius;
    self.layer.masksToBounds = @YES;
}

注意点：
现在还不支持类似NSArray之类的复杂类型，so sad！一定要重写initWithCoder方法
好，先这样希望大家有好的自己定制的UI共同分享，共同学习~！