在 iOS 8 上自定义 UISegmentedControl [英] Customize UISegmentedControl on iOS 8

问题描述

iOS 7 和 8 似乎使自定义 UISegmentedControl 的旧方法完全不起作用.我一直在像过去一样设置分隔图像和所有内容，但似乎有一些在以前的 iOS 版本中不存在的新状态，因此出现了一些奇怪的视觉效果.

这是我正在使用的代码

//设置分隔图像self.setDividerImage(UIImage(named: "SegmentedControlNoneSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlRightSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Selected, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlRightSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Highlighted, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlLeftSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Normal, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Highlighted, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Selected, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Selected, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Highlighted, barMetrics: .Default)self.setDividerImage(UIImage(named: "SegmentedControlLeftSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Normal, barMetrics: .Default)//设置背景图片var normalBackgroundImage = UIImage(named: "SegmentedControlNormal")self.setBackgroundImage(normalBackgroundImage, forState: .Normal, barMetrics: .Default)var selectedBackgroundImage = UIImage(named: "SegmentedControlSelected");self.setBackgroundImage(selectedBackgroundImage, forState: .Selected, barMetrics: .Default)self.setBackgroundImage(selectedBackgroundImage, forState: .Highlighted, barMetrics: .Default)self.setBackgroundImage(selectedBackgroundImage, forState: .Disabled, barMetrics: .Default)self.setBackgroundImage(selectedBackgroundImage, forState: .Application, barMetrics: .Default)self.setBackgroundImage(selectedBackgroundImage, forState: .Reserved, barMetrics: .Default)

解决方案

现在应该处理的一些新状态:

//高亮的按钮仍然可以不选中[self.mySegmentedControl setBackgroundImage:unselectedBackgroundImageforState:UIControlStateHighlightedbarMetrics:UIBarMetricsDefault];//已选择的按钮在高亮时仍处于选中状态[self.mySegmentedControl setBackgroundImage:selectedBackgroundImageforState:UIControlStateHighlighted|UIControlStateSelectedbarMetrics:UIBarMetricsDefault];//当右侧部分突出显示但左侧部分被选中时处理[self.mySegmentedControl setDividerImage:leftSelectedImageforLeftSegmentState:UIControlStateSelectedrightSegmentState:UIControlStateHighlightedbarMetrics:UIBarMetricsDefault];//当右边的段已经被选中并且刚刚高亮并且右边是正常的时处理[self.mySegmentedControl setDividerImage:leftSelectedImageforLeftSegmentState:UIControlStateHighlighted|UIControlStateSelectedrightSegmentState:UIControlStateNormalbarMetrics:UIBarMetricsDefault];//当左段突出显示但右段被选中时处理[self.mySegmentedControl setDividerImage:rightSelectedImageforLeftSegmentState:UIControlStateHighlightedrightSegmentState:UIControlStateSelectedbarMetrics:UIBarMetricsDefault];//当左边的段已经被选中并且只是突出显示并且左边是正常的时处理[self.mySegmentedControl setDividerImage:rightSelectedImageforLeftSegmentState:UIControlStateNormalrightSegmentState:UIControlStateHighlighted|UIControlStateSelectedbarMetrics:UIBarMetricsDefault];

现在看来，devider 图像宽度很重要.它对内容标签的宽度和位置有影响.所以应该尽可能缩小图像.

iOS 7 and 8 seem to make the old ways of customizing UISegmentedControl not work entirely. I've been setting the divider images and everything like I always have in the past, but it appears that there are some new states that didn't exist in previous iOS versions, and as a result there are some weird visual effects.

Here's the code that I'm using

// Set divider images
    self.setDividerImage(UIImage(named: "SegmentedControlNoneSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlRightSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Selected, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlRightSelected"), forLeftSegmentState: .Normal, rightSegmentState: .Highlighted, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlLeftSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Normal, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Highlighted, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Selected, rightSegmentState: .Selected, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Selected, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlBothSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Highlighted, barMetrics: .Default)
    self.setDividerImage(UIImage(named: "SegmentedControlLeftSelected"), forLeftSegmentState: .Highlighted, rightSegmentState: .Normal, barMetrics: .Default)


    // Set background images
    var normalBackgroundImage = UIImage(named: "SegmentedControlNormal")
    self.setBackgroundImage(normalBackgroundImage, forState: .Normal, barMetrics: .Default)

    var selectedBackgroundImage = UIImage(named: "SegmentedControlSelected");
    self.setBackgroundImage(selectedBackgroundImage, forState: .Selected, barMetrics: .Default)
    self.setBackgroundImage(selectedBackgroundImage, forState: .Highlighted, barMetrics: .Default)
    self.setBackgroundImage(selectedBackgroundImage, forState: .Disabled, barMetrics: .Default)
    self.setBackgroundImage(selectedBackgroundImage, forState: .Application, barMetrics: .Default)
    self.setBackgroundImage(selectedBackgroundImage, forState: .Reserved, barMetrics: .Default)

解决方案

The are some new status which should be handled now:

//The highlighted button can be still unselected
[self.mySegmentedControl setBackgroundImage:unselectedBackgroundImage
                                   forState:UIControlStateHighlighted
                                 barMetrics:UIBarMetricsDefault];

//The alredy selected button is stil selected when it is highlighted
[self.mySegmentedControl setBackgroundImage:selectedBackgroundImage
                                   forState:UIControlStateHighlighted|UIControlStateSelected
                                 barMetrics:UIBarMetricsDefault];


//Handle when the right segment is highlighted but the left is selected
[self.mySegmentedControl setDividerImage:leftSelectedImage
                       forLeftSegmentState:UIControlStateSelected
                       rightSegmentState:UIControlStateHighlighted
                              barMetrics:UIBarMetricsDefault];

//Handle when the right segment is already selected and just highlighted and the right is normal
[self.mySegmentedControl setDividerImage:leftSelectedImage
                     forLeftSegmentState:UIControlStateHighlighted|UIControlStateSelected
                       rightSegmentState:UIControlStateNormal
                              barMetrics:UIBarMetricsDefault];

//Handle when the left segment is highlighted but the right is selected    
[self.mySegmentedControl setDividerImage:rightSelectedImage
                     forLeftSegmentState:UIControlStateHighlighted
                       rightSegmentState:UIControlStateSelected
                              barMetrics:UIBarMetricsDefault];

//Handle when the left segment is already selected and just highlighted and the left is normal
[self.mySegmentedControl setDividerImage:rightSelectedImage
                     forLeftSegmentState:UIControlStateNormal
                       rightSegmentState:UIControlStateHighlighted|UIControlStateSelected
                              barMetrics:UIBarMetricsDefault];

And it seems, that the devider image width is an important thing now. It has effect to the content label width and position. So the devider image should be as shrink as it can.

这篇关于在 iOS 8 上自定义 UISegmentedControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！