如何制作自定义 UISlider iOS？

Question

您好，我有一个在 android 中实现的所需样式的 UISlider 版本。

这不是一项简单的任务。现在我想要 iOS 中的相同滑块。我想知道是否有不从头开始绘制所有滑块的解决方案？或者任何建议。谢谢。

Answer 1

您需要做位的工作，但您不需要从头开始构建完整的解决方案。

添加标签很简单 - UISlider

的基本用法

"Stretching" 动画显示的轨道图像（或色调颜色）在中心左右会有点棘手，因为 UISlider 控件只有一个轨道/背景图像和一个"current" 在左侧拉伸的图像。

一种方法是将 UISlider 轨道图像设置为透明或隐藏，然后 "overlay" 滑块位于 "full line" 和 "blue line" 上方。当滑块值改变时（因为它被拖动），改变蓝线的框架。

使用自动布局和约束将使这变得非常简单。

编辑： 一个非常简单的例子。 "thumb" 故意移到 "custom slider bar" 下方以显示图像...

并且，这是获取该代码的代码：

import UIKit

class SliderViewController: UIViewController {

    // @IBOutlets needed, but I'm just showing the "code" here
    // ...

    @IBAction func sliderValueChanged(_ sender: Any) {

        if let s = sender as? UISlider {
            updateSlider(pct: CGFloat(s.value))
        }

    }

    func updateSlider(pct: CGFloat) -> Void {

        let p = (pct - 0.5) * 2.0

        theValueLabel.text = String(format: "%0.1f", p * 10)

        leftSideValueWidth.constant = p >= 0.0 ? 0.0 : (leftSideHolderView.frame.size.width * (-p))
        rightSideValueWidth.constant = p >= 0.0 ? (rightSideHolderView.frame.size.width * p) : 0.0

    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // init slider to center
        updateSlider(pct: 0.5)

        // set default left- and right-side "track" images to empty images
        theSlider.setMinimumTrackImage(UIImage(), for: .normal)
        theSlider.setMaximumTrackImage(UIImage(), for: .normal)

    }

}

黑色UIView 用于框架...灰色UIView 用于"slider bar"...两个透明UIView 用于左侧/右侧框架。 .. 两个蓝色 UIView - 每边一个。以及一个标准的 UISlider 控件。就这些了。

您还可以设置自定义 Thumb 图像，如果默认图像对您的需要来说太大的话。

如何制作自定义 UISlider iOS？

How to make a custom UISlider iOS?

ios

swift

uislider