自定义 UISegmentedControl:如何更改所选片段图像的色调?
Customizing UISegmentedControl: how change tint color of selected segment's image?
我用过这个 for the UISegmentedControl
which works as you can see here.
但我希望 UISegementedControl
的工作方式略有不同。当我 select 一个片段时,我希望 selected 片段的图像将颜色更改为 colorGreyLight
而不是将背景颜色更改为 colorGreyDark
和 select ed segement 图像更改为 UIColor.clearColor()
(如您所见 here)
那我该怎么做呢?
我的代码
UISegmented 控件扩展:
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(tintColor), forState: .Selected, barMetrics: .Default)
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
UI分割控件:
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
如果对我使用的有任何疑问:
- IOS 9.2
- Swift 2
- Xcode 7.2
更新
好的,我已经按照 Keyur
的建议更改了我的代码(如下面的评论标记)
UISegmented 控件扩展:
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Selected, barMetrics: .Default) //change to clear color
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
UI分割控件:
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
(shapeSelector.subviews[0] as UIView).tintColor = colorGreyLight //added this line
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
selectShape()
函数:
func selectShape(sender: UISegmentedControl){
switch sender.selectedSegmentIndex{
case 0: //rectangle
shapeType = "rectangle"
(sender.subviews[0] as UIView).tintColor = colorGreyLight
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyDark
case 1: //circle
shapeType = "circle"
(sender.subviews[0] as UIView).tintColor = colorGreyDark
(sender.subviews[1] as UIView).tintColor = colorGreyLight
(sender.subviews[2] as UIView).tintColor = colorGreyDark
case 2: //triangle
shapeType = "triangle"
(sender.subviews[0] as UIView).tintColor = colorGreyDark
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyLight
default:
shapeType = "rectangle"
(sender.subviews[0] as UIView).tintColor = colorGreyLight
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyDark
}
}
除非我尝试过,selected 形状并不总是如您所见 here 突出显示的形状。它似乎几乎是随机突出显示形状,我不明白为什么。
如有任何帮助,我们将不胜感激!
- 在您的 removeborders() 函数中设置颜色。
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(UIColor.lightGrayColor()), forState: .Selected, barMetrics: .Default)
(shapeSelector.subviews[2] as UIView).tintColor = UIColor .redColor()
(shapeSelector.subviews[1] as UIView).tintColor = UIColor .redColor()
(shapeSelector.subviews[0] as UIView).tintColor = UIColor .redColor()
感谢 this post.
,我找到了答案
显然选择的索引不是分配色调颜色的可靠方法。相反,我必须自己跟踪这些片段。
这就是我在创建 UISegmentedControl shapeSelector
:
之后所做的
var segments: [UIView] = [UIView]()
for i in 0...shapeSelector.subviews.count-1{
segments.append(shapeSelector.subviews[i])
}
在我的 UISegmentedControl
函数中我做了:
func selectShape(sender: UISegmentedControl){
let i = sender.selectedSegmentIndex
for s in segments{
s.tintColor = colorGreyDark
}
segments[i].tintColor = colorGreyLight
switch i{
case 0:
shapeType = "rectangle"
case 1:
shapeType = "circle"
case 2:
shapeType = "triangle"
default:
shapeType = "rectangle"
}
}
现在一切正常!
完整代码
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Selected, barMetrics: .Default)
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
class DrawViewController: UIViewController {
var shapeSelector: UISegmentedControl = UISegmentedControl()
var segments: [UIView] = [UIView]()
override func viewDidLoad() {
super.viewDidLoad()
//set up shape selector
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(shapeTypeLabel.frame.maxX + sliderSpace, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center.y = shapeTypeLabel.center.y
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
for i in 0...shapeSelector.subviews.count-1{
segments.append(shapeSelector.subviews[i])
}
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
segments[0].tintColor = colorGreyLight
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
}
func selectShape(sender: UISegmentedControl){
let i = sender.selectedSegmentIndex
for s in segments{
s.tintColor = colorGreyDark
}
segments[i].tintColor = colorGreyLight
switch i{
case 0:
shapeType = "rectangle"
case 1:
shapeType = "circle"
case 2:
shapeType = "triangle"
default:
shapeType = "rectangle"
}
}
}
我用过这个UISegmentedControl
which works as you can see here.
但我希望 UISegementedControl
的工作方式略有不同。当我 select 一个片段时,我希望 selected 片段的图像将颜色更改为 colorGreyLight
而不是将背景颜色更改为 colorGreyDark
和 select ed segement 图像更改为 UIColor.clearColor()
(如您所见 here)
那我该怎么做呢?
我的代码
UISegmented 控件扩展:
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(tintColor), forState: .Selected, barMetrics: .Default)
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
UI分割控件:
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
如果对我使用的有任何疑问:
- IOS 9.2
- Swift 2
- Xcode 7.2
更新 好的,我已经按照 Keyur
的建议更改了我的代码(如下面的评论标记)UISegmented 控件扩展:
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Selected, barMetrics: .Default) //change to clear color
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
UI分割控件:
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
(shapeSelector.subviews[0] as UIView).tintColor = colorGreyLight //added this line
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
selectShape()
函数:
func selectShape(sender: UISegmentedControl){
switch sender.selectedSegmentIndex{
case 0: //rectangle
shapeType = "rectangle"
(sender.subviews[0] as UIView).tintColor = colorGreyLight
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyDark
case 1: //circle
shapeType = "circle"
(sender.subviews[0] as UIView).tintColor = colorGreyDark
(sender.subviews[1] as UIView).tintColor = colorGreyLight
(sender.subviews[2] as UIView).tintColor = colorGreyDark
case 2: //triangle
shapeType = "triangle"
(sender.subviews[0] as UIView).tintColor = colorGreyDark
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyLight
default:
shapeType = "rectangle"
(sender.subviews[0] as UIView).tintColor = colorGreyLight
(sender.subviews[1] as UIView).tintColor = colorGreyDark
(sender.subviews[2] as UIView).tintColor = colorGreyDark
}
}
除非我尝试过,selected 形状并不总是如您所见 here 突出显示的形状。它似乎几乎是随机突出显示形状,我不明白为什么。
如有任何帮助,我们将不胜感激!
- 在您的 removeborders() 函数中设置颜色。
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default) setBackgroundImage(imageWithColor(UIColor.lightGrayColor()), forState: .Selected, barMetrics: .Default)
(shapeSelector.subviews[2] as UIView).tintColor = UIColor .redColor()
(shapeSelector.subviews[1] as UIView).tintColor = UIColor .redColor()
(shapeSelector.subviews[0] as UIView).tintColor = UIColor .redColor()
感谢 this post.
,我找到了答案显然选择的索引不是分配色调颜色的可靠方法。相反,我必须自己跟踪这些片段。
这就是我在创建 UISegmentedControl shapeSelector
:
var segments: [UIView] = [UIView]()
for i in 0...shapeSelector.subviews.count-1{
segments.append(shapeSelector.subviews[i])
}
在我的 UISegmentedControl
函数中我做了:
func selectShape(sender: UISegmentedControl){
let i = sender.selectedSegmentIndex
for s in segments{
s.tintColor = colorGreyDark
}
segments[i].tintColor = colorGreyLight
switch i{
case 0:
shapeType = "rectangle"
case 1:
shapeType = "circle"
case 2:
shapeType = "triangle"
default:
shapeType = "rectangle"
}
}
现在一切正常!
完整代码
extension UISegmentedControl {
func removeBorders() {
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Selected, barMetrics: .Default)
setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
}
// create a 1x1 image with this color
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
let image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image
}
}
class DrawViewController: UIViewController {
var shapeSelector: UISegmentedControl = UISegmentedControl()
var segments: [UIView] = [UIView]()
override func viewDidLoad() {
super.viewDidLoad()
//set up shape selector
let types = ["rectangle", "circle", "triangle"]
shapeSelector = UISegmentedControl(items: types)
shapeSelector.frame = CGRectMake(shapeTypeLabel.frame.maxX + sliderSpace, 0, sliderHeight*3 + 30, sliderHeight)
shapeSelector.center.y = shapeTypeLabel.center.y
shapeSelector.tintColor = colorGreyDark
shapeSelector.removeBorders()
shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
for i in 0...shapeSelector.subviews.count-1{
segments.append(shapeSelector.subviews[i])
}
shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
segments[0].tintColor = colorGreyLight
shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
drawToolbar.addSubview(shapeSelector)
}
func selectShape(sender: UISegmentedControl){
let i = sender.selectedSegmentIndex
for s in segments{
s.tintColor = colorGreyDark
}
segments[i].tintColor = colorGreyLight
switch i{
case 0:
shapeType = "rectangle"
case 1:
shapeType = "circle"
case 2:
shapeType = "triangle"
default:
shapeType = "rectangle"
}
}
}