Swift实现自定义控件之---UISwitch

需求分析

1. 项目中有一个UI页面需要用到自定义UISwitch控件，页面如图：
   
2. 这里有两个需求，一个是播放gif动画：实现参考： swift 播放GIF；另外一个就是定义UISwitch.
3. demo 下载地址：Swift 实现自定义控件

实现自定义UISwich控件

1. 实现代码

//
//  KYLCustomSwitch.swift
//  
//
//  Created by yulu kong on 2019/7/16.
//  Copyright © 2019 ubt. All rights reserved.
//

import Foundation
import UIKit

/// 开关点击事件
typealias KYLSwitchValueChange = (Bool) -> ()

struct KYLSwitchConfig {
    
    /// 关闭背景颜色
    var offBgColor = UIColor(red: 0 / 255.0, green: 0 / 255.0, blue: 0 / 255.0, alpha: 0.2)
    /// 打开背景颜色
    var onBgColor = UIColor(red: 70 / 255.0, green: 0 / 255.0, blue: 3 / 255.0, alpha: 1)
    
    /// 关闭圆点颜色
    var offPointColor = UIColor(red: 153 / 255.0, green: 153 / 255.0, blue: 153 / 255.0, alpha: 1)
    /// 打开圆点颜色
    var onPointColor = UIColor(red: 158 / 255.0, green: 0 / 255.0, blue: 6 / 255.0, alpha: 1)
    
    /// 关闭背景图片
    var offBgImage: UIImage?
    /// 打开背景图片
    var onBgImage: UIImage?
    
    /// 关闭圆点图片
    var offPointImage: UIImage?
    /// 打开圆点图片
    var onPointImage: UIImage?
    
    /// 背景View的上下边距
    var bgMargin: CGFloat = 0
    
    /// 圆点的上下边距
    var pointMargin: CGFloat = 5
}

class KYLCustomSwitch: UIControl {
    
    /// 背景View
    var bgView: UIView!
    
    /// 开关圆点View
    var pointView: UIView!
    
    /// 配置
    var config: KYLSwitchConfig!{
        didSet{
            updateUI()
        }
    }
    
    var  valueChangedHandle: KYLSwitchValueChange?
    
    /// 开关状态
    var isOn: Bool = false {
        didSet{
            updateUI()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 底部背景
        bgView = UIView()
        addSubview(bgView)
        bgView.layer.masksToBounds = true
        bgView.isUserInteractionEnabled = false
        
        // 开关按钮
        pointView = UIView()
        addSubview(pointView)
        pointView.layer.masksToBounds = true
        pointView.isUserInteractionEnabled = false
        config = KYLSwitchConfig()
        
        addTarget(self, action: #selector(stateChanges), for: .touchUpInside)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局
        bgView.frame = CGRect(x: 0, y: config.bgMargin, width: frame.width, height: frame.height - config.bgMargin * 2)
        
        updateUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - 响应事件
    @objc func stateChanges() {
        isOn ? changeToOffAnimation() : changeToOnAnimation()
        isOn = !isOn
        valueChangedHandle?(isOn)
    }
    
}

// MARK: - UI 逻辑
extension KYLCustomSwitch {
    /// 设置圆角和背景色
    func updateUI() {
        
        bgView.layer.cornerRadius = (frame.height - config.bgMargin * 2) * 0.5
        bgView.backgroundColor = config.offBgColor
        pointView.layer.cornerRadius = (frame.height - config.pointMargin * 2) * 0.5
        pointView.backgroundColor = config.offPointColor
        
        let pointWidth = frame.height - config.pointMargin * 2
        if isOn {
            pointView.frame = CGRect(x: bgView.frame.maxX - pointView.frame.width - config.pointMargin, y: config.pointMargin, width: pointWidth, height: pointWidth)
            changeToOnPointViewStyle()
        }
        else {
            pointView.frame = CGRect(x: bgView.frame.minX + config.pointMargin, y: config.pointMargin, width: pointWidth, height: pointWidth)
            changeToOffPointViewStyle()
        }
    }
    
    private func changeToOnAnimation() {
        var frame: CGRect = pointView.frame
        frame.origin.x = bgView.frame.minX + config.pointMargin
        
        UIView.animate(withDuration: 0.25, animations: { [weak self] in
            guard let strongSelf = self else {
                return
            }
            strongSelf.pointView.frame = frame
            strongSelf.changeToOffPointViewStyle()
        })
    }
    
    
    private func changeToOffAnimation() {
        var frame: CGRect = pointView.frame
        frame.origin.x = bgView.frame.maxX - pointView.frame.width - config.pointMargin
        
        UIView.animate(withDuration: 0.25, animations: { [weak self] in
            guard let strongSelf = self else {
                return
            }
            strongSelf.pointView.frame = frame
            strongSelf.changeToOnPointViewStyle()
        })
    }
    
    private func changeToOnPointViewStyle() {
        bgView.backgroundColor = config.onBgColor
        pointView.backgroundColor = config.onPointColor
        if let img = config.onPointImage {
            pointView.layer.contents = img.cgImage
        }
        if let bgImg = config.onBgImage {
            bgView.layer.contents = bgImg.cgImage
        }
    }
    
    private func changeToOffPointViewStyle() {
        bgView.backgroundColor = config.offBgColor
        self.pointView.backgroundColor = config.offPointColor
        if let img = config.offPointImage {
            pointView.layer.contents = img.cgImage
        }
        if let bgImg = config.offBgImage {
            bgView.layer.contents = bgImg.cgImage
        }
    }
}

//测试1

//测试2

2. 测试代码

//
//  ViewController.swift
//  kyl_swift_UIDemo
//
//  Created by yulu kong on 2019/7/16.
//  Copyright © 2019 yulu kong. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    
    var customSwitch: KYLCustomSwitch!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        testSwitch()
    }
    
    private func testSwitch() {
        self.customSwitch = KYLCustomSwitch()
        self.view.addSubview(customSwitch)
        customSwitch.center = self.view.center
        customSwitch.bounds = CGRect(x: 0, y: 0, width: 200, height: 60)
        customSwitch.valueChangedHandle = {(isOn) in
            print(isOn)
        }
        
        var config = KYLSwitchConfig()
        config.offBgColor = UIColor(hex: 0xE9E9F2, alpha: 1.0)
        config.onPointImage = UIImage(named: "icon_switch_turn")
        config.offPointImage = UIImage(named: "icon_switch_angle")
        customSwitch.config = config
    }


}