自定义左右UISegmentedControlbutton

我试图自定义下面的分段控制，使用第一个button的左图像和第二个button的右图像。 我将如何使用UIAppearance来做到这一点？

我想改变下面的segmentedControl：

到类似如下的东西：

我想使用自定义图像的原因是我可以改变button的angular落。 如果你看看蓝色的分段控制，它更平方（我的图像有它自己的angular落）。

我正在想这样的事情，但没有用。

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

您需要提供以下图像：

• 段背景select（这有左和右帽）
  
• 段背景未选中（这有左和右帽）
  
• 段中间，左侧select，右侧未选中
  
• 段中间，左侧未select，右侧select
  
• 段中间，左右select
  
• 段中间，左侧和右侧未选中
  

然后使用下面的代码来设置：

 /* 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 2

对于我来说，Maurizio的答案对于我来说并不适用于工具栏中的分段控制。 它不断地在控件上显示这些幻影线，因为分割图像不够宽。

所以我做了我自己的。 以下是Xcode所需的所有图像，并且还将用于创build分段控制图像的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]; } 

Answer 3

您需要制作一个适用于所有细分的背景图像，也可以是一个只是button左边缘的图像，两个button之间的连接图像以及右边缘的图像。 其中一些需要为多个国家完成。 所以这里是你的图片列表：

• 左帽，选中
• 左帽，未选中
• 段背景，选中
• 段背景，未选中
• 右帽，选中
• 右帽，未选中
• 中间的帽子，左边选中了右边的select
• 中间的帽子，左侧未选中，右侧选中
• 中间的帽子，都选了
• 中间帽子，两个未被select

对于中间的帽子，你可以把它们放在这里：（来自Apple文档的文本）。

 // 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 ，显然你会发送这些消息到外观代理。