iOS-Storyboad动态刷新

我会带着你远行 2022-08-09 05:19 69阅读 0赞

# iOS-Storyboad动态刷新 #

## 什么叫做Storyboard动态刷新 ##

在项目开发中，如果可以在xib（storyboard）中，动态显示运行效果图，那么实在是太爽了。在Xcode 6之后就为我们提供了这样的一种方式，来实现这样的效果，通过IBInspectable和IB\_DESIGNABLE 来实现。

**一图胜千言，请看效果图：**  
![这里写图片描述][20151014155337933]

## IB\_DESIGNABLE-属性介绍 ##

IB\_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面。需要注意的是，自定义类必须是UIView的子类。

**使用方式，把该宏加在自定义类的前面：**

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

现在可以将DynamicView1类实例，显示是xib中了。

**具体方法为：**

1.  随便创建一个xib（storyboard）文件
        2.  将一个UIView控件拖动到xib（storyboard）中
        3.  将这个UIView控件设置为刚刚创建的类（DynamicView1）

## IBInspectable-属性介绍 ##

让支持KVC的属性能够在Attribute Inspector中配置。  
![20151014155622874][]

但是现在不一样了。在xcode6之后，为我们提供了宏定义`IBInspectable`，在需要的属性之前定义这个宏定义，我们就可以在图形化界面中设置这个数值了。  
![20151014160046157][]

**使用方式，把该宏加在自定义类的前面：**  
在声明文件中添加：

@property (strong, nonatomic) IBInspectable NSString *string;

在IB中设置属性，会调用响应的set方法。因此，如果你想在设置这个数值的时候，进行一些其他操作。那么你可以重写赋值方法：

- (void)setString:(NSString){
        _string = string;
        //其他操作
    }

**可以显示的数据如下：**

Int
    CGFloat
    Double
    String
    Bool
    CGPoint
    CGSize
    CGRect
    UIColor
    UIImage

其实 @IBInspectable 并没有做什么太神奇的事情，我们如果查看 IB 中这个 view 的 Identity Inspector 的话会看到刚才所设定的颜色值被作为了 Runtime Attribute 被使用了。其实手动直接在 Runtime Attributes 中设定颜色也有同样的效果，因此 @IBInspectable 唯一做的事情就是在 IB 面板上为我们提供了一个很方便地修改属性的入口，并没有其他太多神奇之处。

## 通过IB\_DESIGNABLE配合IBInspectable可以实现动态刷新 ##

IB\_DESIGNABLE作用为：动态渲染图像到xib（storyboard）中。  
IBInspectable作用：使属性可以在IB界面中可视化编辑设置。  
结合两者，我们就能实现动态刷新界面。

**使用方法：**  
在声明文件中：

IB_DESIGNABLE
    @interface DynamicView1 : UIView
    
    @property (strong, nonatomic) UIImageView *imageView;
    @property (strong, nonatomic) UILabel *label;
    
    @property (strong, nonatomic) IBInspectable NSString *string;
    @property (strong, nonatomic) IBInspectable UIImage *image;
    @property (assign, nonatomic) IBInspectable CGFloat cornerRadius;
    @property (assign, nonatomic) IBInspectable CGFloat borderWidth;
    @property (strong, nonatomic) IBInspectable UIColor *borderColor;
    
    @end

在实现文件中：

#import "DynamicView1.h"
    
    @implementation DynamicView1
    - (void)prepareForInterfaceBuilder{
        self.backgroundColor = [UIColor blackColor];
    }
    
    - (instancetype)initWithCoder:(NSCoder *)aDecoder{
        self = [super initWithCoder:aDecoder];
        if (self) {
            //custom initlizaiton
            self.opaque = NO;
            self.clearsContextBeforeDrawing = YES;
        }
        return self;
    }
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        self.layer.masksToBounds = YES;
        //图片
        if (self.image) {
            self.imageView = [[UIImageView alloc]init];
            self.imageView.frame = rect;
            self.imageView.contentMode = UIViewContentModeScaleAspectFit;
            self.imageView.image = self.image;
            [self addSubview:self.imageView];
        }
        //文字
        if (self.string) {
            self.label = [[UILabel alloc]initWithFrame:rect];
            self.label.backgroundColor = [UIColor clearColor];
            self.label.textAlignment = NSTextAlignmentCenter;
            self.label.text = self.string;
            [self addSubview:self.label];
        }
    }
    
    - (void)setCornerRadius:(CGFloat)cornerRadius{
        _cornerRadius = cornerRadius;
        self.layer.cornerRadius = cornerRadius;
    }
    
    - (void)setBorderWidth:(CGFloat)borderWidth{
        _borderWidth = borderWidth;
        self.layer.borderWidth = borderWidth;
    }
    
    - (void)setBorderColor:(UIColor *)borderColor{
        _borderColor = borderColor;
        self.layer.borderColor = borderColor.CGColor;
    }
    
    @end

之后，我们可以在xib（storyboard）中随便拖一个view进来。将这个view设置为自定义属性。图像就会自动渲染出来了。（如果不行，勾选editor-automitically refresh views自动加载图像）

**上面的可以复制粘贴使用，效果为一开始展示的图片。**  
![这里写图片描述][20151014155337933]

## IB中动态显示方法介绍 ##

### prepareForInterfaceBuilder方法 ###

每次在 IB 即将把这个自定义的 view 渲染到画布之前会调用这个方法进行最后的配置。但是这个方法在app运行的时候，是不调用的。

**使用方法：**

- (void)prepareForInterfaceBuilder{
        self.backgroundColor = [UIColor blackColor];
    }

**效果图：**  
左边为app运行时， 右边为xib中渲染效果  
![这里写图片描述][20151012151225565]

### TARGET\_INTERFACE\_BUILDER宏定义 ###

通过宏定义，可以在控制IB中渲染的视图与app中运行的视图。

#if !TARGET_INTERFACE_BUILDER
       // this code will run in the app itself
       //此处编译的代码，在app运行调用
    #else
       // this code will execute only in IB
       //此处编译的代码，在IB中绘画中调用
    #endif
    }

**使用方法：**

- (void)drawRect:(CGRect)rect {
        self.layer.masksToBounds = YES;
    
    #if !TARGET_INTERFACE_BUILDER
        // this code will run in the app itself
        //图片
        if (self.image) {
            self.imageView = [[UIImageView alloc]init];
            self.imageView.frame = rect;
            self.imageView.contentMode = UIViewContentModeScaleAspectFit;
            self.imageView.image = self.image;
            [self addSubview:self.imageView];
        }
        //文字
        if (self.string) {
            self.label = [[UILabel alloc]initWithFrame:rect];
            self.label.backgroundColor = [UIColor clearColor];
            self.label.textAlignment = NSTextAlignmentCenter;
            self.label.text = self.string;
            [self addSubview:self.label];
        }
    #else
        // this code will execute only in IB
        //文字
        if (self.string) {
            self.label = [[UILabel alloc]initWithFrame:rect];
            self.label.backgroundColor = [UIColor clearColor];
            self.label.textAlignment = NSTextAlignmentCenter;
            self.label.text = self.string;
            [self addSubview:self.label];
        }
    #endif
    }

**效果图：**   
左边为app运行时， 右边为xib中渲染效果  
![这里写图片描述][20151012154514118]

## 自定义渲染 view 的调试 ##

对于简单的自定义 view 来说，实时显示和属性设定什么的并不是一件很难的事情。但是对于那些比较复杂的 view，如果我们遇到某些渲染上的问题的话，如果只能靠猜的话，就未免太可怜了。幸好，Apple 为 view 在 IB 中的渲染的调试也提供了相应的方法。在 view 的源代码中设置好断点，然后切到 IB，点选中我们的自定义的 view 后，我们就可以使用菜单里的 Editor -> Debug Selected Views 来让 IB 对这个自定义 view 进行渲染。如果触发了代码中的断点，那我们的代码就会被暂停在断点处，lldb 也会就位听我们调遣。一切都感觉良好，不是么？  
![这里写图片描述][20151012155505784]

## 动态刷新，加载资源文件出错（xib， image） ##

### 问题一描述 ###

1.  创建UIView子类，自定义界面
2.  在自定义界面上添加collectionView界面
3.  通过xib文件，编写collectionViewCell文件
4.  为collectionView注册cell
5.  在delegate方法中设置cell（出现问题， cell无法被加载， 界面直接crash）

**出错代码**

[self.collectionView registerNib:[UINib nibWithNibName:@"ICDateCollectionViewCell" 
            bundle:nil] forCellWithReuseIdentifier:@"cell"];

**出错原因:**  
IB 使用的 bundle 和 app 运行时的 mainBundle 不是一个概念，我们需要在设计时的 IB 的 bundle 可以通过在自定义的 view 自身的 bundle 中进行查找并使用（`[NSBundle bundleForClass:[self class]]]`）。

为了验证IB使用的bundle和app运行的时的mainBundle的区别，下面是我们验证：  
在IB中debug调试状态下，打印`[NSBundle bundleForClass:[self class]]]`和`[NSBundle mainBundle]`显示如下  
![这里写图片描述][20151014163016519]

在app运行状态下，打印`[NSBundle bundleForClass:[self class]]]`和`[NSBundle mainBundle]`显示如下，他们都指向同一个文件目录  
![这里写图片描述][20151014163126958]

因此，在不同的运行状况下，app的运行状态是不同的，如果设置错了bundle（文件目录），那么将无法找到我们需要的文件。（cell的xib文件就是一个例子）。

**解决方法**  
将加载的xib文件的目录设置为当前view的class，这样就可以加载到xib文件了。

[self.collectionView registerNib:[UINib nibWithNibName:@"ICDateCollectionViewCell" bundle:
                                          [NSBundle bundleForClass:[self class]]] forCellWithReuseIdentifier:@"cell"];

### 问题二描述 ###

1.  获取图像a对应的两倍图，三倍图
2.  将图片保存在xcode的图片文件夹（Assets.xcassets）中
3.  创建UIView子类，自定义界面
4.  在自定义界面上添加一个UIImageView
5.  获取一个UIImage，将UIImage添加到UIImageView上（出现问题，UIImage无法获取）
6.  在IB中无法动态渲染出相应界面

**出错代码**

UIImage *image = [UIImage imageNamed:@"C"];
    self.imageView.image = image;

**出错原因:**  
在上一个问题中已经说明：IB 使用的 bundle 和 app 运行时的 mainBundle 不是一个概念。

调用imageNamed：方法，自动在mainBundle中寻找图片。因此不可用。如果将获取图片代码改为：

NSBundle *bundle = [NSBundle bundleForClass:self.class];
    NSString *path = [bundle pathForResource:@"C" ofType:@"png"];
    UIImage *image = [[UIImage alloc]initWithData:[NSData dataWithContentsOfFile:path]];

那么是不是可以解决这个问题了呢？

还是不可以。 因为，图片文件夹（Assets.xcassets）中的图片，默认只可以通过`imageNamed:`方法获取。

**解决方法**  
将图片存放在项目根目录下。  
![20151014165159506][]  
然后在调用之前代码：

//NSBundle其实就是一个树形结构的根目录
    NSBundle *bundle = [NSBundle bundleForClass:self.class];
    NSString *path = [bundle pathForResource:@"C" ofType:@"png"];
    UIImage *image = [[UIImage alloc]initWithData:[NSData dataWithContentsOfFile:path]];

**问题解决参考**  
[xcode 6 IB\_DESIGNABLE- not loading resources from bundle in Interface builder][xcode 6 IB_DESIGNABLE- not loading resources from bundle in Interface builder]  
[IBDesignable crashes when attempting to instantiate a nib][]

## 下面是写的一个demo ##

![这里写图片描述][20151014170017301]

**下载地址：**  
[http://download.csdn.net/detail/daiyibo123/9193951][http_download.csdn.net_detail_daiyibo123_9193951]

## 参考 ##

[ iOS SDK详解之IBInspectable和IB\_DESIGNABLE－Storyboad动态刷新][iOS SDK_IBInspectable_IB_DESIGNABLE_Storyboad]

[WWDC 2014 Session笔记 - 可视化开发，IB 的新时代][WWDC 2014 Session_ - _IB]

[20151014155337933]: /images/20220731/a41bca0010794b9bb43382fa54b67076.png
[20151014155622874]: /images/20220731/b80e129c519b472a99642c4f2effe12c.png
[20151014160046157]: /images/20220731/b346fb007e6f4e87b352ac6bd2369464.png
[20151012151225565]: /images/20220731/69e8be16cf64493c8ba1485894f6e57e.png
[20151012154514118]: /images/20220731/5334f67a08f34673920495affd8f27ea.png
[20151012155505784]: /images/20220731/8abd14085bda4e4ababb90e101ddb92b.png
[20151014163016519]: /images/20220731/831120b74e6140679a7b57b9bbbcb316.png
[20151014163126958]: /images/20220731/88caa69bb14047cb9bfe46d7cf920ecc.png
[20151014165159506]: /images/20220731/00d6aa7700cc4608929e4554ffc8a8e9.png
[xcode 6 IB_DESIGNABLE- not loading resources from bundle in Interface builder]: http://stackoverflow.com/questions/24603232/xcode-6-ib-designable-not-loading-resources-from-bundle-in-interface-builder
[IBDesignable crashes when attempting to instantiate a nib]: http://stackoverflow.com/questions/31689409/ibdesignable-crashes-when-attempting-to-instantiate-a-nib
[20151014170017301]: /images/20220731/22c504d6af534a1f93e405e92e567589.png
[http_download.csdn.net_detail_daiyibo123_9193951]: http://download.csdn.net/detail/daiyibo123/9193951
[iOS SDK_IBInspectable_IB_DESIGNABLE_Storyboad]: http://blog.csdn.net/hello_hwc/article/details/45288833
[WWDC 2014 Session_ - _IB]: http://onevcat.com/2014/10/ib-customize-view/