Swiftで時間をスライドバー(?)で指定するものを作成したい

Question

Swiftで時間をスライドバー(?)で指定するものを作成したいと考えています。
以下の画像の赤枠のようなものです。ネットでライブラリ等を探してみたのですが、なかなか実装方法が分かりません。
お分かりになる方、ご教授ください。
ちなみに画像は「Skyscanner」です。

Answer 1

ちょっと試してみました。こんな感じでしょうか。

アイデアとしては、

• スライダのつまみ（thumb）の座標を得る
• その上に UILabel を表示させる

という流れになります。

具体的な流れについてはコードを見ていただければと思います。

ただし、

• thumb の座標を得るのに今回は　UIImageView を探す方法を用いた（teratailの過去問）。ただし、スライダの両端などに画像を追加した場合にはうまく動かないかもしれない。
• 再利用について考えていない。
• 目盛がない

などの問題もありますが、その辺りは質問者さんの方で改善していただければと思います。

import UIKit

class ViewController: UIViewController {
    // スライダは Interface Builder で　StoryBoard に配置
    // コードベースで追加してもいい
    @IBOutlet weak var slider: UISlider!
    
    let sliderLabelView: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        
        view.layer.shadowColor = UIColor.lightGray.cgColor
        view.layer.shadowOpacity = 1
        view.layer.shadowRadius = 2
        view.layer.shadowOffset = CGSize(width: 2, height: 2)
        
        return view
    }()
    
    let sliderLabel: UILabel = UILabel()
    
    // https://teratail.com/questions/271481
    func getCenter(slider: UISlider) -> CGPoint? {
        for subView in slider.subviews {
            if subView is UIImageView {
                let point = self.view.convert(subView.center, from: slider)
                print(point)
                print(self.view.center.x)
                return point
            }
        }
        return nil
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // スライダーの初期値
        slider.minimumValue = 0.0
        slider.maximumValue = 24.0
    }
    
    // MARK: - スライダーに触れた瞬間の処理
    // UISlider から Action を設定し、touch down と関連づける
    @IBAction func sliderTouchDown(_ sender: UISlider) {
        // 以前のアニメーションを削除する
        sliderLabelView.layer.removeAllAnimations()
        
        // Alpha を 1 に設定し、view の子ビューにする
        sliderLabelView.alpha = 1.0
        sliderLabelView.addSubview(sliderLabel)
        view.addSubview(sliderLabelView)
    }
    
    // MARK: - スライダーを移動中の処理
    // UISlider から Action を設定し、value changed と関連づける
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        // 取得する値を離散値にするための処理
        let value = Int(slider.value.rounded())

        // スライダーの thumb (丸い部分の中央座標を求める)
        guard let thumbCenter = getCenter(slider: slider) else {
            fatalError("Cannot get center of the slider thumb.")
        }
        
        // Skyscanner に似せるための処理。両端に達した時は　”指定しない”　と表示する
        if value == 0 || value == 24 {
            sliderLabel.text = "指定しない"
        } else {
            sliderLabel.text = String(value) + "時以降"
        }
        
        // ラベルの幅を文字列と等しくする
        sliderLabel.sizeToFit()
        
        // UIView の幅と高さを計算
        // ラベルより一回り大きくする
        let width = sliderLabel.frame.width + 16
        let height = sliderLabel.frame.height + 8
        var viewX = thumbCenter.x - width / 2
        
        guard let superView = sender.superview else {
            fatalError("Cannot find superview of the slider.")
        }
        
        // ラベルが画面からはみ出るときには、はみ出ないように X 値を調整する
        if viewX < 0 {
            viewX = 0
        } else if viewX > superView.frame.width - width {
            viewX = superView.frame.width - width
        }
        
        // ラベルの Y 座標はボタンの上 32 ポイントの位置
        let viewY = thumbCenter.y - height / 2 - 32
        
        // UIViewの座標を設定し、文字の大きさに合わせて丸みをつけ、ラベルの中央を UIView の中央とする
        sliderLabelView.frame = CGRect(x: viewX, y: viewY, width: width, height: height)
        sliderLabelView.layer.cornerRadius = height / 2
        sliderLabel.center = CGPoint(x: width / 2, y: height / 2)
    }
    
    // MARK: - スライダーから指を離したときの処理（スライダー内）
    // UISlider から Action を設定し、touch up inside と関連づける
    @IBAction func sliderTouchUpInside(_ sender: UISlider) {
        dismissLabel()
    }
    
    // MARK: - スライダーから指を離したときの処理（スライダー外）
    // UISlider から Action を設定し、touch up outside と関連づける
    @IBAction func sliderTouchUpOutside(_ sender: UISlider) {
        dismissLabel()
    }
    
    // MARK: - ラベルを消す処理
    func dismissLabel() {
        // スライダの thumb から指を離して 1.0 秒後に 0.5 秒かけてラベルをフェードアウトさせる
        //
        UIView.animate(withDuration: 0.5, delay: 1.0,
                       animations: {
                        self.sliderLabelView.alpha = 0.0 },
                       completion: { flag in
                        if flag {
                            self.sliderLabelView.removeFromSuperview()
                        }}
        )
    }
}