ハンドルに値のあるUISliderが必要

Question

iOSアプリケーションにUISliderをハンドルのスライダの値で作成する必要があります。私が言いたいの

デモ画像：

それを行うことができポッドはありますか？

Answer 1

サードパーティのコントロールを必要とせず、スライダを自分で作成する必要もありません。あなたはまだUISliderを使用し、あなたの必要性:)

ステップ1のとおり、それをカスタマイズすることができます。

我々はそれが「白いISNをデフォルトされていないとして、我々は最小トラックの色を設定する必要があると見ることができるようにそれは???その幾分オレンジ、私はそれの正確なクールを知っていないので、赤に設定しています。あなたは好きな色を設定します:)

しかし、UISliderのsetMinimumTrackImageは、色がないことを期待しています。だから色からUIImageを作成することができます。私は一度だけ作成したいので、怠惰な変数として作成しています:)

コードはかなりシンプルです。私は:)その

ステップ2を説明する必要と考えていません：あなたのイメージから

を、私たちはスライダーのサム画像をカスタムにする必要があると結論付けることができます。しかし、テキストは進捗状況に基づいて変更する必要があるため、静的イメージとしては作成できません。

だからUISliderのIBOutletを作成し、スライダに作成した画像を設定しUISlider進捗状況に基づいて、親指の画像を返すメソッド:)

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! 
} 

ステップ3

を作成することができます:)好ましくは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) 

ステップ4：

があなたのスライダのIBActionを作成し、最終出力

@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) 
} 

を書きますEDIT

本当にわからないどのようにそれに気づいたが、あなたは慎重に、O/Pを見ている場合は、最小トラックイメージがUISlider側が四角になる設定でそれを見ることができる多く!!!!

スライダーエッジを丸くするには？

その我々は半球体（半円形）左側スライダ上の曲線の画像を持っていた場合、コードは一方、正方形の画像を返した使用して作成UIImageは正しく示していることになるので:)

半円を描き、それを画像に変換する書き込みパスは、角の半径を持つ円形画像を作成し、画像を半円のように見せることに興味がある画像の一部のみを繰り返すためにwithCapInsetsを利用しています。D

私たちが答える前に、別の質問に答えることができます：P

スライダーの高さを上げる方法

あなたのスライダーのサブクラスを作成し、あなたが10

するUISliderの高さを返しています見ることができるように

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) 
    } 
} 

を上書きするには、今すぐ戻って前の質問に行くことができます。 UISliderのエッジをカーブにする方法??

はここにやっている何:)

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! 
}() 

次のようにあなたのminColor怠惰な変数の宣言を変更します？幅と高さのレイヤーを10に作成し、角の半径を5に設定して半径5の円にします:)それはすべてです。

変更:)

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) 

次のようにのviewDidLoadでスライダーの画像を設定するために、あなたのコードそれらUIEdgeInsetsMake何である（3、5、5、4）??私は慎重画像（任意の曲線を持っていない部分）の一部のみを作り上げ、それを繰り返すのiOSを求めてい

:)ザッツすべて:)

は、どのように、最終的なO/Pはその後のように見えるん??