[iOS] Path를 백분율로 그리기

먼저

나는 애니메이션으로 Path를 그리고 싶지 않고 백분율로 그리고 싶다.
Path 백분율을 지정하면 아래의 GIF 애니메이션처럼 슬라이더와 연동하여 그릴 수 있습니다.

어떻게 설치했어

실현시의 요점은 다음과 같다.CAShapeLayer의 UIView에서 - drawRect 인스턴스 그리기
- CAShapeLayer의 strokeEnd를 사용하여 백분율 지정

class PathStokeAdjustableView: UIView { 
    private let shapeLayer = CAShapeLayer()

    private var _stroke: CGFloat = 0 {
        didSet {
            shapeLayer.strokeEnd = _stroke
        }
    }
    var stroke: CGFloat {
        set {
            _stroke = max(0, min(1, newValue))
        }
        get {
            return _stroke
        }
    }

    //MARK: - XibやStroyboardから呼ばれた時
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.addSublayer(shapeLayer)
        shapeLayer.strokeEnd = 0
        layoutIfNeeded()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setNeedsDisplay()
    }

    //MARK: - コードで生成された時
    init() {
        super.init(frame: .zero)
        layer.addSublayer(shapeLayer)
        shapeLayer.strokeEnd = 0
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.addSublayer(shapeLayer)
        shapeLayer.strokeEnd = 0
    }

    //MARK: - Pathの描画
    override func drawRect(rect: CGRect) {
        UIColor.whiteColor().setFill()
        shapeLayer.lineWidth = 10
        shapeLayer.strokeColor = UIColor.blackColor().CGColor
        shapeLayer.fillColor = UIColor.whiteColor().CGColor
        shapeLayer.path = path().CGPath
    }
}

extension PathStokeAdjustableView {
    func path() -> UIBezierPath {
        let path = UIBezierPath()
        path.moveToPoint(CGPoint(x: CGRectGetMinX(bounds), y: CGRectGetMinY(bounds)))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds), y: CGRectGetMinY(bounds)))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds), y: CGRectGetMaxY(bounds)))
        path.addLineToPoint(CGPoint(x: CGRectGetMinX(bounds), y: CGRectGetMaxY(bounds)))
        path.addLineToPoint(CGPoint(x: CGRectGetMinX(bounds), y: CGRectGetMinY(bounds)-5))
        return path
    }
}

Storyboard에 UIView와 UISlider를 적당히 추가하십시오.

이후 PathStokeAdjustableView에서 지정Storyboard하느냐ViewController에서 지정addSubView하느냐에 따라 쓰기 방법이 달라진다.

Storyboard를 통해 지정된 경우

다음 캡처와 같이 UIView에 추가된 Custom Class를 지정하십시오.
PathStokeAdjustableView 자체의 실현은 ViewController의 값을 받았을 때Slider의 값으로 받은 것만 PathStokeAdjustableView의 실례에 맡긴다.

class ViewController: UIViewController {
    @IBOutlet weak var pathView: PathStokeAdjustableView!

    @IBAction func sliderValueChanged(sender: AnyObject) {
        guard let slider = sender as? UISlider else {
            return
        }
        pathView.stroke = CGFloat(slider.value)
    }
}

stroke에서 생성된 상황

ViewController 중 추가Storyboard 중의 커스텀 클래스는 변경하지 마시고 UIView 상태를 유지하십시오.

는 상기UIView를 UIView로 사용한다.

pathContainerView 실례를 생성하고 사용하세요PathStokeAdjustableView 등AutoLayout.

틀림없이 pathContainerView에 수치를 전달하는 실현이다.

class ViewController: UIViewController {
    @IBOutlet weak var pathContainerView: UIView!
    private let pathView =  PathStokeAdjustableView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        pathView.translatesAutoresizingMaskIntoConstraints = false
        pathContainerView.addSubview(pathView)
        pathContainerView.addConstraints([
            NSLayoutConstraint(item: pathView, attribute: .Top, relatedBy: .Equal, toItem: pathContainerView, attribute: .Top, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: pathView, attribute: .Right, relatedBy: .Equal, toItem: pathContainerView, attribute: .Right, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: pathView, attribute: .Left, relatedBy: .Equal, toItem: pathContainerView, attribute: .Left, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: pathView, attribute: .Bottom, relatedBy: .Equal, toItem: pathContainerView, attribute: .Bottom, multiplier: 1, constant: 0)
        ])
    }

    @IBAction func sliderValueChanged(sender: AnyObject) {
        guard let slider = sender as? UISlider else {
            return
        }
        pathView.stroke = CGFloat(slider.value)
    }
}

주의점

PathaddSubview는 지원되지만 stroke는 지원되지 않습니다.

최후

Path를 백분율로 그리도록 지정하면 stroke 값과 일치할 뿐만 아니라 fill 같은 스크롤 막대와 함께 Path를 그릴 수 있습니다.