TabBar上加小圆点遇到的问题

圆点会变方？

TabBar圆点变方.jpg

• 右下角的“发现”，应该是一个小圆点，这里却是一个小方点，真是太奇怪了

• 现象发生在某个iPhone6的真机上，其他型号的机器和模拟器上都没有出现。

为什么会这样？

• 关于小红点代码

+ (UIImage *)imageWithColor:(UIColor*)color
{
    CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

- (UIImageView *)redDotImageView {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageWithColor:[UIColor redColor]]];
    imageView.bounds = CGRectMake(0, 0, 6, 6);
    imageView.layer.cornerRadius = 3;
    imageView.layer.masksToBounds = YES;
    return imageView;
}

先生成正方形纯色（红色）的UIImage，然后填充一个UIImageView，设一下圆角，半径（3）是边长（6）的一半。是一个小圆点。绕是绕了一点，原理应该正确

• 将有问题的手机接上XCode，用界面调试工具调试，看到的效果是正常的

页面调试.png

• 在程序其他地方的小红点，也是用这个方法做的，显示正常。

• 这应该是苹果手机本身的bug，并且和UITabbar有关

怎么解决？

• 上面用UIImageView来做小圆点，感觉有点绕。直接用UIView，用backgroundColor来做更简单一点

- (UIView *)redDotView {
    UIView *dotView = [[UIView alloc] init];
    dotView.bounds = CGRectMake(0, 0, 6, 6);
    dotView.layer.cornerRadius = 3;
    dotView.layer.masksToBounds = YES;
    dotView.backgroundColor = [UIColor redColor];
    return dotView;
}

• 这样修改后，“圆点”变“方点”的问题解决了。可是，“圆点”的右边像是被切了一点

右边被切掉一点点的圆点图.png

作为对比，上面“消息”图标右上角的“小红点”就比较好，下面Tabbar“发现”图标右上角的“小红点”就像是被切了一刀，感觉有点怪怪的。
这两个地方的关于“小红点”的代码是一样的，可是最终的样子就是有区别，估计是苹果自己的bug

• 让UI给“小红点”的切图，结果也是一样的，右边就是要“缺一块”。

• 用Tabbar自有的badge，圆点很圆，也没有“缺一块”的问题，可是圆点太大。这也要怪UI设计，不遵守苹果的指导规范。不过抱怨没有什么用，做成什么样子技术没有话语权。

怎么解决“缺一块”的问题？

• 既然始终要缺一块，那么就把图给大一点，中间的圆点小一点，留出“一圈”什么也没有的空白来“缺一块”

• “缺一块”的问题是苹果手机本身的问题，无法解决。不过这样做，“缺一块”缺在了没有内容的那“一圈”，那么“缺一块”也就看不出来了。

• 试了一下，效果还不错，先这么做吧。虽然是很奇怪的方法，不过至少效果上是达到要求了

带透明余量的圆点.png

红点四周有“一圈”保护带，专门用来“缺一块”保护，这里看不出来而已