需求背景
我需要一个像这样的可以切换不同选择的按钮
我的实现
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:为啥会导致这种问题？
有知道原因的请告知，非常感谢！
