记录一个关于UIButton backgroundImage的问题

需求背景

我需要一个像这样的可以切换不同选择的按钮

我的实现

OK，看起来非常简单嘛，实现起来也很容易，步骤如下：

• 创建一个UIView作为父容器，它具有蓝色背景，具有白色边框，具有所要的圆角，并且clipToBounds=YES
• 依次添加3个UIButton作为子View，设定默认状态为背景色clearColor，文字颜色whiteColor，选中状态为背景色白色，文字颜色蓝色。
• 设置初始状态为第一个选中
• 处理几个按钮的点击事件，切换状态

Good，开始编码：

    self.chartSelectView.layer.borderColor = [UIColor whiteColor].CGColor;
    self.chartSelectView.layer.borderWidth = 1;
    self.chartSelectView.layer.masksToBounds = YES;
    self.chartSelectView.layer.cornerRadius = 9;
    self.chartSelectView.layer.backgroundColor = [Tool colorWithHexString:@"#41B3FF"].CGColor;
    
    self.btnDay = [self getSelectButton:@"日" startX:0];
    self.btnDay.tag = 0;
    [self.chartSelectView addSubview:self.btnDay];
    
    self.btnWeek = [self getSelectButton:@"周" startX:32];
    self.btnWeek.tag = 1;
    [self.chartSelectView addSubview:self.btnWeek];
    
    self.btnMonth = [self getSelectButton:@"月" startX:64];
    self.btnMonth.tag = 2;
    [self.chartSelectView addSubview:self.btnMonth];
    
    self.btnDay.selected = YES;

其中chartSelectView就是那个父容器View，

- (UIButton*)getSelectButton:(NSString*)title startX:(CGFloat) startX{
    return [[CustomButton alloc]initWithFrame:CGRectMake(startX, 0, 32, 18)
                                        title:title
                                         font:[UIFont systemFontOfSize:9]
                              textColorNormal:[UIColor whiteColor]
                           textColorHilighted:[Tool colorWithHexString:@"#41B3FF"]
                                bgColorNormal:[UIColor clearColor]
                             bgColorHilighted:[UIColor whiteColor]
                                       target:self
                                       action:@selector(onChartSelect:)];
}

CustomButton的initWithFrame:xxx:方法如下

-(instancetype) initWithFrame:(CGRect)frame
                        title:(NSString*)title
                         font:(UIFont*)font
              textColorNormal:(UIColor*)textColorNormal
           textColorHilighted:(UIColor*)textColorHilighted
                bgColorNormal:(UIColor*)bgColorNormal
             bgColorHilighted:(UIColor*)bgColorHilighted
                       target:(id)target
                       action:(SEL)action {
    
    self = [super initWithFrame:frame];
    if (self) {
        [self setTitle:title forState:UIControlStateNormal];
        [self setTitle:title forState:UIControlStateHighlighted];
        [self setTitle:title forState:UIControlStateSelected];
        
        [self.titleLabel setFont:font];
        
        [self setTitleColor:textColorNormal forState:UIControlStateNormal];
        [self setTitleColor:textColorHilighted forState:UIControlStateHighlighted];
        [self setTitleColor:textColorHilighted forState:UIControlStateSelected];
        
        [self setBackgroundImage:[UIUtil createImageWithColor:bgColorNormal inRect:frame] forState:UIControlStateNormal];
        [self setBackgroundImage:[UIUtil createImageWithColor:bgColorHilighted inRect:frame] forState:UIControlStateHighlighted];
        [self setBackgroundImage:[UIUtil createImageWithColor:bgColorHilighted inRect:frame] forState:UIControlStateSelected];
        [self addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

最后是各种状态切换

- (void)onChartSelect:(UIButton*)sender{
    NSInteger tag = sender.tag;
    switch (tag) {
        case 0:
            self.btnDay.selected = YES;
            self.btnWeek.selected = NO;
            self.btnMonth.selected = NO;
            break;
        case 1:
            self.btnDay.selected = NO;
            self.btnWeek.selected = YES;
            self.btnMonth.selected = NO;
            break;
        case 2:
            self.btnDay.selected = NO;
            self.btnWeek.selected = NO;
            self.btnMonth.selected = YES;
            break;
        default:
            break;
    }
}

一阵啪啪啪，非常简单，代码敲完，大功告成！运行，效果如下：

看起来完全没什么问题嘛！
然而，当我点击“周”的时候，效果是这样的：

点击“月”的时候，效果是这样的：

纳尼？这是什么鬼？

排查问题过程

• 一开始我怀疑我的状态设置有问题，经过严格检查后，排除
• 再后来我怀疑是不是我直接给这些button设置frame不行啊？于是用masonry加各种约束，咦，貌似有效啊，点击“周”的时候，正常了！然而，当我点击“月”的时候，又被打脸了。What？Masonry还能这样？但是我再怎么试，也没法让“月”显示正常。
• 既然这么神奇，那我就只添加2个button，发现不行，只添加1个button，发现这个可以正常，我觉得更加莫名其妙了。
• 最终我把目标放到了背景色上，我设背景色的方式是调用的UIButton的setBackgroundImage:forState:方法

setBackgroundImage:[UIUtil createImageWithColor:bgColorNormal inRect:frame] forState:UIControlStateNormal

其中createImageWithColor: inRect:方法是创建一张指定颜色的图片，代码如下：

//UIColor 转UIImage
+(UIImage*)createImageWithColor:(UIColor*) color inRect:(CGRect)rect
{
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

看起来也没什么问题吧？但是还是试一试吧！
我将这个setBackgroundImage:forState:去掉了，直接使用backGroundColor属性，你猜怎么着？问题搞定！

最后

虽然问题解决了，但是我还是不知道具体原因，主要有两点，归根结底应该还是button的backgroundImage的问题

• 使用Masonry约束后，为什么“周”能显示正常，“月”就不行？
• setBackgroundImage:forState:为啥会导致这种问题？

有知道原因的请告知，非常感谢！