模仿iPhone7Plus的相机变焦轮盘

2017-05-21

一个转轮控件RouletteView

产品突然给了一个需求，让做一个和iPhone7Plus一样用转轮变焦的控件

！！！这些产品和交互。。。就知道对着苹果抄。。。！！

研究了一下苹果的iPhone7Plus的变焦转轮，分析出以下需求

反馈区域

视图	反馈
标签	对变焦标签区域长按或左滑，弹出转轮
转轮(可见)	转轮存在时，整个转轮区域的滑动为变焦调节
转轮(不可见)	转轮不存在时，初标签外的区域滑动为调节亮度(其它反馈)

手势

手势	反馈
长按	弹出转轮
滑动(左)	弹出转轮
滑动(垂直)	调节变焦距离

控件实现思路

转动效果的实现

让设计给画一个圆形的图片，在转动时旋转这个图片的Transform

设定一个阈值Range来控制旋转的最大和最小角度 代码中实用的是 range: CGFloat = 200

反馈区域的处理

因为要根据转轮图片是否出现调整反馈区域，所以

重写HitTest函数，在不同的情况下，调整反馈区域的大小来返回当前View

手势的处理

长按手势: 使用LongPressGestureRecoginze来接收长按手势让轮盘显示或者隐藏，根据文章Gesture和UITouch的互相作用注意设置 cancelsTouchesInView = false
左滑手势: 在 continueTracking 自己进行判断
上下滑动: 在 continueTracking 中进行运算从而旋转图片

代码展示


public class RouletteView: UIControl {


    //-----------------------------------
    // MARK: Property
    //-----------------------------------
    public let roulette: UIImageView = UIImageView(frame:CGRect.zero)
    public let icon: UILabel = UILabel(frame:CGRect.zero)
    public var title: (_ angle: CGFloat) -> String = { angle in return String(format: "%.1f", angle) }

    //-----------------------------------
    // MARK: Private
    //-----------------------------------
    private let range: CGFloat = 200
    private let pi_2: CGFloat = CGFloat.pi/2


    //-----------------------------------
    // MARK: UI
    //-----------------------------------
    override public init(frame: CGRect) {
        super.init(frame: frame)
        addRoulette()
        constraintRoulette()
        patternRoulette()
        addRouletteActionGesture()

    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    public override func layoutSubviews() {
        if !icon.frame.equalTo(self.bounds) {
            constraintRoulette()
        }
        super.layoutSubviews()
    }

    override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        if roulette.isHidden {
            return super.hitTest(point, with: event)
        }
        if roulette.frame.contains(point) {
            return self;
        }
        return super.hitTest(point, with: event)
    }

    //-----------------------------------
    // MARK: Setup UI
    //-----------------------------------
    func addRoulette() {
        self.addSubview(roulette)
        self.addSubview(icon)
    }

    func constraintRoulette() {
        icon.frame = self.bounds

        let diameter: CGFloat = min(UIScreen.main.bounds.width, UIScreen.main.bounds.height)
        roulette.bounds = CGRect(x: 0, y: 0, width: diameter, height: diameter)
        roulette.center = CGPoint(x: icon.center.x+diameter/7, y: icon.center.y)

        icon.layer.cornerRadius = icon.bounds.width/2
    }

    func patternRoulette() {
        icon.layer.borderWidth = 1
        icon.font = UIFont.systemFont(ofSize: 8)
        icon.layer.borderColor = UIColor.white.cgColor
        icon.textAlignment = NSTextAlignment.center
        icon.textColor = UIColor.white
        icon.text = "N/A"

        roulette.image = UIImage(framework: "uisit_roulette_circle")
        roulette.isHidden = true
    }

    //-----------------------------------
    // MARK: Action
    //-----------------------------------
    func addRouletteActionGesture() {
        let longPress: UILongPressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(gestureLongPress(recognizer:)))
        longPress.cancelsTouchesInView = false
        self.addGestureRecognizer(longPress)
    }

    @objc func gestureLongPress(recognizer: UILongPressGestureRecognizer) {
        if recognizer.state == UIGestureRecognizerState.began {
            roulette.isHidden = false
        }
    }

    @objc func leftPanShowRoulette(_ touch: UITouch) {
        if touch.previousLocation(in: self).x - touch.location(in: self).x > 5 {
            roulette.isHidden = false
        }
    }

    @objc func hideRoulette() {
        roulette.isHidden = true
    }

    //-----------------------------------
    // MARK: Rotate Roulette
    //-----------------------------------

    private func rotatedAngle(_ touch: UITouch) -> CGFloat {
        let cY:CGFloat = touch.location(in: self).y
        let pY:CGFloat = touch.previousLocation(in: self).y
        var angle: CGFloat = currentAngle() - ((cY - pY)/range)*CGFloat.pi
        angle = angle > pi_2 ? pi_2 : (angle < -pi_2 ? -pi_2: angle)
        return angle
    }

    private func currentAngle() -> CGFloat {
        return atan2(roulette.transform.b,roulette.transform.a)
    }

    private func rotateRoulette(_ touch: UITouch) {
        let angle: CGFloat = rotatedAngle(touch)
        roulette.transform = CGAffineTransform(rotationAngle: angle)
        icon.text = title(angle)
    }


    //-----------------------------------
    // MARK: Touch Track
    //-----------------------------------
    override public func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        if !roulette.isHidden {
            rotateRoulette(touch)
        }else {
            leftPanShowRoulette(touch)
        }
        return super.continueTracking(touch, with: event)
    }

    override public func endTracking(_ touch: UITouch?, with event: UIEvent?) {
        hideRoulette()
        super.endTracking(touch, with: event)
    }

    override public func cancelTracking(with event: UIEvent?) {
        hideRoulette()
        super.cancelTracking(with: event)
    }
}