web-dev-qa-db-ja.com

UISliderのデフォルトのつまみをiOSコントロールセンターにあるもののように小さくする方法

私はアプリを開発していますが、カスタムUISliderがあります。
しかし、default thumbをiOSコントロールセンターのように小さく表示する方法について、いくつかの問題があります。
カスタムのサム画像ではなく、同じiOSサムが欲しいことに注意してください。これまでのところ、thumbRect(forBounds...)を試しましたが、運はありません。
助言がありますか？

swiftswift3uikituislider
9
UI Scuti

デフォルトのサム画像のサイズを変更することはできませんが、UISliderには、同様の小さな画像を渡すことができるsetThumbImage(_:for:)メソッドがあります。

enter image description here

View Controller viewDidLoadで：

let image:UIImage? = // ...
yourSlider.setThumbImage(image, for: .normal)
yourSlider.setThumbImage(image, for: .highlighted) // Also change the image when dragging the slider

APIリファレンスの スライダーの外観のカスタマイズ をご覧ください。

IOS10では、デフォルトのサム画像は、細い影が下に落ちたボーダー付きの白い円にすぎないように見えます（thumbTintColorを設定しない場合）。

これを使用して snippet 縮小可能な類似の画像を生成します;）

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = " \
<svg xmlns='http://www.w3.org/2000/svg' width='86' height='86'> \
<foreignObject width='100%' height='100%'> \
        <div xmlns='http://www.w3.org/1999/xhtml'> \
                <style> \
                #ios-uislider-thumb { \
                  -webkit-box-sizing: content-box; \
                  -moz-box-sizing: content-box; \
                  box-sizing: content-box; \
                  width: 66px; \
                  height: 66px; \
                  overflow: hidden; \
                  border: 1px solid #CCC; \
                  -webkit-border-radius: 33px; \
                  border-radius: 33px; \
                  background: #FFFFFF; \
                  -webkit-box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); \
                  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); \
                  margin : 5px 10px 15px 10px; \
                } \
                </style> \
                <div id='ios-uislider-thumb'></div> \
        </div> \
</foreignObject> \
</svg> \
";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
};
img.src = url;
<canvas id="canvas" style="border:2px dotted black;" width="86" height="86"></canvas>
30
Axel Guilmin

CGAffineTransformを使用するオプションがあります。

スイフト4

mySlider.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)

これにより、スライダーの幅と高さが変更されるため、インターフェイスに合わせて再調整する必要があります。

9
J. Martin

サムネイル画像と色合いを変更する場合、両方を使用することはできません。この問題には1つの回避策があります。プログラムで円形画像を作成し、画像の色を変更して、その画像をスライダーのつまみに割り当てます。このようにして、画像と色のサイズを変更することもできます。

完全に機能するサンプルコードを次に示します。

fileprivate func makeCircleWith(size: CGSize, backgroundColor: UIColor) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
    let context = UIGraphicsGetCurrentContext()
    context?.setFillColor(backgroundColor.cgColor)
    context?.setStrokeColor(UIColor.clear.cgColor)
    let bounds = CGRect(Origin: .zero, size: size)
    context?.addEllipse(in: bounds)
    context?.drawPath(using: .fill)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

この関数は次のように呼び出すことができます。

    func setSliderThumbTintColor(_ color: UIColor) {
    let circleImage = makeCircleWith(size: CGSize(width: 20, height: 20),
                   backgroundColor: color)
    slider.setThumbImage(circleImage, for: .normal)
    slider.setThumbImage(circleImage, for: .highlighted)
}

このメソッドsetSliderThumbTintColorは、UISliderのvalueChangedイベントで呼び出されます。

4
msmq

画像を使用せずにサムサイズとトラックサイズを変更できるUISliderサブクラスを作成しました。

import UIKit

class CustomSlider: UISlider {

    @IBInspectable var trackHeight: CGFloat = 3

    @IBInspectable var thumbRadius: CGFloat = 20

    // Custom thumb view which will be converted to UIImage
    // and set as thumb. You can customize it's colors, border, etc.
    private lazy var thumbView: UIView = {
        let thumb = UIView()
        thumb.backgroundColor = .yellow//thumbTintColor
        thumb.layer.borderWidth = 0.4
        thumb.layer.borderColor = UIColor.darkGray.cgColor
        return thumb
    }()

    override func awakeFromNib() {
        super.awakeFromNib()
        let thumb = thumbImage(radius: thumbRadius)
        setThumbImage(thumb, for: .normal)
    }

    private func thumbImage(radius: CGFloat) -> UIImage {
        // Set proper frame
        // y: radius / 2 will correctly offset the thumb

        thumbView.frame = CGRect(x: 0, y: radius / 2, width: radius, height: radius)
        thumbView.layer.cornerRadius = radius / 2

        // Convert thumbView to UIImage
        // See this: https://stackoverflow.com/a/41288197/7235585

        let renderer = UIGraphicsImageRenderer(bounds: thumbView.bounds)
        return renderer.image { rendererContext in
            thumbView.layer.render(in: rendererContext.cgContext)
        }
    }

    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        // Set custom track height
        // As seen here: https://stackoverflow.com/a/49428606/7235585
        var newRect = super.trackRect(forBounds: bounds)
        newRect.size.height = trackHeight
        return newRect
    }

}

結果：

enter image description here

3
Adam

  1. IOSコントロールセンターにある画像に似た画像をダウンロードします。

  2. 必要なサイズ（20x20以下）にスケーリングして、アセットに保存します。

  3. ViewDidLoadに次のコードを貼り付けます。

    self.yourSlider.setThumbImage(UIImage(named: "SliderName")!, for: .normal)
2
danutha