视图组件,系统已经支持了不少的常用的视图组件。不过这些无妨满足我们个性化和业务需求。我们在产品的设计过程中,往往有不少视图是相同的,但是我们常常的做法都是重新做一次。当然了,这个主要是指通过可视化的XIB或者storyboard来设计的问题。之前,我们用xib做了一个view了,那么在其他xib中怎么引用它呢?如果可以引用那如何在其他的xib中可视化出来这个View呢?这就是我们需要去解决的问题。其中第一个可以用代码解决,主要是修改initwithcoder的代码,让它去加载对应的xib,并将生成的view添加到自身的view上面。这样第一个问题就可以解决了。那么这种方式已经可以解决大部分的视图重用的问题了,那么我们需求更进一步的就是xib上面可以显示这个重用的view。这个就需要xcode的支持了,从xcode6之后多了IBDesignable和IBInsepctable这个2个东西,是的在设计的时候就可以实时渲染了,这样就可以实现我们显示的问题了。接下来说说操作的步骤。
环境要求:Xcode 6.0及以上版本
操作步骤:
1. 创建视图XIB
2. 创建相对应的视图子类,集成自KLNibView
3. 修改XIB中的相关属性,修改File’s Owner的Class为对应的类目。注意不要在View上面修改类名了。
4. 在storyboard中添加一个相对应的视图,并将自定义类目改成相对应的子类
5. 在xcode的edit中,勾选自动刷新视图
6. 到此,就结束了。
7. 另外IBInspectable的属性的介绍。这个属性需要配合IBDesignable来使用,作用也是在设计时,就可以看到效果。简单说明一下操作不走:
a. 添加IBInspectable属性
b. 修改set属性方法,如果需要可修改drawRect方法。
大家可以参考apple的官方文档。
https://developer.apple.com/library/ios/recipes/xcode_help-IB_objects_media/Chapters/CreatingaLiveViewofaCustomObject.html
//
// KLNibView.h
//
// Created by Tommy on 15/8/5.
// Copyright (c) 2015年 Tommy. All rights reserved.
//
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface KLNibView : UIView
@property(nonatomic,strong)UIView *nibView;
- (NSString *)nibName;
@end
//
// KLNibView.m
//
// Created by Tommy on 15/8/5.
// Copyright (c) 2015年 Tommy. All rights reserved.
//
#import "KLNibView.h"
@implementation KLNibView
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
[self setupNibView];
}
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder{
self = [super initWithCoder:aDecoder];
if(self) {
[self setupNibView];
}
return self;
}
- (UIView *)loadViewFromNib:(NSString *)nibName{
NSBundle *bundle = [NSBundle bundleForClass:[self class]];
UINib *nib = [UINib nibWithNibName:nibName bundle:bundle];
UIView *view = [[nib instantiateWithOwner:self options:nil] firstObject];
return view;
}
- (void)setupNibView {
_nibView = [self loadViewFromNib:[self nibName]];
if(!_nibView){
NSLog(@"load nib %@ view failed!",[self nibName]);
return;
}
_nibView.frame = self.bounds;
_nibView.autoresizingMask = UIViewAutoresizingFlexibleWidth |UIViewAutoresizingFlexibleHeight;
[self addSubview:_nibView];
}
- (NSString *)nibName{
return NSStringFromClass([self class]);
}
@end