UIBarButtonItem的3种定制方法

鉴客 发布于 2012/01/09 16:55
阅读 7K+
收藏 4

工具栏按钮有3种主要的定制方法:1、在Interface builder中定制;2、setItems方法定制;3、addSubview方法定制。

最简单的方法是在Interface builder中定制。这种方法只需在Interface builder中将Bar Button Item的style设置为Plain,然后修改image属性就可以了。

但是,这种方式很可能不是你想要的结果。如果你有一张按钮图片,是这样的:

那么你用这种方式,很可能只能得到这样的结果:

工具栏上只显示了一个灰色的方块。为什么会这样?这是因为Bar Button Item并不是用你设置的图片作为按钮的背景图片。它用这张图片做了一张遮罩(即舍弃所有的颜色信息,只留取alpha值,你可以参考苹果 Quartz2D编程指南中的位图及遮罩一节),然后和Tool Bar的背景图进行了位图遮罩处理。因此不管你提供了什么样子的位图,Bar Button Item只会用到其中的alpha通道。由于你提供的位图是一张普通的图片,alpha通道除了透明部分外,其他像素的alpha值都是一样的(alpha=1),所以遮罩合成后,只会显示位图的轮廓,无法显示其中的文字和细节。

因此,为了显示按钮图片中的文字,我们必须对这张图片进行特殊处理。首先用图形编辑工具(如photoshop)打开它,使用滤镜中的Color Controls功能调整色彩饱和度、亮度和对比度,让它变成一张灰度图片(色彩饱和度调整为0):

然后用滤镜中的Mask to Alpha功能,将灰度转换成alpha值:

乍一看,好像图片变成空白了,其实不是,它只是把原来的颜色值转换为了alpha值,并且用不同透明度的白色表示。

好的,保存对图片的编辑。重新运行程序:

现在,按钮根据位图的alpha值显示,由于遮罩的原因,所有的颜色信息丢失,按钮只呈现了灰度渐变效果,而不是颜色渐变效果。

如果你对这个结果不满意,那么你只能用另一种方法:addSubview方法了。这个方法需要用代码实现:

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

btn.frame =CGRectMake(205, 5, 38, 38);

[btn setBackgroundImage:[UIImage imageNamed:@"按钮-返回1.png"] forState:UIControlStateNormal];

[btn addTarget: self action: @selector(goBackAction) forControlEvents: UIControlEventTouchUpInside];

[toobar addSubview: btn];

其中,按钮-返回1.png是一张颜色图片:

程序运行的结果是:

我们可以看到,位图的颜色信息仍然可用的,它也不需要你用图形编辑工具进行特殊处理。这个方法唯一不便的地方,是程序员必须自己计算按钮控件的frame。

最后是setItems方法。其实它跟第1种Interface builder方法并没有多少区别,仍然要对位图进行遮罩处理,因此它的实现也依赖于你的图形编辑技巧。只不过,它是用代码实现而不是用IB,因此要写类似如下的代码:

UIImage* img1=[UIImage imageNamed:@"按钮-返回2.png"];

    UIBarButtonItem*barItem1 = [[UIBarButtonItem alloc]

                               initWithImage:img1

                               style:UIBarButtonItemStylePlain

                               target:self

                               action:@selector(goBackAction)];

    [toobar setItems:[NSArray arrayWithObjects:barItem,barItem1,nil]];

加载中
返回顶部
顶部