Ändern Sie die Farbe des UIS-Schalters im Status "Aus"
97
Ich habe gelernt, dass wir das Erscheinungsbild der UISwitch-Schaltfläche im Status "Ein" ändern können. Ist es jedoch auch möglich, die Farbe des UIS-Schalters im Status "Aus" zu ändern?
Hey, @longpham, ich würde nur eine kleine Änderung am Radiuscode vornehmen. Für den Fall, dass sich die Höhe jemals ändert, würde ich Folgendes verwenden: mSwitch.layer.cornerRadius = mSwitch.frame.height / 2 (ich bin nur paranoid).
Felipe
@ Felipe Gringo Kein Problem. Hängen Sie von Ihrer Benutzeroberfläche ab. Standard UISwitchist 31pt.
Dies ist die richtige Antwort :) setTint ändert auch die "Umriss" -Farbe, wodurch der Hintergrund auf weißem Hintergrund visuell "ausgeblendet" wird.
Lukasz 'Severiaan' Grela
2
Beachten Sie, dass der Hintergrund rechteckig ist.
Lukasz 'Severiaan' Grela
Mein Switch wird mit geändert CGAffineTransformMakeScale(0.80, 0.80). Und dies funktioniert nicht mit skalierter Ansicht. Weil die Größe der Ansichtsebene nicht geändert wird. Wie kann ich das zum Laufen bringen?
Aykutt
1
@aykutt für skalierte Ansicht können Sie yourSwitch.layer.cornerRadius = yourSwitch.frame.height / 2 / scaleFactor
Hans Terje Bakke
37
Sie können die tintColorEigenschaft für den Switch verwenden.
switch.tintColor =[UIColor redColor];// the "off" colorswitch.onTintColor =[UIColor greenColor];// the "on" color
Beachten Sie, dass hierfür iOS 5+ erforderlich ist
Das Ausführen von Xcode 11.2.1 funktioniert beim Ausführen der App, zeigt jedoch nicht die Farbe in IB an. Trotzdem funktioniert es beim Bereitstellen auf dem Gerät.
Zumzum
9
Hier ist ein ziemlich guter Trick: Sie können direkt in die Unteransicht des UISwitch greifen, in der der Hintergrund "Aus" gezeichnet wird, und die Hintergrundfarbe ändern. Dies funktioniert in iOS 13 viel besser als in iOS 12:
Der beste Weg, um Hintergrundfarbe und -größe von UISwitch zu verwalten
Im Moment ist es Swift 2.3 Code
importFoundationimportUIKit@IBDesignableclassUICustomSwitch:UISwitch{@IBInspectablevarOnColor:UIColor!=UIColor.blueColor()@IBInspectablevarOffColor:UIColor!=UIColor.grayColor()@IBInspectablevarScale:CGFloat!=1.0override init(frame:CGRect){super.init(frame: frame)self.setUpCustomUserInterface()}
required init?(coder aDecoder:NSCoder){super.init(coder: aDecoder)self.setUpCustomUserInterface()}
func setUpCustomUserInterface(){//clip the background colorself.layer.cornerRadius =16self.layer.masksToBounds =true//Scale down to make it smaller in lookself.transform =CGAffineTransformMakeScale(self.Scale,self.Scale);//add target to get user interation to update user-interface accordinglyself.addTarget(self, action:#selector(UICustomSwitch.updateUI), forControlEvents: UIControlEvents.ValueChanged)//set onTintColor : is necessary to make it coloredself.onTintColor =self.OnColor//setup to initial stateself.updateUI()}//to track programatic updateoverride func setOn(on:Bool, animated:Bool){super.setOn(on, animated:true)
updateUI()}//Update user-interface according to on/off state
func updateUI(){ifself.on ==true{self.backgroundColor =self.OnColor}else{self.backgroundColor =self.OffColor}}}
Swift 4 einfachster und schnellster Weg, um es in 3 Schritten zu bekommen:
// background color is the color of the background of the switch
switchControl.backgroundColor =UIColor.white.withAlphaComponent(0.9)// tint color is the color of the border when the switch is off, use// clear if you want it the same as the background, or different otherwise
switchControl.tintColor =UIColor.clear
// and make sure that the background color will stay in border of the switch
switchControl.layer.cornerRadius = switchControl.bounds.height /2
Wenn Sie manuell die Größe des Schalters ändern (zB durch Verwendung von automatischem Layout), werden Sie die aktualisieren müssen switch.layer.cornerRadiusauch zB durch zwingende layoutSubviewsund nach dem Aufruf von Super Aktualisierung des Eckenradius:
Was ist IntegrationSwitch? und scheint auch nicht in iOS 11 zu funktionieren. Durch Ändern der Hintergrundfarbe ändert sich eine größere Ansicht um den Schalter
FlowUI. SimpleUITesting.com
@ iOSCalendarViewOnMyProfile Entschuldigung, es sollte seinswitchControl
Milan Nosáľ
1
@iOSCalendarViewOnMyProfile Es soll die Hintergrundfarbe ändern, nicht die Kugel selbst. In iOS Look & Feel ist das immer die Standardfarbe.
Milan Nosáľ
4
Sollten Sie andere Schalter für Ihre App benötigen, ist es möglicherweise auch eine gute Idee, den Code von @ LongPham in einer benutzerdefinierten Klasse zu implementieren. Wie andere bereits betont haben, müssen Sie für den Status "Aus" auch die Hintergrundfarbe ändern, da die Standardeinstellung transparent ist.
Der UIS-Schalter offTintColorist transparent, sodass alles, was sich hinter dem Schalter befindet, durchscheint. Anstatt die Hintergrundfarbe zu maskieren, reicht es daher aus, ein schalterförmiges Bild hinter dem Schalter zu zeichnen (diese Implementierung setzt voraus, dass der Schalter durch Autolayout positioniert wird):
func putColor(_ color:UIColor, behindSwitch sw:UISwitch){
guard sw.superview !=nilelse{return}let onswitch =UISwitch()
onswitch.isOn =truelet r =UIGraphicsImageRenderer(bounds:sw.bounds)let im = r.image { ctx in
onswitch.layer.render(in: ctx.cgContext)}.withRenderingMode(.alwaysTemplate)let iv =UIImageView(image:im)
iv.tintColor = color
sw.superview!.insertSubview(iv, belowSubview: sw)
iv.translatesAutoresizingMaskIntoConstraints =falseNSLayoutConstraint.activate([
iv.topAnchor.constraint(equalTo: sw.topAnchor),
iv.bottomAnchor.constraint(equalTo: sw.bottomAnchor),
iv.leadingAnchor.constraint(equalTo: sw.leadingAnchor),
iv.trailingAnchor.constraint(equalTo: sw.trailingAnchor),])}
Hier ist die einfachste Möglichkeit, die UISwitch-Off-State-Farbe mit einer Codezeile festzulegen . Das hier zu schreiben, da diese Seite zuerst auftauchte, als ich suchte und die anderen Antworten nicht halfen.
Dies ist, wenn ich den Aus-Status auf Rot setzen wollte und der Funktion viewDidLoad () hinzugefügt werden kann:
Hinweis - Damit wird tatsächlich die Hintergrundfarbe des Schalters eingestellt. Dies kann auch die Farbe des Schalters im eingeschalteten Zustand beeinflussen (obwohl dies für mich kein Problem war, da ich wollte, dass der Ein- und Ausschaltzustand dieselbe Farbe hat).
Eine Lösung dafür:
Binden Sie die Farben einfach mit einer "if else" -Anweisung in Ihre IBAction ein. Wenn der Schalter ausgeschaltet ist, färben Sie den Hintergrund rot. Wenn der Schalter eingeschaltet ist, lassen Sie den Hintergrund frei, damit die von Ihnen gewählte Ein-Farbe richtig angezeigt wird.
Dies geht in den Schalter IBAction.
if yourSwitch.isOn ==false{
yourSwitch.subviews[0].subviews[0].backgroundColor =UIColor.red
}else{
yourSwitch.subviews[0].subviews[0].backgroundColor =UIColor.clear
}
Ich habe ein Verhalten festgestellt, bei dem der Hintergrund des Schalters nach dem Fortsetzen der App aus dem Hintergrund wieder gelöscht wird. Um dieses Problem zu beheben, habe ich einfach den folgenden Code hinzugefügt, um die Farbe jedes Mal festzulegen, wenn die App in den Vordergrund tritt:
Ich bevorzuge nicht die Verwendung von SubViews, da Sie nie wissen, wann Apple die Hierarchie ändern wird.
Also benutze ich stattdessen die Maskenansicht.
es funktioniert mit iOS 12, iOS 13
private lazy var settingSwitch:UISwitch={let swt:UISwitch=UISwitch()// set border color when isOn is false
swt.tintColor =.cloudyBlueTwo
// set border color when isOn is true
swt.onTintColor =.greenishTeal
// set background color when isOn is false
swt.backgroundColor =.cloudyBlueTwo
// create a mask view to clip background over the size you expected.let maskView =UIView(frame: swt.frame)
maskView.backgroundColor =.red
maskView.layer.cornerRadius = swt.frame.height /2
maskView.clipsToBounds =true
swt.mask = maskView
// set the scale to your expectation, here is around height: 34, width: 21.let scale:CGFloat=2/3
swt.transform =CGAffineTransform(scaleX: scale, y: scale)
swt.addTarget(self, action:#selector(switchOnChange(_:)), for: .valueChanged)return swt
}()@objc
func switchOnChange(_ sender:UISwitch){if sender.isOn {// set background color when isOn is true
sender.backgroundColor =.greenishTeal
}else{// set background color when isOn is false
sender.backgroundColor =.cloudyBlueTwo
}}
Beginnend mit Matts Lösung habe ich sie einem benutzerdefinierten, IBDesignable-Steuerelement hinzugefügt. Es gibt ein Timing-Problem, didMoveToSuperview()das aufgerufen wird, bevor das offTintColorSet festgelegt wird, das behandelt werden muss.
#import "UISwitch+SAHelper.h"@implementationUISwitch(SAHelper)@dynamic offTint;-(void)setOffTint:(UIColor*)offTint {self.tintColor = offTint;//comment this line to hide border in off stateself.layer.cornerRadius =16;self.backgroundColor = offTint;}@end
Alles, was ich endlich auch mit transform und layer.cornerRadius verwendet habe. Aber ich habe die Übersetzung hinzugefügt, um im Mittelpunkt zu stehen.
Antworten:
Meine Lösung mit # swift2:
Ergebnis:
quelle
UISwitch
ist 31pt.Versuchen Sie dies zu verwenden
Vielen Dank an @Barry Wyckoff.
quelle
CGAffineTransformMakeScale(0.80, 0.80)
. Und dies funktioniert nicht mit skalierter Ansicht. Weil die Größe der Ansichtsebene nicht geändert wird. Wie kann ich das zum Laufen bringen?Sie können die
tintColor
Eigenschaft für den Switch verwenden.Beachten Sie, dass hierfür iOS 5+ erforderlich ist
quelle
Swift IBDesignable
Klasse im Identitätsinspektor festlegen
Ändern Sie die Farbe im Attributinspektor
Ausgabe
quelle
Hier ist ein ziemlich guter Trick: Sie können direkt in die Unteransicht des UISwitch greifen, in der der Hintergrund "Aus" gezeichnet wird, und die Hintergrundfarbe ändern. Dies funktioniert in iOS 13 viel besser als in iOS 12:
quelle
Im Moment ist es Swift 2.3 Code
quelle
In Swift 4+:
off
Zustand:on
Zustand:quelle
tintColor
hat keine Auswirkung.Swift 5:
quelle
Swift 4 einfachster und schnellster Weg, um es in 3 Schritten zu bekommen:
Wenn Sie manuell die Größe des Schalters ändern (zB durch Verwendung von automatischem Layout), werden Sie die aktualisieren müssen
switch.layer.cornerRadius
auch zB durch zwingendelayoutSubviews
und nach dem Aufruf von Super Aktualisierung des Eckenradius:quelle
switchControl
Sollten Sie andere Schalter für Ihre App benötigen, ist es möglicherweise auch eine gute Idee, den Code von @ LongPham in einer benutzerdefinierten Klasse zu implementieren. Wie andere bereits betont haben, müssen Sie für den Status "Aus" auch die Hintergrundfarbe ändern, da die Standardeinstellung transparent ist.
quelle
Der UIS-Schalter
offTintColor
ist transparent, sodass alles, was sich hinter dem Schalter befindet, durchscheint. Anstatt die Hintergrundfarbe zu maskieren, reicht es daher aus, ein schalterförmiges Bild hinter dem Schalter zu zeichnen (diese Implementierung setzt voraus, dass der Schalter durch Autolayout positioniert wird):[Aber siehe jetzt meine andere Antwort .]
quelle
2020 Ab Xcode 11.3.1 & Swift 5
Hier ist die einfachste Möglichkeit, die UISwitch-Off-State-Farbe mit einer Codezeile festzulegen . Das hier zu schreiben, da diese Seite zuerst auftauchte, als ich suchte und die anderen Antworten nicht halfen.
Dies ist, wenn ich den Aus-Status auf Rot setzen wollte und der Funktion viewDidLoad () hinzugefügt werden kann:
Hinweis - Damit wird tatsächlich die Hintergrundfarbe des Schalters eingestellt. Dies kann auch die Farbe des Schalters im eingeschalteten Zustand beeinflussen (obwohl dies für mich kein Problem war, da ich wollte, dass der Ein- und Ausschaltzustand dieselbe Farbe hat).
Eine Lösung dafür:
Binden Sie die Farben einfach mit einer "if else" -Anweisung in Ihre IBAction ein. Wenn der Schalter ausgeschaltet ist, färben Sie den Hintergrund rot. Wenn der Schalter eingeschaltet ist, lassen Sie den Hintergrund frei, damit die von Ihnen gewählte Ein-Farbe richtig angezeigt wird.
Dies geht in den Schalter IBAction.
Ich habe ein Verhalten festgestellt, bei dem der Hintergrund des Schalters nach dem Fortsetzen der App aus dem Hintergrund wieder gelöscht wird. Um dieses Problem zu beheben, habe ich einfach den folgenden Code hinzugefügt, um die Farbe jedes Mal festzulegen, wenn die App in den Vordergrund tritt:
Scheint einfacher als die anderen Antworten. Hoffentlich hilft das!
quelle
Sicherer Weg in Swift 3 ohne magische 16-Punkte-Werte:
quelle
XCode 11, Swift 5
Ich bevorzuge nicht die Verwendung von SubViews, da Sie nie wissen, wann Apple die Hierarchie ändern wird.
Also benutze ich stattdessen die Maskenansicht.
es funktioniert mit iOS 12, iOS 13
quelle
Arbeiten 100% IOS 13.0 und Swift 5.0 schalten beide Zustandsfarben gleich # ios13 #swift # swift5
quelle
XCode 11, Swift 4.2
Beginnend mit Matts Lösung habe ich sie einem benutzerdefinierten, IBDesignable-Steuerelement hinzugefügt. Es gibt ein Timing-Problem,
didMoveToSuperview()
das aufgerufen wird, bevor dasoffTintColor
Set festgelegt wird, das behandelt werden muss.quelle
Zielkategorie c, die auf jedem UISwitch im Projekt mithilfe von Code oder Storyboard verwendet werden kann:
Implementierung
quelle
Alles, was ich endlich auch mit transform und layer.cornerRadius verwendet habe. Aber ich habe die Übersetzung hinzugefügt, um im Mittelpunkt zu stehen.
Und ich habe backgroundColor und tintColor in Designer verwendet. Ich hoffe es hilft.
quelle