Ich brauche ein UISlider mit Wert auf dem Handle

Question

Ich muss eine UISlider in meiner iOS App mit dem Wert des Schiebereglers in der Handle machen.

Demo Bild von dem, was ich meine:

Gibt es eine Hülse, die es tun könnte?

Answer 1

Sie benötigen weder die Kontrolle eines Drittanbieters noch müssen Sie selbst einen Schieberegler erstellen. Sie können weiterhin die UISlider verwenden und es nach Ihrem Bedarf anpassen :)

Schritt 1:

Wie wir sehen können wir die Farbe für minimale Spur festlegen müssen und da es nicht weiß isn ist standardmäßig‘ t es ??? Es ist etwas orange, ich weiß nicht genau, was es bedeutet, und setze es deshalb auf rot. Sie setzen, welche Farbe Sie wollen :)

Aber UISlider setMinimumTrackImage erwartet eine UIImage nicht Farbe. So können wir ein UIImage aus Farbe erstellen. Erschaffe sie als faul Variable, weil ich es will nur einmal erstellt werden :)

-Code ist ziemlich einfach. Ich glaube, keine Notwendigkeit zu erklären, dass :)

Schritt 2:

Von Ihrem Bild, können wir schließen, dass der Daumen Bild des Gleiters Gewohnheit sein muss. Aber wir können es nicht als statisches Bild erstellen, weil sein Text sich aufgrund des Fortschritts ändern sollte, nicht wahr?

lässt also eine Methode erstellen, die Daumen Bild liefert, basierend auf UISlider Fortschritt :)

func progressImage(with progress : Float) -> UIImage { 
    let layer = CALayer() 
    layer.backgroundColor = UIColor.green.cgColor 
    layer.frame = CGRect(x: 0, y: 0, width: 50, height: 50) 
    layer.cornerRadius = 25 

    let label = UILabel(frame: layer.frame) 
    label.text = "\(progress)" 
    layer.addSublayer(label.layer) 
    label.textAlignment = .center 
    label.tag = 100 

    UIGraphicsBeginImageContext(layer.frame.size) 
    layer.render(in: UIGraphicsGetCurrentContext()!) 

    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return image! 
} 

Schritt 3

eine IBOutlet von UISlider erstellen und die Bilder, die Sie erstellt haben, slider :) vorzugsweise in ViewDidLoad.

self.myslider.setMinimumTrackImage(minColor, for: UIControlState.normal) 
     self.myslider.setMinimumTrackImage(minColor, for: UIControlState.selected) 
     self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal) 
     self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected) 

Schritt 4:

erstellen IBAction für Schieber und schreiben

@IBAction func sliderMoved(_ sender: Any) { 
    self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal) 
    self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected) 
} 

Endausgabe

Nicht wirklich sicher, wie viele es bemerkt haben, aber wenn Sie das o/p sorgfältig gesehen haben, können Sie sehen, dass minimale UISlider-Seiten quadratisch sind!

Wie Slider Kanten rund machen?

Sein, weil die UIImage, dass wir den Code erstellt wurde das Quadrat Bild Rückkehr auf der anderen Seite, wenn wir halb Kugel (Halbkreis) Bild mit der Kurve auf der linken Seite Schieber hätte richtig gezeigt haben :)

Als Schreibpfad zum Zeichnen eines Halbkreises und zum Umwandeln in ein Bild wird viel Zeit benötigt: PI erstellt kreisförmiges Bild mit Eckenradius und nutzt withCapInsets, um nur den Teil des Bildes zu wiederholen, der das Bild halbkreisförmig aussehen lässt: D

Bevor wir antworten, können wir eine weitere Frage beantworten: P

Wie erhöht man die Höhe des Schiebers ???

eine Unterklasse des Gleiters erstellen und

class MySlider: UISlider { 
    override func trackRect(forBounds bounds: CGRect) -> CGRect { 
     return CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.size.width, height: 10) 
    } 
} 

außer Kraft setzen Wenn Sie die Höhe der UISlider bin wieder sehen kann zur vorherigen Frage sein können 10.

Jetzt gehen Sie zurück. Wie man UISlider Kanten Kurve ??

Ihre minColor faul Variablendeklaration wie unten :)

let minColor : UIImage = { 
    let layer = CALayer() 
    layer.frame = CGRect(x: 0, y: 0, width: 10, height: 10) 
    layer.cornerRadius = 5 
    layer.backgroundColor = UIColor.red.cgColor 
    UIGraphicsBeginImageContext(layer.frame.size) 
    layer.render(in: UIGraphicsGetCurrentContext()!) 
    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return image! 
}() 

ändern Was hier tue ??? Erstelle eine Ebene mit der Breite und Höhe 10, setze den Eckenradius auf 5, was ihn zu einem Kreis mit Radius 5 macht :) Das ist alles.

Ändern Sie den Code Slider Bilder in viewDidLoad wie unten :)

self.myslider.setMinimumTrackImage(minColor.resizableImage(withCapInsets: UIEdgeInsetsMake(3, 5, 5, 4)), for: UIControlState.normal) 
     self.myslider.setMinimumTrackImage(minColor.resizableImage(withCapInsets: UIEdgeInsetsMake(3, 5, 5, 4)), for: UIControlState.selected) 
     self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal) 
     self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected) 

Was zu setzen sind solche UIEdgeInsetsMake (3, 5, 5, 4) ??

ich nur den Teil des Bildes (Teil, der keine Kurve haben) vorsichtig am Crafting alle :) und fragen iOS, sie zu wiederholen :) Das ist

Wie funktioniert final O/P aussehen dann ??