知识共享许可协议本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。本文仅作为个人学习记录使用，欢迎在许可协议范围内转载或使用，请尊重版权并且保留原文链接，谢谢您的理解合作。如果您觉得本站对您能有帮助，您可以使用RSS方式订阅本站，这样您将能在第一时间获取本站信息。

一直看qq之类的高大上的应用里面，他们的TableView上面右边消息数量总有个小红色的椭圆在外面，一直觉得这个高端大气上档次啊，如图：

QQ消息数量

怎么画

而且觉得挺好看的，一直想要弄了来试试看，结果一直没实现，google也似乎没得结果，总以为是字体啊，神马的设置，后来最近开始慢慢看Cocoa Drawing Guide的时候（后面补个学习笔记or心得or读后感XDDD），想了想有招了。

就是在drawRect:的时候应该就能在绘图之前就能把矩形花上去了把，那我们试试看喽。

1
2
3
4
5
6
7
8
9
10
11
12
13
- (void)drawRect:(NSRect)dirtyRect
{
    //设置下填充色，这里就用灰色啦，不那么抢眼
    [[NSColor colorWithCalibratedWhite:0.6 alpha:1] setFill];
    //根据view的框框，画个圆角矩形出来
    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:dirtyRect
                                                         xRadius:8
                                                         yRadius:8];
    //填充颜色
	[path fill];

    [super drawRect:dirtyRect];
}

有童鞋会问了，为啥[super drawRect:dirtyRect];要放在最后啊，重写方法的时候，不是要的话要把super的操作放在前面么？这是因为啊cocoa绘图的时候，会按照顺序来进行绘图，后面的代码绘制的图形会叠加在画布的上面，其实很好理解，就跟画画一样，后画在画布上的东西，肯定是盖住了之前画的东西吧（传说有的名画就是两层的Orz）

那在这里如果[super drawRect:dirtyRect];放在前了，那么就会先把文字花上去，之后，再用圆角矩形填充的时候，就会把文字的内容覆盖了。

我们来看看效果如何：

Result

yes，就是这样～

后记

再次证明了有问题一定是Apple的Guide没看仔细，好好看看的话很多东西，都能做的出来，水果公司还是给大家做了个很好使的积木了。

最后欢迎大家订阅我的微信公众号 Little Code

公众号

  • 公众号主要发一些开发相关的技术文章
  • 谈谈自己对技术的理解，经验
  • 也许会谈谈人生的感悟
  • 本人不是很高产，但是力求保证质量和原创