原文:http://secxtanx.com/segbuttons.php
注: 本文是基于iOS3.2(2010年5月)所写。可能在当前iOS版本下无效。
SegmentedControl按钮是有用的。但是,它们只有内置的3种样式这一点,确实让人无语。与常规按钮不通,你无法为它设置一张图片来进行美化(SDK5.0可以)。为此,本文提出了一种简单的思路:
步骤 1 - 用IB创建一个SegmentedControl按钮
这个步骤很简单。打开IB,拖入一个SegmentedControl到视图中。现在暂时不用操心它的外观。
步骤 2 - 连接SegmentedControl
接下来,将在代码中配置SegmentedControl。这需要一个IBOutlet和一个IBAction:
@interfaceSegmentedDemoViewController : UIViewController {
IBOutlet UISegmentedControl *segControl;
}
- (IBAction)segSwitch:(UISegmentedControl* )sender;
@end
保存文件,用Ctrl+拖放连接IBOutlet和IBAction。
步骤 3 - 设计新按钮
这是最为有趣的一步——设计按钮的新样式。要做到什么地步完全依赖于你。下面,我会说明我在这一步中所进行的操作。
首先,我需要搞清除当前segmented按钮的大小——我的新按钮将和它一样大。我从屏幕上抓了一张图,然后将segmented按钮抠出来。
在photoshop(或者gimp等工具)中,我在这一层之上,添加新图层,然后画了一个新的按钮。删除老的按钮图层。
在新的按钮图片中,减号按钮的处于选中状态,加号按钮处于未选中状态。示例图片很粗糙,但作为教程,想必没人会苛求图片的精美程度吧?希望你在编写app时,不要象我一样。
接着我画了一张相反的图片,加号按钮被选中,而减号按钮未选中。
对于一般的“2段”按钮,两张图片就够了。如果你需要更多的按钮,或者允许两个按钮同时不选中/选中的话,你需要更多的图片。总的来说,为了对用户更加“友好”,对于每种可能的按钮状态你都需要一张图片。当所有图片准备好,你就可以进行下一步。
步骤 4 - 在IB中应用你的皮肤
奇迹在这一步发生。首先,在代码中加入令一个IBOutlet。这将是一个UIImageView,用于引用你所设计的按钮。只需要一行代码:
IBOutletUIImageView *segImage;
在IB中加入UIImageView之前,先将按钮图片加入到工程的Resources文件夹中。
在本例中我将图片命名为minusSelected.png和 plusSelected.png。建议文件名能代表按钮的状态。保存文件,打开Xib文件。拖入Image View到视图,并连接到新加的IBOutlet。
建议对ImageView进行缩放以适应按钮图片的大小。在ImageView的属性面板,设置Image为表示按钮默认状态的图片。在这里,我使用的是minusSelected.png。如果你想让图片背景透明,反选写有“Opaque”选项下面的复选框。老天,这个按钮真够难瞧的!但愿你能将它设计得稍微像样一点。
选中Segmented按钮,在属性面板中找到alpha属性,它位于背景色属性上面。将alpha设置为0.1——接近于不可见。如果你还是觉得太清晰(这取决于你的背景颜色),你可以将alpha值调的更低,但必须注意不要低到连按钮都看不见。这将默认的删除按钮上的默认文本标签(“First”和“Second”)。如果你在按钮上覆盖文字,你可以弄一个Label控件并用代码来切换他们(见后)。
现在,拖动ImageView并覆盖在segmented按钮上,如下所示:步骤 5 - 编写代码
剩下的事是将你设计的新按钮加到代码中。这需要我们实现segSwitch方法。这个方法实际上由switch/case语句构成,你应该相当熟悉了。这里也是你书写segmented按钮时间代码的地方。下列代码演示了如何用事先设计的图片来表示segmented按钮的状态——当然,你需要在这里加入额外的代码,否则你的按钮什么事情也不会做。
-(IBAction)segSwitch:(UISegmentedControl* )sender
{
switch (segControl.selectedSegmentIndex)
{
case 0:
/*Thefirst segmented object is selected.*/
segImage.image= [UIImage imageNamed:@"minusSelected.png"];
break;
case 1:
/*Thesecond segmented object is selected.*/
segImage.image= [UIImage imageNamed:@"plusSelected.png"];
break;
default:
/*Defaultsegmented object is selected.*/
segImage.image= [UIImage imageNamed:@"minusSelected.png"];
break;
}
}
Case 0 代表第1个按钮,case 1 代表第2个按钮,以此类推。这些代码所干的无非就一件事情:改变segImage的图片为按钮相应状态的图片。对于Case 0,是第1个按钮(减号按钮)被选中的状态。因为减号是第一个按钮,所以你需要将segImage的图片改变为minusSelected图片。default语句是出错或者case测试值超出你设定的状态的情况,最好将segmented按钮状态置回程序刚开始的默认状态。记住,如果你有超过两“段”的按钮,则应该增加更多的case语句。
结论
现在,你已经定制了UISegmentedControl的皮肤,而不再局限于苹果提供给你的3种样式——你不得不得承认,它们只相当于2.5种样式,因为其中两种实在是太相象了。这个示例是比较具体的,但我相信你能基于这种思路应用到更多的地方。我用两个隐藏按钮做过的类似的事情,当触摸它们时会切换不同图片,不过是验证一下这种思路而已。如果你的代码无法运行,本文所使用的Xcode项目在这里下载:
Download SegmentedDemoProject