XCode7 自定义可重用控件

自定义可重用控件——来自现实开发中的真实需求，基本上有两种方法：

1. 纯代码写。对于界面不太复杂的控件，这种做法比较受欢迎，毕竟自己可以掌控一切。
2. 用XIB来写。对于界面稍微复杂一点的，可以用这种方式；在IB中拖拽，使用自动布局调整控件UI逻辑，比写代码快捷又直观。

本文就简单讨论一下用XCode7写基于UIView的控件的基本过程。

第一步：创建一个基于UIView的Cocoa Touch Class，例如类名为OperationBarView
XCode中：File -> New ->File -> Cocua Touch Class，如下图所示。注意，这时下面的“Also create XIB file”是不能选中的。XCode只允许基类为UIViewController或者UITableViewCell的子类同时生成XIB File。

第二步：创建XIB File，命名为OperationBarView.xib

这里的文件名可以和类名不同，但是建议使用相同的名字。

在XCode中，File –> New ->File -> User Interface -> View

第三步：关联XIB和类。
在“Project Navigator”里面，选择刚才创建的OperationBarView.xib打开该文件，选择“File’s Owner”，然后在右侧的“Identity Insepctor”里面，指定Custom Class为第一步中创建的类OperationBarView。

第四步：指定View的Size类型
第二步创建出来的View的默认Size类型为Inferred，大多情况下，这个Size就是屏幕的大小，而且无法改变。我们要设计自己的控件的大小，可以将该Size类型设定为Freedom。
在打开的XIB文件中选择View，右侧的Attributes Insepctor里面指定。

这样就可以将View界面调整为自己所需要的大小。

第五步：设计自己的UI
根据自己的需要设计UI元素，布局关系，例如：

第六步：为View创建一个IBOutlet对象
在打开的XIB中，Control-Drag View对象到OperationBarView.h，并创建连接。

第七步：加载NIB
在OperationBarView.m文件中，利用初始化方法中加载NIB文件，并把NIB文件中的对象加入对象图。

(instancetype)initWithCoder:(NSCoder *)aDecoder
{
    if (self  = [super initWithCoder:aDecoder])
    {
        NSString  *nibName = NSStringFromClass([self class]);
        [[NSBundle  mainBundle] loadNibNamed:nibName owner:self options:nil];
        [self  addSubview:self.view];
    }
    return self;
}

第八步：在VC中使用自定义控件
好了，至此，我们就创建了一个可以重用的UI组件，可以在其他地方使用了。我们在一个VC上拖曳一个UIView，然后指定其Class为OperationBarView，设置其背景为黑色以容易区分。（请忽略截图中的其他元素，因为示例中同时也在测试其他的控件，但和本主题无关）

来看一下运行效果：

从运行效果看，新建的自定义View并没有填满我们指定的View（黑色区域）。什么地方没做对呢？我们来理一下这里的黑色背景的View和我们的自定制View之间的关系：

• 拖曳到VC上的UIView，我们指定了他的Class为OperationBarView。因此，这个UIView被创建出来的OperationBarView对象则为OperationBarView.xib的File’s Owner对象；也就是OperationBarView.m中所引用的self对象。

• OperationBarView.m中所引用的self是一个UIView

• self.view所引用的UIView则是我们自定义控件的根View

• 只有将self.view所引用的View加入到self的SubView里面，自定义控件才会被显示。

• 但是self.view的位置、大小和self并不一致，需要我们自己来设定。
  一旦理清了上面的关系，就会明白实际运行是自定义控件并没有完全占满所定义的黑色区域，那是因为我们没有为其设置显示位置、大小等属性。我们可以在加载完NIB后，为self.view添加约束，让其自动填满self。这里我们只能用代码来添加约束，如下:

    instancetype)initWithCoder:(NSCoder *)aDecoder
    {
        if (self = [super initWithCoder:aDecoder])
        {
            NSString  *nibName = NSStringFromClass([self class]);
            [[NSBundle  mainBundle] loadNibNamed:nibName owner:self options:nil];
           [self  addSubview:self.view];
  
           //方案1:设置自动约束，
           [self.view  setTranslatesAutoresizingMaskIntoConstraints:NO];**
           [self addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];
           [self addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"V:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];
         }
         return self;
   }
  

这样一来，运行效果就比较正常了，如下图所示：

其实还有个更简单的方案，就是设置self.view的frame属性，可以达到同样的效果，如下：

    instancetype)initWithCoder:(NSCoder *)aDecoder
    {
        if (self = [super initWithCoder:aDecoder])
        {
            NSString  *nibName = NSStringFromClass([self class]);
            [[NSBundle  mainBundle] loadNibNamed:nibName owner:self options:nil];
            [self  addSubview:self.view];
            
            //方案2：设置frame
            self.view.frame = self.bounds;
        }
        return self;
    }