[Swift] UISliderをカスタマイズしてみる

-
iOSの標準コントロールに、UISliderというのがありますが、現在の値を表示したいと思ったことはないでしょうか。
プロパティを探してもそれらしいものが見つけられなかったので、UISliderを継承してオブジェクトを作ってみました。

UISlider


今回作成するオブジェクト



環境

MacOSX 10.14
Xcode 10.1
Swift 4
Target iOS 9.0


実現する内容

  • スライダーの値を表示する
  • スライダーの上に見出し（タイトル）を表示する
  • 増加量（ステップ量）を指定できるようにする


実装

SUISlider

UISliderを継承して、SUISliderを作成します。
ソースの全体像は下記の通りです。

import UIKit

public class SUISlider : UISlider {
    var labelTitle: UILabel
    var valueWidth: CGFloat = 60
    var stepValue : Float   = 0

    private var labelValue: UILabel
    private let SPACING: CGFloat = 8
    
    public override init(frame: CGRect) {

        labelTitle        = UILabel()
        labelValue        = UILabel()

        labelValue.textAlignment        = NSTextAlignment.right

        super.init(frame: frame)

        self.addSubview(labelTitle)
        self.addSubview(labelValue)

        self.addTarget(self,
                       action: #selector(self.onValueChanged(sender: )),
                       for: .valueChanged)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setup() {
        let pos             = CGPoint(x: self.frame.width - valueWidth - SPACING,
                                      y: (self.layer.bounds.origin.y) )
        labelValue.frame    = CGRect(x: pos.x , y: pos.y ,
                                     width: valueWidth,
                                     height: self.layer.frame.height  )

        let sz  = labelTitle.sizeThatFits(self.frame.size)
        labelTitle.frame    = CGRect(x: SPACING, y: SPACING,
                                     width: sz.width,
                                     height: sz.height)
    }
    
    override public func sizeThatFits(_ size: CGSize) -> CGSize {
        var szLayer = super.sizeThatFits(size)
        let szTitle = labelTitle.sizeThatFits(size)
        if szTitle.height > 0 {
            szLayer.height = szLayer.height + SPACING * 2
        }
        szLayer.height = szLayer.height + szTitle.height
        return szLayer
    }
    
    public override func layoutSubviews() {
        updateLabel()
        setup()
        super.layoutSubviews()
    }
    
    override public func trackRect(forBounds bounds: CGRect) -> CGRect {
        let sz    = labelTitle.sizeThatFits(self.frame.size)
        var frame = super.trackRect(forBounds: bounds)

        frame.size.width  = frame.width - valueWidth
        frame.size.height = 5
        
        if sz.height > 0 {
            frame.origin.y = sz.height + SPACING + (super.bounds.height - frame.size.height - (SPACING * 2 + sz.height))/2
        } else {
            frame.origin.y = super.bounds.midY
        }
        return frame
    }

    func updateLabel(){
        if stepValue > 0 {
            let intg : Int = Int(self.value / stepValue)
            self.value = Float(intg) * stepValue
        }
        labelValue.text  = String(format: "%0.2f", self.value )


    }
    
    @objc func onValueChanged(sender: SUISlider) {
        updateLabel()
    }
    
}

解説

レイアウト



コード


    override public func sizeThatFits(_ size: CGSize) -> CGSize {
        var szLayer = super.sizeThatFits(size)
        let szTitle = labelTitle.sizeThatFits(size)
        if szTitle.height > 0 {
            szLayer.height = szLayer.height + SPACING * 2
        }
        szLayer.height = szLayer.height + szTitle.height
        return szLayer
    }


sizeThatFitsをオーバーライドして、計算後の描画サイズを返します。
ここでは、見出しラベルに値がセットされている場合は、ラベルの高さ＋上下余白(8 x 2）を高さとして返します。
ラベルがない場合は、加算値が0になるため、変更なしとなります。


    override public func trackRect(forBounds bounds: CGRect) -> CGRect {
        let sz    = labelTitle.sizeThatFits(self.frame.size)
        var frame = super.trackRect(forBounds: bounds)

        frame.size.width  = frame.width - valueWidth
        frame.size.height = 5
        
        if sz.height > 0 {
            frame.origin.y = sz.height + SPACING + (super.bounds.height - frame.size.height - (SPACING * 2 + sz.height))/2
        } else {
            frame.origin.y = super.bounds.midY
        }
        return frame
    }


trackRectをオーバーライドして、バーの表示エリアのサイズを返します。
ここでは、見出しラベル表示分だけ下にずらしてます。（見出しラベルがなければ何もせずそのまま）
表示幅は、右端の値表示エリア分だけ少なくしてます。（初期値は60）


    func setup() {
        let pos             = CGPoint(x: self.frame.width - valueWidth - SPACING,
                                      y: (self.layer.bounds.origin.y) )
        labelValue.frame    = CGRect(x: pos.x , y: pos.y ,
                                     width: valueWidth,
                                     height: self.layer.frame.height  )

        let sz  = labelTitle.sizeThatFits(self.frame.size)
        labelTitle.frame    = CGRect(x: SPACING, y: SPACING,
                                     width: sz.width,
                                     height: sz.height)
    }

setup内でスライド値の表示ラベル、見出しラベルを配置してます。


    func updateLabel(){
        if stepValue > 0 {
            let intg : Int = Int(self.value / stepValue)
            self.value = Float(intg) * stepValue
        }
        labelValue.text  = String(format: "%0.2f", self.value )


    }

updateLabelでスライダ値をラベルテキストにセットしてます。 スライダ値の表示を少数以下２桁表示に固定するため、フォーマットを設定してます。 また、ステップ値を設定している場合は、スライド値をステップ値単位に丸める計算をしています。
updateLabelは、layoutSubviews(オーバーライド)とvalueChangeのイベントから呼び出してます。


使い方


    let sld1 = SUISlider()
    sld1.minimumValue = 0.0
    sld1.maximumValue = 1.0
    sld1.value        = 0.5
    sld1.stepValue    = 0.1
    sld1.backgroundColor = UIColor.lightText
    sld1.labelTitle.text = "Test"

    let sz1 = sld1.sizeThatFits((self.view?.bounds.size)!)
    sld1.frame = CGRect(x:0,y:100,
                       width:self.view.bounds.width,
                       height:sz1.height)

    self.view.addSubview(sld1)

使いたい画面で上記のような実装をします。

見出しラベルと値表示をセットにしているので、色々と使いやすいと思います。




コメント

コメントを投稿

このブログの人気の投稿

[Music] DTM初心者のためのドラム打ち込み その2

-
イメージ
目的 ドラム譜を見て打ち込みをする人を対象に、楽譜の奏法と打ち込みについてわかるようになる 自分で曲を書いてる人や耳コピで打ち込みをする人にとっては参考にならないかもです 楽譜と奏法 アクセント アクセントはバンド譜でも出てくるのでわかる方も多いかと思います。 音符の上に付いてる「＞」とか「＾」ですね。 「＞」も「＾」も他の音よりも大きく叩くことになります。 クラッシュは、ライドと区別するためにアクセント付きがクラッシュを意味してることもあります。 「＾」は、バンド譜では出てこないかもしれませんが、吹奏楽やマーチングではよく出てきます。「＞」よりも強いアクセントになり、メリハリをつけるためにオープンリムショット（打面の真ん中とフープを同時に叩く奏法）にすることが多いです。 GM音源だと、残念ながらオープンリムショットに該当する音がありません。 DAWなどに付いてる標準のドラム音源だと、それっぽい音も含まれてますが、明確に使い分けたものはないかもしれないです。 私が使っているドラム音源（BFD3.0）だと、リムショットの音は用意されています。 フラム（装飾音符） 上の楽譜で、2小節目の4拍目にある小さな音符です。 これは、４拍目の音の前に小さな音を足すことを意味してます。 演奏には２つの解釈があり、曲調によって使い分けることになります。 (1) メインとなる音を拍の頭に置いて、装飾音符を拍の前に叩く (2) 装飾音符を拍の頭に置いて、メインとなる音を拍の後で叩く 多くの場合は、(1)のケースになりますが、重い感じを出したい場合は、(2)にすると雰囲気が出ます。 装飾音符の位置は、64分音符で配置するといい感じに聞こえます。 フラムの音については、音源で用意されていることもありますが、私は使ってません。 理由は、フラムの種類によっては対応できないためです。 例えば、こんなのです。 装飾が２つ、３つある場合、用意された音では表現できなかったりします。 打ち込みだと、これらは表現はできます。 ２つ、３つ続く場合、64分音符で並べると、粒が出でないので、32分音符の３連譜で音を並べてます。 ロール ロールには、オープ
続きを読む

[Swift] StoryBoardを使用しない - UITextFieldで編集不可にする方法

-
イメージ
コーディングでUITextFieldの入力可否を制御する Swiftのバージョンにより実装方法が異なるようで、悩みました・・・。 UILabelを使えば、表示専用にはなりますが、状況によって編集/表示を切り替えたい場合には、UITextFieldの属性を切り替えられる方が便利。 StoryBoardだとControlにあるEnabledにチェックを入れると実現できるので、絶対に何かあるはず！ ってことで探しました。 環境 Xcode10 Swift 4.2 編集可否の制御方法 let txtAmount = UITextField() //　編集不可 txtAmount.isEnabled = false isEnabledをtrueにすると、編集可能となります。 感覚的に isXXXX のメソッドって、Get専用と思い込んで見逃してました。。。 スッキリ（笑
続きを読む