Slider 기능이 있는 Button

소개

개인적인 의견입니다만, Slider는 어쩐지 사용하기 어려운 인상이 있습니다.
10keys 키보드보다 단연 공간 절약이고, UI의 인상이 소프트가 되는 생각이 들고 몇번인가 검토하는 것은 있었습니다만, 결국 채용에 이르지 않았습니다.
그 원인의 하나로서, Slider는 좌우의 1차원적 조작밖에 없기 때문에, 입력할 수 있는 값의 다이나믹 레인지가 좁은 일이 있을까라고 생각했습니다.

하고 싶은 UX

그래서 2차원적 조작으로 값을 입력할 수 있는 UI 부품을 만들어 보았습니다.

Tap하면 디폴트의 숫자를 입력할 수 있어 Slider와 같이 Drag하면 사이즈가 커지면서 입력할 수 있는 값도 커진다는 사양으로 했습니다.

아래 그림은 기본값이 1분인 Button이 Drag에 의해 입력값이 15분으로 커진 곳입니다. 다이나믹 레인지를 벌기 위해서, 10초, 1분, 3분과 여기에서 소개하고 있는 버튼을 3개 사용하고 있습니다.

코딩

버튼 영역 내에서 touchDown,Drag,touchUp 이벤트를 buttonDown(), buttonUp(), buttonDrag()로 처리하고 있습니다.

buttonUp() 에서는, 원래의 사이즈에 애니메이션으로 돌려주고 있습니다. 값(value)을 사용하는 것은 같은 이벤트를 처리하는 외부 코드를 상정하고 있습니다. (title 레이블은 이벤트 처리 전후 관계에서 재설정되므로 value 속성을 사용하는 형식입니다.)

buttonDown()에서는, 위 그림과 같이 버튼을 투과하는 일도 있으므로, 자신을 최전면에 가져오고 있습니다. 또한 value 프로퍼티를 이 타이밍에서 초기값(rate)으로 되돌리고 있습니다.

buttonDrag() 에서는, 버튼의 사이즈와 라벨을 변경을 합니다. value는 rate의 정수배가 됩니다.

slideAreaButton.swift

import UIKit

class slideAreaButton: UIButton { // クラス名が小文字始まりなのはご愛嬌ｗ
    var value:Int = 1
    var rate:Int = 1
    private var size:CGSize = CGSize.zero
    private var origin:CGPoint = CGPoint.zero

    private func init_sub() {
        setOriginSize()
        self.addTarget(self, action:#selector(buttonUp) ,   for: .touchUpInside)
        self.addTarget(self, action:#selector(buttonDown) , for: .touchDown)
        self.addTarget(self, action:#selector(buttonDrag) , for: .touchDragInside)
        self.addTarget(self, action:#selector(buttonCancel),for: [.touchUpOutside, .touchCancel])
        self.setTitle("\(rate)", for: .normal)
    }

    override init(frame:CGRect) {
        super.init(frame:frame)
        init_sub()
    }

    init( _ rate:Int = 1 ) {
        super.init(frame:CGRect.zero)
        init_sub()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    func setOriginSize() {
        origin = self.frame.origin
        size   = self.frame.size
    }

    func buttonResize(_ delay:Double = 0) {
        UIView.animate(withDuration: 0.1, delay: delay, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.2, options: .curveEaseInOut, animations: {()->Void in
            self.frame.origin = self.origin
            self.frame.size   = self.size
        }, completion:{(BOOL)->Void in
            self.isHighlighted = false
        } )

    }

    func buttonUp(bt:UIButton) {
        buttonResize()
    }
    func buttonDown(bt:UIButton, forEvent: UIEvent) {
        self.superview?.bringSubview(toFront: self)
        setOriginSize()
        value = rate
    }
    func buttonDrag(bt:UIButton, forEvent: UIEvent) {
        let p = forEvent.allTouches!.first!.location(in: self.superview)
        let w = origin.x + size.width  - p.x
        let h = origin.y + size.height - p.y
        self.frame = CGRect(x:p.x, y:p.y, width:w , height:h )

        value = Int(w*h/size.width/size.height)*rate
        self.setTitle("\(value)", for: .highlighted)
    }
    func buttonCancel() {
        buttonResize()
    }

}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let bt = slideAreaButton()
        bt.frame = CGRect(x: 200, y: 400, width: 60, height: 60)
        bt.backgroundColor = .black
        bt.addTarget(self, action: #selector(printValue(bt:)), for: .touchUpInside)
        self.view.addSubview(bt)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func printValue(bt:slideAreaButton) {
        print(bt.value)
    }

}

읽어 주셔서 감사합니다.

이 버튼을 사용하여 타이머 앱을 게시하고 있습니다. 원한다면 꼭 사용해보십시오.
iTunes에서 Adjustable Timer 살펴보기