让Storyboard控制更多的样式！

[xiangpaopao]

作为iOS中的新技术，Storyboard（以下简称SB）的优点和缺点同样明显，关于纯手写和StoryBoard间的博弈，推荐阅读一下 http://onevcat.com/2013/12/code-vs-xib-vs-storyboard/ 。而本文主要是要讲如何在SB中控制更多的样式。

作为一个web前端开发者，习惯了使用灵活的HTML+CSS控制页面，做iOS开发时，要创建大量类、写大量代码来构建视图，有时还不得不和业务代码混在一起，这一点很不爽。之前在SB上做过一些尝试，但是SB上提供的选项实在不够用，比如想给一个按钮设置圆角都没有选项，以往我都是创建一个新类，写了一行代码：btn.layer.cornerRadius = 10; 直到我在objc.io上看到了这篇文章 Behaviors in iOS Apps，才明白原来可以通过User Defined Runtime Attributrs 来给视图修改样式。例如我需要给button设置圆角，那就添加一条layer.cornerRadius 并填上合适的值。

自定义属性支持以下数据类型

• Boolean
• Number
• String
• Localized String
• Point
• Size
• Rect
• Range
• Color
• Nil

OK，我们来尝试给按钮添加边框

问题来了，按钮怎么也不显示边框。原因是layer的borderColor属性类型是CGColor而不是Color，所以我们得转换，可以通过创建一个Category来让把Color转换为CGColor

CALayer+XibConfiguration.h

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer(XibConfiguration)
@property(nonatomic, assign) UIColor* borderColorFromUIColor;
@property(nonatomic, assign) UIColor* shadowColorFromUIColor;
@end

CALayer+XibConfiguration.m

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)
-(UIColor*)borderColorFromUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}
-(UIColor*)shadowColorFromUIColor
{
    return [UIColor colorWithCGColor:self.shadowColor];
}
-(void)setBorderColorFromUIColor:(UIColor*)color
{
    self.borderColor = color.CGColor;
}
-(void)setShadowColorFromUIColor:(UIColor*)color
{
    self.shadowColor = color.CGColor;
}
@end

然后把刚才的borderColor替换为borderColorFromUIColor重新运行代码，发现边框正常显示了。

那如果只需要四边边框宽度不一样怎么办呢？CSS中我们是这样写的border-width: 5px 10px 2px 10px;，为了iOS中也能这样写，我写了一个方法来实现。

-(NSString*)borderWidths
{
    return self.borderWidths;
}
-(void)setBorderWidths:(NSString*)borderWidths
{
    NSString *widthsStr = [[borderWidths stringByReplacingOccurrencesOfString:@"{" withString:@""]
                           stringByReplacingOccurrencesOfString:@"}" withString:@""];
    //widths:[top,right,bottom,left]
    NSArray *widths = [widthsStr componentsSeparatedByString:@","];
    float topWidth = [[widths objectAtIndex:0] floatValue];
    float rightWidth = [[widths objectAtIndex:1] floatValue];
    float bottomWidth = [[widths objectAtIndex:2] floatValue];
    float leftWidth = [[widths objectAtIndex:3] floatValue];

    if (topWidth!=0) {
        CALayer *border = [CALayer layer];
        border.backgroundColor = self.borderColor;
        border.frame = CGRectMake(0, 0, self.frame.size.width, topWidth);
        [self addSublayer:border];
    }
    if (rightWidth!=0) {
        CALayer *border = [CALayer layer];
        border.backgroundColor = self.borderColor;
        border.frame = CGRectMake(self.frame.size.width - rightWidth, 0, rightWidth, self.frame.size.height);
        [self addSublayer:border];
    }
    if (bottomWidth!=0) {
        CALayer *border = [CALayer layer];
        border.backgroundColor = self.borderColor;
        border.frame = CGRectMake(0, self.frame.size.height - bottomWidth, self.frame.size.width, bottomWidth);
        [self addSublayer:border];
    }
    if (leftWidth!=0) {
        CALayer *border = [CALayer layer];
        border.backgroundColor = self.borderColor;
        border.frame = CGRectMake(0, 0, leftWidth, self.frame.size.height);
        [self addSublayer:border];
    }
}

把他添加到CALayer+XibConfiguration.m就可以在SB中通过layer.borderWidths来设置不同宽度的边框了。

这里我只是提供了这个思路，类似的还有很多样式都可以通过这种方式控制，减少代码量。刚才的demo可以从 https://github.com/xiangpaopao/ChangeStyleInSB 获取。

[toby941]

感觉还是代码写控件方便

[iceman201]

这个shadow写的漂亮
@toby941 code也可以啊
self.layer.shadowColor = UIColor.blackColor().CGColor
self.layer.shadowOffset = CGSize(width: 0, height: 0)
self.layer.shadowRadius = 15
self.layer.shadowOpacity = 0.8