定制UISegmentedControl 皮肤

原文：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