定制左和右右UISegmentedControl按钮

问题描述

我正在尝试自定义以下分段控件，第一个按钮使用左图像，第二个按钮使用右图像。我如何使用UIAppearance做到这一点？

I'm trying to customize the following segmented control, using a left image for the first button and a right image for the second button. How would I do this using UIAppearance?

我想更改以下segmentedControl：

I want to change the following segmentedControl:

类似下面的内容：

我想使用自定义图像的原因是我可以更改按钮的角落。如果你看一下蓝色分段控件，它会更加平方（我的图像有它自己的角落）。

The reason I want to use a custom image is so that I can change the corners of the buttons. If you look at the blue segmented control, it's more squared (my image has it's own corners).

我在想这样的东西但是没有用：

I was thinking of something like this but no use:

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];

推荐答案

您需要提供以下图片：

• 选择了段背景（左右上限）
  
  


• 未选择段背景（左右两边都有）
  
  


• 段中间，左选择，右未选择
  
  


• 段中间，左边未选中，右边选择
  
  


• 段中间，左侧和左侧正确选择
  
  


• 段中间，左侧和左侧未选中
  
  

• segment background selected (this has both left and right caps)
  
• segment background unselected (this has both left and right caps)
  
• segment middle, left selected, right unselected
  
• segment middle, left unselected, right selected
  
• segment middle, both left & right selected
  
• segment middle, both left & right unselected
  

然后使用以下代码进行设置：

And then use the following code to set:

/* 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];

请注意，您必须调整可伸缩图像中的大小以匹配您的图像。

Note that you'll have to adjust the cap size in the stretchable images to match your images.

这篇关于定制左和右右UISegmentedControl按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！