UI Sliderのカスタマイズがうまくいかない

Question

#やりたいこと

• UI Sliderのトラックイメージを変更したい

実装をして見たのですが正常に画像が適用されておらず、対処方法がわからないままです。

環境

• Swift4

• Xcode10

• iOS 11

• やってみたこと

        let vol_btn = UIImage(named:"VOL_BTN")!.ResizeUIImage(width:30, height: 30);
        let vol_min = UIImage(named:"VOL_ON")!.ResizeUIImage(width:30, height: 30)?.stretchableImage(withLeftCapWidth: 4, topCapHeight: 0);
        let vol_max = UIImage(named:"VOL_OFF")!.ResizeUIImage(width:30, height: 30)?.stretchableImage(withLeftCapWidth: 4, topCapHeight: 0);
        // スライダーカスタマイズ
        volumeSlider.setThumbImage(vol_btn, for: .normal)
        volumeSlider.setMaximumTrackImage(vol_max, for: .normal)
        volumeSlider.setMinimumTrackImage(vol_min, for: .normal)

結果

10/25追記

UIImage拡張

extension UIImage{
    func ResizeUIImage(width : CGFloat, height : CGFloat)-> UIImage!{
        
        let size = CGSize(width: width, height: height)
        
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        self.draw(in: CGRect(x:0, y:0, width:size.width, height:size.height))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return image
    }
    
}

VOL_ONの画像

##VOL_OFFの画像

完成イメージ

Comments

[takabosoft]

ResizeUIImage拡張メソッド（？）や、元の画像の情報が無いと解決方法を提示するのは難しいのだろうと思います。vol_minの方は正しく出ているように見えますので、vol_maxとの違いを探ってみればすぐに解決しそうですが・・・

[hiro_ns]

ご指摘ありがとうございます！　情報を追加いたしました。

[yskk]

正常に表示されない、というのの正常のイメージってどんな感じにしたいのでしょうか

[hiro_ns]

完成イメージを追加しました。最終的にはイメージの通りにしたいのですがmin側がmaxに寄ってしまっています。

[fuzzball]

とりあえず stretchableImage(withLeftCapWidth:topCapHeight:) は遥か昔に deprecated になっているのでので resizableImage(withCapInsets:) を使って下さい。

Answer 1

UISliderの問題ではなく、stretchableImage(withLeftCapWidth:topCapHeight:)の使い方を間違えています。

伸縮しない部分を左端からの位置で指定するので、VOL_ONの場合は30 - 4 = 26になります。

let vol_min = UIImage(named:"VOL_ON")!.ResizeUIImage(width:30, height: 30)?.stretchableImage(withLeftCapWidth: 26, topCapHeight: 0);

追記修正欄にも書きましたが、stretchableImage(withLeftCapWidth:topCapHeight:)はdeprecatedになっているので、resizableImage(withCapInsets:)を使って下さい。

Comments

[hiro_ns]

今まさにresizableImageの引数見て納得しました！
動かした所想定通りの動きになっていました！
助かりましたありがとうございます！！！

Answer 2

これらが逆です

volumeSlider.setMaximumTrackImage(vol_max, for: .normal)
volumeSlider.setMinimumTrackImage(vol_min, for: .normal)

vol_maxとvol_minを入れ替えてみてください

Comments

[hiro_ns]

回答ありがとうございます。
入れ替えて見ましたが丸の向きが変わるだけでした..