自定義左右UISegmentedControl按鈕

Question

我想要自定義以下分段控件，使用第一個按鈕的左圖像和第二個按鈕的右圖像。我如何使用UIAppearance來做到這一點？

我想改變以下segmentedControl：

到類似的東西象下面這樣：

我想用一個自定義圖像的原因是，我可以改變按鈕的角落。如果你看看藍色的分段控制，它會更平方（我的圖像有它自己的角落）。

我在想這樣的事情，但沒有用：

UIImage *leftImage = [[UIImage imageNamed:@"leftControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 
UIImage *rightImage = [[UIImage imageNamed:@"rightControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 

[[UISegmentedControl appearance] setBackgroundImage:leftImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault ]; 
[[UISegmentedControl appearance] setBackgroundImage:rightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; 

Answer 1

你需要做一個背景圖片，爲您所有的細分，也圖像，這只是一個按鈕的左邊緣，作爲兩個按鈕之間的連接的圖像，以及作爲右邊緣的圖像。其中一些需要爲多個國家完成。因此，這裏是你的圖像列表：

• 左蓋，選擇
• 左蓋，未選中的
• 段的背景下，選擇
• 段的背景下，未選中的
• 右蓋，選擇
• 右蓋，未選中
• 中蓋，左選右未選
• 中蓋，未被勾選的狀態，右選擇
• 中蓋，雙雙入選
• 中蓋，都未被選擇

對於中蓋，你可以把它們放在這樣的：（文本從蘋果文檔）。

// Image between two unselected segments. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal 
       rightSegmentState:UIControlStateNormal barMetrics:barMetrics]; 
// Image between segment selected on the left and unselected on the right. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateSelected 
       rightSegmentState:UIControlStateNormal barMetrics:barMetrics]; 
// Image between segment selected on the right and unselected on the right. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal 
       rightSegmentState:UIControlStateSelected barMetrics:barMetrics]; 

如果您使用UIAppearance，顯然你的消息發送到外觀代理。

Answer 2

您需要提供以下圖象：選擇

• 段背景（這既具有左和右蓋）
  
• 段背景未選擇的（這既具有左和右蓋）
  
• 段中間，左側選定，右側未選中
  
• 段中間，左未選中，右鍵選擇
  
• 段中葉，左&正確選擇
  
• 段中葉，左&右側未選擇
  

然後用下面的代碼來設置：

/* Unselected background */ 
UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segment_background_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)]; 
[[UISegmentedControl appearance] setBackgroundImage:unselectedBackgroundImage 
              forState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Selected background */ 
UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segment_background_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)]; 
[[UISegmentedControl appearance] setBackgroundImage:selectedBackgroundImage 
              forState:UIControlStateSelected 
             barMetrics:UIBarMetricsDefault]; 

/* Image between two unselected segments */ 
UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segment_middle_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:bothUnselectedImage 
          forLeftSegmentState:UIControlStateNormal 
           rightSegmentState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Image between segment selected on the left and unselected on the right */ 
UIImage *leftSelectedImage = [[UIImage imageNamed:@"segment_middle_left_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:leftSelectedImage 
          forLeftSegmentState:UIControlStateSelected 
           rightSegmentState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Image between segment selected on the right and unselected on the left */ 
UIImage *rightSelectedImage = [[UIImage imageNamed:@"segment_middle_right_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:rightSelectedImage 
          forLeftSegmentState:UIControlStateNormal 
           rightSegmentState:UIControlStateSelected 
             barMetrics:UIBarMetricsDefault]; 

請注意，您必須調整可拉伸圖像中的封蓋尺寸才能與圖像匹配。

Answer 3

對於我來說，Maurizio的答案對我來說並不完全適用於工具欄中的分段控件;它一直在控件上顯示這些幻像線，因爲分頻器圖像不夠寬。

所以我做了我自己的。這裏是所有的圖像，你將需要Xcode和我也投入了Photoshop文件創建分段控制圖像，所以你可以改變造型：

https://s3.amazonaws.com/iwasrobbed/stackoverflow/Custom+Segmented+Control.zip

將這個在你的AppDelegate有它的變化外觀，使用工具條中的圖片附件的所有分段控制的，：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    [self customizeAppAppearance]; 
} 

- (void)customizeAppAppearance 
{ 
    // Toolbar 
    [[UIToolbar appearance] setBackgroundImage:[[UIImage imageNamed:@"toolbar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(22, 5, 22, 5)] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault]; 

    // Segmented Controls within Toolbars 

    // Unselected background 
    UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segmentInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:unselectedBackgroundImage 
                        forState:UIControlStateNormal 
                        barMetrics:UIBarMetricsDefault]; 

    // Selected background 
    UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segmentActive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:selectedBackgroundImage 
                        forState:UIControlStateSelected 
                        barMetrics:UIBarMetricsDefault]; 

    // Image between two unselected segments 
    UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segmentBothInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 10, 15, 10)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:bothUnselectedImage 
                     forLeftSegmentState:UIControlStateNormal 
                     rightSegmentState:UIControlStateNormal 
                       barMetrics:UIBarMetricsDefault]; 

    // Image between segment selected on the left and unselected on the right 
    UIImage *leftSelectedImage = [[UIImage imageNamed:@"segmentLeftActiveRightInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:leftSelectedImage 
                     forLeftSegmentState:UIControlStateSelected 
                     rightSegmentState:UIControlStateNormal 
                       barMetrics:UIBarMetricsDefault]; 

    // Image between segment selected on the right and unselected on the left 
    UIImage *rightSelectedImage = [[UIImage imageNamed:@"segmentRightActiveLeftInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:rightSelectedImage 
                     forLeftSegmentState:UIControlStateNormal 
                     rightSegmentState:UIControlStateSelected 
                       barMetrics:UIBarMetricsDefault]; 
}