So personalisieren und verwenden Sie UISlider in Swift

Sie hatten diese großartige Idee für eine App und möchten einen Schieberegler in der App verwenden, haben aber keine Ahnung, wie Sie ihn verwenden sollen, weil Sie ihn zum ersten Mal verwenden? Oder haben Sie es bereits benutzt und möchten es personalisieren? Suche nicht weiter, denn ich bin hier!

Daher werde ich diesen Artikel in zwei Teile aufteilen: Im ersten Teil wird Ihr Schieberegler BBBBEAUTIFULL! Und der zweite Teil (der schnellste), wie man auf seine Werte zugreift und sie benutzt.

So sollte unsere App am Ende des Prozesses sein (nur zum Lernen):

Unser Ziel!

Okay, fangen wir an. Im Voraus habe ich bereits einen Bildschirm erstellt, damit wir Spaß haben können. So sieht es aus:

Aktueller Bildschirm

Im Hintergrund haben wir eine UIImageView, eine große Beschriftung oben auf dem Bildschirm, einen Schieberegler und eine andere Beschriftung in der Mitte des Bildschirms. Nachdem wir den Bildschirm fertig haben, möchten wir unseren Schieberegler so ändern, dass er wie folgt aussieht:

Wie soll unser Slider aussehen?

Wir können sehen, dass sich dieser Schieberegler zu stark vom Standardschieberegler unterscheidet! Wie machen wir das? Lassen Sie uns zunächst die Struktur hinter diesem Schieberegler verstehen:

Was ist aus einem Slider gemacht

Ok, das ist neu! Wenn der Ball nach links geht, nähert er sich dem Minimalwert, und wenn er weit nach rechts geht, nähert er sich dem Maximalwert. Dieser kleine Kreis wird als Daumen bezeichnet, und die Linie, in der der Daumen verschoben wird, wird als Spur bezeichnet. Aber warten Sie, Minimal- und Maximalwert? Wie viel kostet das? Kann ich das ändern? Ja, du kannst! Gehen Sie im Attributes Inspector links neben Ihren Xcode:

Wo werden die Slider-Werte geändert?

Und direkt darunter sehen Sie diese Felder:

Slider-Felder

Das value-Attribut befindet sich dort, wo sich der Daumen befindet. Dies ist der Wert, auf den Sie zugreifen möchten. Sie können auch dort ändern, wo sie beginnen! Das Minimum und das Maximum sind Werte, die manchmal nützlich sind. Nehmen wir an, Sie möchten einen Schieberegler, mit dem Sie das Rot von einer RGB-Farbe abändern können. Sie können das Minimum auf 0 und das Maximum auf 255 einstellen, um Ihr Leben einfacher zu gestalten.

Okay, aber wie mache ich das per Code? Davon haben wir im Code nichts angerührt! Lassen Sie uns zunächst die Ansicht teilen und in den Assistenten-Editor klicken, damit wir diese Aufgaben ausführen können.

Gut,! Beginnen wir nun damit, all diese Dinge in den Code einzufügen. Klicken Sie auf jedes Etikett und die Steuertaste, halten Sie sie gedrückt und ziehen Sie sie auf den Code, geben Sie ihm einen Namen und Sie können loslegen!

Ich habe meine Variablen folgendermaßen benannt:

 @IBOutlet schwach var appName: UILabel!
 @IBOutlet schwach var appSlider: UISlider!
 @IBOutlet schwach var showSliderValue: UILabel!

Ok, jetzt ist es Zeit, die Höhe des Schiebereglers zu ändern! Wir tun dies, indem wir eine benutzerdefinierte Klasse erstellen und eine ihrer Funktionen überschreiben. Warten Sie, das scheint viel zu kompliziert zu sein. Wie mache ich das? So geht's: Gehen Sie zum Ende der Datei, wenn die Klasse ViewController endet, und schreiben Sie:

Klasse CustomSlider: UISlider {}

Also, was ist hier los?

Der ursprüngliche Schieberegler hat eine feste Höhe, daher benötigen wir eine identische Klasse und ändern nur diesen Wert. Deshalb gibt es diese Vererbung (wir nennen die ursprüngliche Klasse mit dem ":", das alle ursprünglichen Attribute und Funktionen in den UISlider zieht), und wie ich bereits sagte, ist diese Klasse im Moment genau wie die ursprüngliche. Um die Höhe zu ändern, überschreiben wir die Funktion „trackRect“. Schreiben wir dies in unserer neuen Klasse:

 überschreibe func trackRect (forBounds bounds: CGRect) -> CGRect {
     let point = CGPoint (x: bounds.minX, y: bounds.midY)
     CGRect zurückgeben (Ursprung: Punkt, Größe: CGSize (Breite: bounds.width, Höhe: 20))
 }

Ich möchte einen Schieberegler mit der Höhe 20 verwenden. Der Schieberegler im Storyboard verwendet jedoch weiterhin die ursprüngliche Klasse. Wir haben eine neue erstellt, haben jedoch nirgendwo angegeben, dass der Schieberegler unsere Klasse verwenden soll. Okay! Es ist Zeit, zum Storyboard zu gehen und in den Identitätsinspektor zu klicken. Anschließend schreiben Sie die von uns erstellte Klasse in die Klasse direkt darunter.

Diese Änderungen werden nicht im Storyboard, sondern im Simulator angezeigt! Wenn Sie den Code ausführen ... funktioniert es! Das ist wirklich groß! Wir haben es geschafft!

Ok, was ist mit den Farben? Ich habe den klassischen FF0000 im ersten Teil und einen schönen 680000 im zweiten Teil des Schiebereglers verwendet. Aber wie ändern wir das? Gehen Sie zuerst zu den Assets und klicken Sie, während Sie die Steuertaste drücken, und wählen Sie dann "New Color Set" aus:

Setzen neuer Farben in den Assets

Wechseln Sie dann zu den Inspektoren und wählen Sie den Attribut-Inspektor aus. Gehen Sie nach unten und wählen Sie eine beliebige Eingabemethode aus. Ich bevorzuge die hexadezimale Methode (und ich habe es euch schon dieses Format gegeben).

Ändern der Eingabemethode in Hexadezimal

Erstellen Sie auf diese Weise 2 Farben und stellen Sie die gewünschten Farben ein. Auf diese Weise können Sie diese einfach verwenden oder in Zukunft ändern!

Denken Sie zum Ändern der Farben daran, dass wir das Minimum und Maximum hatten, während wir den Schieberegler sahen. Um die minimale Farbe der Spur (alles vor dem Daumen) zu ändern, rufen wir die Methode minimumTrackTintColor und das Maximum (alles nach dem Daumen) maximumTrackColor auf:

 appSlider.minimumTrackTintColor = UIColor (benannt: "MyLightRed")
 appSlider.maximumTrackTintColor = UIColor (benannt: "MyDarkRed")

Ooooook! Jetzt müssen wir den Daumen wechseln. Aber Moment mal, der Daumen… ist ein Bild?!? Nun müssen wir für sie Assets erstellen und sie dem Assets-Ordner hinzufügen. Ich habe einen Ball mit einer Größe von 30 x 30 Pixel für mein Projekt verwendet.

Dann schreibe

appSlider.setThumbImage (UIImage (benannt: "YourImageName"), für: .normal)

Okay! Lass es uns bauen und ... es funktioniert! Gut! Jetzt ist es Zeit, den Wert des Schiebereglers zu lesen. Unsere App sollte so aussehen:

Dieses Mal greifen wir zum Schieberegler im Storyboard, drücken die Strg-Taste und ziehen mit der Maus auf den Code. Diesmal wählen wir jedoch die Aktion aus:

Erstellen einer Aktionsreglerfunktion

Ok, jetzt wird diese Funktion jedes Mal aufgerufen, wenn wir den Schieberegler verwenden. Also, innerhalb der Funktion:

@IBAction func sliderValueChanged (_ Absender: Beliebig) {
     self.showSliderValue.text = "\ (self.appSlider.value)"
}

Wir greifen auf den Attributtext in der Beschriftung zu und setzen ihn auf das value-Attribut des Schiebereglers. Aber Sie können alles einstellen, zum Beispiel den Hintergrund Ihrer App ändern! Ihre Vorstellungskraft ist Ihre Grenze.

Wirklich, das ist erledigt. Dies war der einfachste Teil, nicht wahr?

Am Ende ist dies mein Code für diesen Artikel (wenn Sie etwas verpasst haben, finden Sie dies möglicherweise hilfreich):

UIKit importieren

Klasse ViewController: UIViewController {

    @IBOutlet schwach var appName: UILabel!
    @IBOutlet schwach var appSlider: UISlider!
    @IBOutlet schwach var showSliderValue: UILabel!
    
    Überschreibe func viewDidLoad () {
        super.viewDidLoad ()
// Nehmen Sie nach dem Laden der Ansicht weitere Einstellungen vor.
        appSlider.minimumTrackTintColor = UIColor (benannt: "MyLightRed")
        appSlider.maximumTrackTintColor = UIColor (benannt: "MyDarkRed")
        appSlider.setThumbImage (UIImage (benannt: "ThumbImage"), für: .normal)
    }
    
    @IBAction func sliderValueChanged (_ Absender: Beliebig) {
        self.showSliderValue.text = "\ (self.appSlider.value)"
    }
    
}

Klasse CustomSlider: UISlider {
    überschreibe func trackRect (forBounds bounds: CGRect) -> CGRect {
        let point = CGPoint (x: bounds.minX, y: bounds.midY)
        CGRect zurückgeben (Ursprung: Punkt, Größe: CGSize (Breite: bounds.width, Höhe: 20))
    }
}