美文网首页iOS Developer
XCode7 自定义可重用控件

XCode7 自定义可重用控件

作者: 地线 | 来源:发表于2016-04-28 20:00 被阅读0次

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

    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;
        }

    相关文章

      网友评论

        本文标题:XCode7 自定义可重用控件

        本文链接:https://www.haomeiwen.com/subject/yfyhrttx.html