Xin chào tất cả các bạn

Thời gian gần đây, như các bạn có thể thấy cứ bước chân ra khỏi nhà là thấy đâu đâu cũng có những ô mã QR. Từ việc đi đá bát phở cũng quét thanh toán QR, đăng nhập zalo hay telegram cũng có thể quét QR, hay thậm chí trà đá vỉa hè cũng có QR luôn…. Điều đó chứng tỏ mã QR đang dần được ứng dụng rất rộng rãi vào tất cả các lĩnh vực trong cuộc sống, thay thế cho giấy tờ truyền thống cũng như giúp cuộc sống trở nên tiện lợi hơn.

Tuy nhiên nếu chỉ có mỗi mã QR thì cũng không giúp ích được gì khi mà không có những thiết bị đọc và giải mã những chiếc QR vi diệu này. Và những thiết bị để đọc mã QR cũng chẳng đâu xa ngay chính trên chiếc smart phone mà lúc nào cũng theo các bạn 24/7. Việc tích hợp QR Scan vào các ứng dụng di động ngày nay như một tính năng không thể thiếu cũng như giúp ứng dụng trở nên đa nhiệm hơn

Thời gian vừa qua mình cũng có cơ duyên được trải qua một dự án về ngân hàng và phát triển tính năng QRPay, một tính năng mà như các bạn có thể thấy lúc nào cũng xuất hiện trên các ứng dụng Internet Banking cũng như các ví điện tử. Vậy nên ở bài viết này, mình xin chia sẻ các bạn cách tạo một ứng dụng Scan QR đơn giản và những framework liên quan trên iOS bằng ngôn ngữ lập trình Swift. Let’s go !

Phần 1: Tìm hiểu về mã QR

QR là viết tắt của Quick response có thể tạm dịch là mã phản hồi nhanh. Đây là dạng mã vạch có thể đọc được bởi một máy đọc chuyên dụng hoặc bằng smartphone có chức năng chụp ảnh kèm với ứng dụng cho phép quét mã. Mã QR còn có thể được gọi là Mã vạch ma trận (Matrix-barcode) hoặc Mã vạch 2 chiều (2D), là một dạng thông tin đã được mã hóa và có thể hiển thị để máy quét mã có thể đọc được.

Mã QR là một mã vạch ma trận được phát triển bởi công ty Denso Wave vào năm 1994. Denso Wave là công ty con của Toyota. Mã QR gồm những chấm đen và các ô vuông trên nền trắng, nó thể chứa đa dạng các thông tin như URL, thông tin cá nhân, thời gian, địa điểm của một sự kiện nào đó, mô tả, giới thiệu một sản phẩm nào đó,…

Phần 2: AV Foundation Framework trong Swift

Như các bạn có thể thấy, để làm việc với Media trên các thiết bị iOS, Apple đã cung cấp rất nhiều các framework mạnh mẽ. Ở tầng cao nhất (high-level) là UIKit và AVKit, tầng thấp nhất (low-level) là CoreAudio, Core Media, Core Animation và ở giữa chính là nhân vật chính của chúng ta – AVFoundation

UIKit framework giúp dễ dàng kết hợp tính năng chụp ảnh tĩnh và quay video cơ bản vào ứng dụng. Cả Mac OS X và iOS đều có thể sử dụng thẻ HTML5 <audio> và <video> bên trong WebView hoặc UIWebView để phát nội dung âm thanh và video. 

Ngoài ra còn có AVKit framework, giúp đơn giản hóa việc xây dựng các ứng dụng phát video hiện đại. Tất cả các framework này đều thuận tiện và dễ sử dụng và nên thường được dùng khi thêm chức năng phương tiện vào ứng dụng. Tuy nhiên, mặc dù các framework này rất tiện lợi nhưng chúng thường thiếu tính linh hoạt và khả năng kiểm soát cần thiết cho các ứng dụng nâng cao hơn.

Ở tầng thấp nhất, chúng ta có các low-level framework, cung cấp chức năng hỗ trợ và được sử dụng bởi tất cả các framework cấp cao hơn. Hầu hết chúng đều là các framework cấp độ thấp, cực kỳ mạnh mẽ và hiệu quả, nhưng rất phức tạp để tìm hiểu và sử dụng, đồng thời yêu cầu chúng ta phải hiểu rõ về cách phương tiện được xử lý ở cấp độ phần cứng.

Chính vì vậy, vị cứu tính của chúng ta – AV Foundation nằm ở giữa low-level và high-level framework. Mang trong mình sức mạnh cũng như hiệu năng của các low-level framework nhưng lại dễ tiếp cận, dễ đọc hơn cho các developer. Nó có thể làm việc trực tiếp với các framework cấp thấp như Core Media và Core Audio và hoạt động với các high-level framework như Media Player và Assets Library. Như vậy chúng ta có thể đủ thấy sức mạnh của AVF mạnh như nào phải k ạ ^^

AV Foundation là framework đầy đủ tính năng để làm việc với phương tiện nghe nhìn trên iOS, macOS, watchOS và tvOS. Sử dụng AV Foundation, chúng ta có thể dễ dàng phát, tạo và chỉnh sửa phim QuickTime và các tệp MPEG-4, HLS streams và xây dựng chức năng truyền thông mạnh mẽ vào ứng dụng.

Với AV Foundation, chúng ta có thể tạo ra các ứng dụng liên quan đến chụp ảnh và quay video, phát nhạc,… nói chúng tất cả những thứ liên quan đến cụm từ Media trên mobile và ngoài ra nó còn kèm theo rất nhiều thứ hay ho như điều khiển đèn flash phía trước và phía sau, âm thanh cho video…vv.

Như vậy có thể thấy AV Foundation framework khá lớn nên trong bài viết này, mình chỉ tìm hiểu một ứng dụng nhỏ của framework này đó là sử dụng camera trên thiết bị của Apple để đọc mã QR Code. Và chi tiết cách xây dựng ở phần 3 dưới đây.

Phần 3: Xây dựng ứng dụng QR Scan đơn giản bằng AV Foundation framework trên Swift

Đầu tiên chúng ta sẽ tạo một class QRScanCustomView như sau:

import Foundation
import UIKit
import AVFoundation

protocol QRScanCustomViewDelegate: AnyObject {
    func onDecodeFailed()
    func onDecodeSuccess(_ decodeString: String)
    func onCameraAccessDenied()
}

public class QRScanCustomView: UIView {
    weak var delegate: QRScanCustomViewDelegate?
    private var captureSession: AVCaptureSession?
    private var scanAreaWidth: CGFloat = 300.0
    private var scanAreaHeight: CGFloat = 300.0
    private var scanAreaXpos: CGFloat = 0.0
    private var scanAreaYpos: CGFloat = 0.0
    private var scanAreaCornerRadius: CGFloat = 8.0
    private var scanViewBackgroundColor = UIColor.black.withAlphaComponent(0.9)
    private var isAnimationFromTop: Bool = true
    private var animationTimer = Timer()
    private var animationView = UIView()
    private let gradientBackgroundView = UIView()
    private var gradientView = UIView()
    private let animationContainerView = UIView()
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    public override var layer: AVCaptureVideoPreviewLayer {
        if let layer = super.layer as? AVCaptureVideoPreviewLayer {
            return layer
        }
        return AVCaptureVideoPreviewLayer()
    }
}

extension QRScanCustomView {
    func startScanning() {
        captureSession?.startRunning()
    }
    
    func stopScanning() {
        captureSession?.stopRunning()
    }
    
    func startAnimation() {
        runAnimation()
        animationTimer = Timer.scheduledTimer(timeInterval: 2.0, target: self, selector: #selector(runAnimation), userInfo: nil, repeats: true)
    }
    
    func stopAnimation() {
        animationTimer.invalidate()
    }
    
    func setSizeOfScanArea(width: CGFloat, height: CGFloat) {
        scanAreaWidth = width
        scanAreaHeight = height
    }
    
    private func commonInit() {
        self.clipsToBounds = true
        captureSession = AVCaptureSession()
        
        guard let videoCaptureDevice = AVCaptureDevice.default(for: .video) else {
            return
        }
        let videoInput: AVCaptureDeviceInput
        do {
            videoInput = try AVCaptureDeviceInput(device: videoCaptureDevice)
        } catch {
            delegate?.onCameraAccessDenied()
            return
        }
        
        if captureSession?.canAddInput(videoInput) ?? false {
            captureSession?.addInput(videoInput)
        } else {
            scanningDidFail()
            return
        }
        
        let metadataOutput = AVCaptureMetadataOutput()
        
        if captureSession?.canAddOutput(metadataOutput) ?? false {
            captureSession?.addOutput(metadataOutput)
            
            metadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
            metadataOutput.metadataObjectTypes = [.qr]
        } else {
            scanningDidFail()
            return
        }
        
        layer.session = captureSession
        layer.videoGravity = .resizeAspectFill
        layer.frame = UIScreen.main.bounds
        
        captureSession?.startRunning()
        
        // MARK: SET AVAILABLE RANGE TO SCAN
        let rectView = layer.metadataOutputRectConverted(fromLayerRect: rectForScannerRange())
        metadataOutput.rectOfInterest = rectView
    }
    
    // MARK: Get rect of scan range
    private func rectForScannerRange() -> CGRect {
        scanAreaXpos = (UIScreen.main.bounds.size.width - scanAreaWidth) / 2
        scanAreaYpos = (UIScreen.main.bounds.size.height - scanAreaHeight) / 2
        let newRect = CGRect(x: scanAreaXpos, y: scanAreaYpos, width: scanAreaWidth, height: scanAreaHeight)
        return newRect
    }
    // MARK: Add view with clear scanner range
    func addQRScannerOverlayView(view: UIView) {
        view.addSubview(overlayView())
        view.layer.addSublayer(createCornerFrame(with: rectForScannerRange()))
        // Set authorize here to run it after qrScannerDelegate was declared
        setupScanAnimationView(view: view)
    }
    // MARK: Create scan range
    private func overlayView() -> UIView {
        let overlayView = UIView(frame: frame)
        overlayView.backgroundColor = scanViewBackgroundColor
        let path = CGMutablePath()
        path.addRoundedRect(in: rectForScannerRange(), cornerWidth: scanAreaCornerRadius, cornerHeight: scanAreaCornerRadius)
        path.closeSubpath()
        path.addRect(CGRect(origin: .zero, size: overlayView.frame.size))
        
        let maskLayer = CAShapeLayer()
        maskLayer.backgroundColor = UIColor.black.cgColor
        maskLayer.path = path
        maskLayer.fillRule = CAShapeLayerFillRule.evenOdd
        overlayView.layer.mask = maskLayer
        overlayView.clipsToBounds = true
        
        return overlayView
    }
    // MARK: Draw focus corner frame
    private func createCornerFrame(with rect: CGRect) -> CAShapeLayer {
        let length: CGFloat = 24.0
        let radius: CGFloat = 8.0
        let offset: CGFloat = 8.0
        let lineWidth: CGFloat = 4.0
        let distance: CGFloat = rect.size.width - offset * 2 - length * 2 - radius * 2
        
        let path = CGMutablePath()
        
        var start = CGPoint(x: rect.origin.x + offset, y: rect.origin.y + offset + radius + length)
        var end = CGPoint(x: start.x + radius + length, y: start.y - length - radius)
        path.move(to: start)
        path.addLine(to: CGPoint(x: start.x, y: start.y - length))
        path.addArc(tangent1End: CGPoint(x: start.x, y: start.y - length - radius),
                    tangent2End: CGPoint(x: start.x + radius, y: start.y - length - radius),
                    radius: radius)
        path.addLine(to: end)
        
        start = CGPoint(x: end.x + distance, y: end.y)
        end = CGPoint(x: start.x + length + radius, y: start.y + radius + length)
        path.move(to: start)
        path.addLine(to: CGPoint(x: start.x + length, y: start.y))
        path.addArc(tangent1End: CGPoint(x: start.x + length + radius, y: start.y),
                    tangent2End: CGPoint(x: start.x + length + radius, y: start.y + radius),
                    radius: radius)
        path.addLine(to: end)
        
        start = CGPoint(x: end.x, y: end.y + distance)
        end = CGPoint(x: start.x - radius - length, y: start.y + length + radius)
        path.move(to: start)
        path.addLine(to: CGPoint(x: start.x, y: start.y + length))
        path.addArc(tangent1End: CGPoint(x: start.x, y: start.y + length + radius),
                    tangent2End: CGPoint(x: start.x - radius, y: start.y + length + radius),
                    radius: radius)
        path.addLine(to: end)
        
        start = CGPoint(x: end.x - distance, y: end.y)
        end = CGPoint(x: start.x - length - radius, y: start.y - radius - length)
        path.move(to: start)
        path.addLine(to: CGPoint(x: start.x - length, y: start.y))
        path.addArc(tangent1End: CGPoint(x: start.x - length - radius, y: start.y),
                    tangent2End: CGPoint(x: start.x - length - radius, y: start.y - radius),
                    radius: radius)
        path.addLine(to: end)
        
        let shape = CAShapeLayer()
        shape.path = path
        shape.strokeColor = UIColor.orange.cgColor
        shape.lineWidth = lineWidth
        shape.fillColor = UIColor.clear.cgColor
        shape.lineCap = .round
        return shape
    }
    // MARK: Create scan animation view, size of inputView = size of QRScanView
    private func setupScanAnimationView(view: UIView) {
        animationContainerView.backgroundColor = .clear
        animationContainerView.frame = rectForScannerRange()
        view.addSubview(animationContainerView)
        
        animationView.frame = CGRect(x: animationContainerView.bounds.minX - 8,
                                     y: animationContainerView.bounds.minY,
                                     width: animationContainerView.bounds.width + 16,
                                     height: 3.0)
        animationView.layer.cornerRadius = animationView.frame.height / 2
        animationView.backgroundColor = UIColor.orange
        animationContainerView.addSubview(animationView)
        animationContainerView.bringSubviewToFront(animationView)
        
        gradientBackgroundView.frame = animationContainerView.bounds
        gradientBackgroundView.backgroundColor = .clear
        animationContainerView.addSubview(gradientBackgroundView)
        animationContainerView.bringSubviewToFront(gradientBackgroundView)
        gradientBackgroundView.clipsToBounds = true
    }
    
    @objc
    private func runAnimation() {
        animationView.clipsToBounds = false
        if isAnimationFromTop {
            for subView in gradientBackgroundView.subviews {
                subView.removeFromSuperview()
            }
            gradientBackgroundView.addSubview(createGradientViewEffect(rect: CGRect(x: 0,
                                                                                    y: -20,
                                                                                    width: gradientBackgroundView.bounds.width,
                                                                                    height: 20),
                                                                       isRevertColor: false))
            UIView.animate(withDuration: 2.0, animations: {
                self.animationView.transform = CGAffineTransform(translationX: 0,
                                                                 y: self.animationContainerView.frame.size.height)
                self.gradientView.transform = CGAffineTransform(translationX: 0,
                                                                y: self.animationContainerView.frame.size.height)
                Timer.scheduledTimer(timeInterval: 1.6, target: self, selector: #selector(self.hideGradientView), userInfo: nil, repeats: false)
            })
            
        } else {
            for subView in gradientBackgroundView.subviews {
                subView.removeFromSuperview()
            }
            gradientBackgroundView.addSubview(createGradientViewEffect(rect: CGRect(x: 0,
                                                                                    y: gradientBackgroundView.bounds.height,
                                                                                    width: gradientBackgroundView.bounds.width,
                                                                                    height: 20),
                                                                       isRevertColor: true))
            UIView.animate(withDuration: 2.0, animations: {
                self.animationView.transform = CGAffineTransform(translationX: 0,
                                                                 y: 0)
                self.gradientView.transform = CGAffineTransform(translationX: 0,
                                                                y: 0)
                Timer.scheduledTimer(timeInterval: 1.6, target: self, selector: #selector(self.hideGradientView), userInfo: nil, repeats: false)
            })
        }
        isAnimationFromTop = !isAnimationFromTop
    }
    
    @objc
    private func hideGradientView() {
        UIView.animate(withDuration: 0.4, animations: {
            self.gradientView.alpha = 0
        })
    }
    
    private func createGradientViewEffect(rect: CGRect, isRevertColor: Bool) -> UIView {
        gradientView.layer.sublayers?.removeAll()
        gradientView.frame = rect
        let gradientLayer: CAGradientLayer = CAGradientLayer()
        gradientLayer.frame = gradientView.bounds
        let firstColor = UIColor.orange.withAlphaComponent(0.01).cgColor
        let secondColor = UIColor.orange.withAlphaComponent(1).cgColor
        gradientLayer.colors = isRevertColor ? [secondColor, firstColor] : [firstColor, secondColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientView.layer.insertSublayer(gradientLayer, at: 0)
        gradientView.alpha = 0.6
        return gradientView
    }
    
    func scanningDidFail() {
        delegate?.onDecodeFailed()
        captureSession = nil
    }
    
    func scanSuccess(code: String) {
        delegate?.onDecodeSuccess(code)
    }
}

extension QRScanCustomView: AVCaptureMetadataOutputObjectsDelegate {
    public func metadataOutput(_ output: AVCaptureMetadataOutput,
                               didOutput metadataObjects: [AVMetadataObject],
                               from connection: AVCaptureConnection) {
        stopScanning()
        
        if let metadataObject = metadataObjects.first {
            guard let readableObject = metadataObject as? AVMetadataMachineReadableCodeObject else {
                return
            }
            guard let stringValue = readableObject.stringValue else {
                return
            }
            AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
            scanSuccess(code: stringValue)
        }
    }
}

Để có thể sử dụng thư viện, chúng ta phải import thư viện “import AVFoundation” và khởi tạo “captureSession” để quản lý session capture. Có thể hiểu đơn giản rằng captureSession giúp quản lý việc sử dụng camera của chúng ta.

Ngoài ra, vì ứng dụng của chúng ta sử dụng camera để capture mã QR nên phải khai báo Camera Usage Description trong Info.plist. Nếu không khai báo ứng dụng của chúng ta sẽ không thể chạy vì vi phạm policy của Apple

Tiếp theo chúng ta sẽ khởi tạo AVCaptureVideoPreviewLayer:

public override var layer: AVCaptureVideoPreviewLayer {
        if let layer = super.layer as? AVCaptureVideoPreviewLayer {
            return layer
        }
        return AVCaptureVideoPreviewLayer()
    }

Layer này chính là một layer hiển thị lên màn hình có vai trò thực hiện việc sử dụng camera để scan mã QR

Tạo ra các func để quản lý start, stop capture session:

   func startScanning() {
        captureSession?.startRunning()
    }
    
    func stopScanning() {
        captureSession?.stopRunning()
    }

Ở func commonInit(), chúng ta sẽ tạo khởi tạo videoCaptureDevice để sử dụng kiểu capture video sử dụng camera của chúng ta và add vào kiểu input của captureSession, ở đây có thể hiểu là chúng ta đang khởi tạo đầu vào cho ứng dụng của chúng ta sử dụng camera để scan QR

        guard let videoCaptureDevice = AVCaptureDevice.default(for: .video) else {
            return
        }
        let videoInput: AVCaptureDeviceInput
        do {
            videoInput = try AVCaptureDeviceInput(device: videoCaptureDevice)
        } catch {
            delegate?.onCameraAccessDenied()
            return
        }
        
        if captureSession?.canAddInput(videoInput) ?? false {
            captureSession?.addInput(videoInput)
        } else {
            scanningDidFail()
            return
        }

Sau khi thực hiện khởi tạo đầu vào, chúng ta sẽ khởi tạo đầu ra cho captureSession qua class AVCaptureMetadataOutput, ở đây mình đã custom một khoảng trắng giữa màn hình để tạo vùng scan bằng thuộc tính “rectOfInterest”. Nếu không gắn thuộc tính này, mặc định cả màn hình capture của chúng ra sẽ là vùng scan:

 let metadataOutput = AVCaptureMetadataOutput()
        
        if captureSession?.canAddOutput(metadataOutput) ?? false {
            captureSession?.addOutput(metadataOutput)
            
            metadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
            metadataOutput.metadataObjectTypes = [.qr]
        } else {
            scanningDidFail()
            return
        }
        
        layer.session = captureSession
        layer.videoGravity = .resizeAspectFill
        layer.frame = UIScreen.main.bounds
        
        captureSession?.startRunning()
        
        // MARK: Set scan Area
        let rectView = layer.metadataOutputRectConverted(fromLayerRect: rectForScannerRange())
        metadataOutput.rectOfInterest = rectView

Để hứng được output của captureSession. Chúng ta sẽ kế thừa delegate của AVCaptureMetadataOutput. Delegate này sẽ giúp chúng ta get được String decode được từ mã QR:

extension QRScanCustomView: AVCaptureMetadataOutputObjectsDelegate {
    public func metadataOutput(_ output: AVCaptureMetadataOutput,
                               didOutput metadataObjects: [AVMetadataObject],
                               from connection: AVCaptureConnection) {
        stopScanning()
        
        if let metadataObject = metadataObjects.first {
            guard let readableObject = metadataObject as? AVMetadataMachineReadableCodeObject else {
                return
            }
            guard let stringValue = readableObject.stringValue else {
                return
            }
            AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
            scanSuccess(code: stringValue)
        }
    }
}

Ngoài ra mình còn tạo ra các func để custom màn hình và tạo animation quét QR để trông ứng dụng của chúng ta trông đẹp mắt hơn. Các bạn có thể tham khảo ở phần source đầy đủ bên trên.

Về cơ bản chỉ cần khởi tạo đủ AVCaptureSession, tạo ra input và output cho AVCaptureSession và kế thừa delegate để hứng output là chúng ta có thể tạo ra một ứng dụng scan QR đơn giản.

Bài viết của mình vẫn đang trong quá trình update để đầy đủ và chi tiết hơn, nếu có góp ý gì mọi người có thể comment bên dưới để mình bổ sung và cải thiện thêm nhé.

Cảm ơn mọi người đã quan tâm đến bài viết của mình. Chúc mọi người có một ngày làm việc hiệu quả !

Là một iOS developer chắc hẳn các bạn không lạ gì với Cocoa MVC. Nó được coi là một trong những architecture pattern để phát triển ứng dụng iOS phổ biến nhất. Nó rất dễ sử dụng và được chính Apple khuyên dùng. iOS, MacOS và watchOS đều sử dụng cấu trúc này làm kiến ​​trúc mặc định để phát triển. Tuy được rất phổ biến và được Apple khuyên dùng nhưng nó cũng có những ưu điểm và nhược điểm, vì vậy bài viết này mình sẽ giới thiệu và giải thích cho các bạn về Cocoa MVC, ưu điểm, nhược điểm và khi nào nên chọn Cocoa MVC sử dụng cho ứng dụng của bạn.

Giải thích về Cocoa MVC

Cocoa MVC là viết tắt của Cocoa Model View Controller. Cocoa MVC gán các đối tượng trong ứng dụng iOS bằng một trong 3 vai trò sau: Model, View hoặc Controller. Mẫu kiến trúc này không chỉ xác định vai trò của các đối tượng trong ứng dụng mà nó còn xác định cả cách các đối tượng giao tiếp với nhau. Ba loại đối tượng này được phân tách khỏi các loại khác bằng các ranh giới trừu tượng và giao tiếp với các đối tượng thuộc các loại khác thông qua các ranh giới đó. Tập hợp các đối tượng của một loại MVC nhất định trong một ứng dụng đôi khi được gọi là một Layer, ví dụ: Layer model.

Model

Những đối tượng được gán với vai trò model trong mẫu kiến trúc Cocoa MVC sẽ làm nhiệm vụ đóng gói dữ liệu cụ thể cho một ứng dụng và xác định logic và tính toán để thao tác và xử lý dữ liệu đó. Những đối tượng này có thể có một hoặc nhiều mối quan hệ với các đối tượng mô hình khác và do đó, đôi khi lớp Model của một ứng dụng thực sự là một hoặc nhiều đối tượng. Phần lớn dữ liệu đều nằm ở Model sau khi nó được tải vào ứng dụng bằng các cách khác nhau(API, Files, …). Vì Model đại diện cho kiến thức và chuyên môn cho một vấn đề cụ thể nên nó có thể được tái sử dụng khi có các trường hợp tương tự. Các Model sẽ không có liên kết trực tiếp với View và View cũng không được trực tiếp sửa dữ liệu của Model mà nó sẽ phải thực hiện thông qua Controller.

Giao tiếp: Các hành động của người dùng trên View sẽ gọi đến Controller, khi này Controller sẽ gọi đến Model tương ứng để thực hiện cập nhật dữ liệu cho Model. Khi Model thay đổi (ví dụ: dữ liệu mới được nhận qua kết nối mạng), nó sẽ thông báo cho Controller, lúc này Controller sẽ cập nhật các Views thích hợp.

View

View là một đối tượng trong ứng dụng mà người dùng có thể nhìn thấy. Một đối tượng View biết cách tự vẽ và có thể phản hồi các hành động của người dùng. Mục đích chính của View là hiển thị dữ liệu từ Model của ứng dụng và cho phép chỉnh sửa dữ liệu đó. Mặc dù vậy, View thường được tách rời khỏi Model trong ứng dụng MVC.

Bởi vì bạn thường sử dụng lại và cấu hình lại chúng, nên View cung cấp tính nhất quán giữa các ứng dụng. Cả UIKit và AppKit framework đều cung cấp các bộ sưu tập View classes và Trình tạo giao diện(Interface Builder) cung cấp hàng tá view objects trong Thư viện của nó.

Giao tiếp: View tìm hiểu về các thay đổi trong dữ liệu của Model thông qua Controller của ứng dụng và truyền đạt các thay đổi do người dùng. ví dụ: văn bản được nhập vào TextField thông qua Controller đến Model của ứng dụng.

Controller

Controller vai trò trung gian giữa một hoặc nhiều View của ứng dụng và một hoặc nhiều Model của nó. Do đó, cController là một đường dẫn mà qua đó View tìm hiểu về những thay đổi trong Model và ngược lại. Controller cũng có thể thực hiện các tác vụ thiết lập và điều phối cho một ứng dụng và quản lý vòng đời của các đối tượng khác.

Giao tiếp: Controller diễn giải các hành động của người dùng được thực hiện trong View và truyền dữ liệu mới hoặc dữ liệu đã thay đổi tới Model. Khi Model thay đổi, Controller sẽ giao tiếp dữ liệu Model mới đó với View để chúng có thể hiển thị nó.

Ưu điểm của Cocoa MVC

Cocoa MVC có khá nhiều ưu điểm như sau:

1. Dễ hiểu và dễ sử dụng, vì vậy ai cũng có thể làm việc với nó một cách dễ dàng kể cả người mới
2. Được Apple khuyên dùng, vì vậy nó rất phổ biến khi gặp vấn đề sẽ dễ xử lí.
3. Giúp developer tách source của họ ra làm các đối tượng khác nhau với 3 vai trò riêng biệt. Khi có lỗi xảy ra chúng ta sẽ khoanh vùng được nơi xảy ra lỗi.
4. Tránh việc phải tạo một file quá dài, ảnh hưởng tới việc maintain ứng dụng
5. Có thể tái sử dụng và mở rộng

Nhược điểm của Cocoa MVC

1. Phân chia nhiệm vụ giữa các vai trò không đồng đều, View chỉ làm nhiệm vụ hiển thị và nhận action từ người dùng, Controller thì chỉ là trung gian điều hướng giữa View-Model, trong khi đó Model phải làm quá nhiều việc từ lưu dữ liệu, xử lí dữ liệu, thực hiện Business Logic của ứng dụng, … Đó là lí do Model còn hay được gọi với cái tên khác là Massive
2. Không hỗ trợ tốt cho UnitTest bởi View phải phụ thuộc vào cả Controller và Model. View sẽ không thể xử lý được vấn đề gì bởi View không thể nhận yêu cầu và cũng không có dữ liệu để hiển thị. Để tiến hành UnitTest trên View, chúng ta cần giả lập cả Controller và Model.
3. Đối với các ứng dụng quy mô lớn, quy trình xử lý nghiệp vụ có tính phức tạp cao, lượng dữ liệu lớn thì mô hình MVC trở nên rất cồng kềnh và khó để thực hiện.

Khi nào bạn nên sử dụng Cocoa MVC

Như đã phân tích ở trên, các bạn cũng đã nhìn thấy cách vận hành của mô hình này, các ưu điểm và nhược điểm của nó. Vậy khi nào thì chúng ta nên sử dụng Cocoa MVC cho ứng dụng của mình. Theo mình thì sẽ các tiêu chí như sau:

1. Khi bạn không biết về các architecture patterns khác tốt hơn, bạn chỉ hiểu rõ về MVC hoặc bạn và member trong team là người mới thì nên chọn Cocoa MVC cho dự án của mình.
2. Dự án của bạn có kích thước vừa và nhỏ, số iOS developer có số lượng ít, có ít hiểu biết về các architecture patterns khác.

Tổng kết

Qua bài viết trên mình đã giới thiệu cho các bạn về một architecture pattern rất phổ biến trong lập trình ứng dụng iOS. Ngoài ra cũng giúp các bạn hiểu rõ về cách hoạt động cũng như ưu điểm và nhược điểm của Cocoa MVC. Mình hi vọng bài viết này sẽ giúp các bạn có thể hiểu rõ hơn về Cocoa MVC cũng như có những lựa chọn tốt nhất cho từng dự án mà sắp tới các bạn phát triển.

Là một iOS developer, chắc hẳn mọi người đã từng làm những tính năng mà các UIKit của Apple không thể đáp ứng được yêu cầu. Lúc này chúng ta cần phải thực hiện custom hoặc tạo một common UI với cơ chế mới thoả mãn yêu cầu của khách hàng. Và ở dự án mình cũng có những yêu cầu như vậy, nên bài viết này mình sẽ hướng dẫn các bạn làm slider hai chiều trong Swift.

Mục đích của chúng ta là đạt được kết quả như sau:

I. Yêu cầu

Cần tạo một common slider thoả mãn các điều kiện như sau:

1. Slider được chia thành các đoạn bằng nhau có thể chỉnh sửa, Slider có 2 điểm kéo, có thể kéo được từ giá trị min tới giá trị max, kéo chồng lên nhau, khi kéo tới các điểm sẽ thực hiện rung.
2. Cho phép thay đổi giao diện

II. Giải pháp

1. Tạo một mảng string để lưu các điểm cho phép và dùng nó để tính toán và hiển thị dữ liệu cho Slider hai chiều
2. Dựa vào số phần tử trong mảng để tính khoảng cách giữa các điểm và vị trí của nó.
3. Đối với tính năng kéo mình sẽ dùng UIPanGestureRecognizer để xử lí. Khi kết thúc hành động kéo thì xác định vị trí của điểm được kéo so với các điểm trong mảng, nếu gần điểm nào thì tự di chuyển tới vị trí của điểm đó.

III. Hướng dẫn chi tiết

Để cho tất cả mọi người đều có thể thực hiện một các dễ dàng thì mình sẽ hướng dẫn chi tiết theo các bước như sau:

1. Tạo mới file swift

Chúng ta cần tạo mới file swift để làm common Slider hai chiều theo các bước sau:

Trong project, bấm chuột phải vào thư mục muốn tạo file -> new file -> chọn swift -> đặt tên cho file, ở đây mình đặt là: TWSlider.swift

2. Thêm nội dung và logic cho file TWSlider.swift

Trước tiên chúng ta cần thêm image vào asset của project để sử dụng cho slider, các bạn cũng có thể thêm các image tương ứng với yêu cầu của dự án đang làm.

Và chúng ta cũng cần thêm Then vào để setup UI cho tiện như sau

public protocol Then {}

public extension Then {
    @discardableResult
    func then(_ block: (Self) -> Void) -> Self {
        block(self)
        return self
    }
}

extension NSObject: Then {}
extension CGPoint: Then {}
extension CGRect: Then {}
extension CGSize: Then {}
extension CGPath: Then {}

1. Tạo protocol để bắn dữ liệu cần thiết ra màn hình cần xử lí logic

protocol TWSliderDelegate: AnyObject {
    func sliderScrolled(_ slider: TWSlider?,
                        toMinIndex minIndex: Int,
                        andMaxIndex maxIndex: Int,
                        endDragDrop: Bool)
}

2. Tạo các biến cho phép thay đổi các giá trị của slider

class TWSlider: UIView {
    
    // PUBLIC variable
    // The number of points in slider
    var numberOfSegments: Int = 0
    
    // This value should be set if slider button should overlap or not. Default to NO. ie., 1 segment space will be present between the sliders.
    var shouldSliderButtonOverlap: Bool = false
    
    // The color that is used for rangeSlider unselected range view. (i.e., the view that is not within the slider points). Default is #DFDEE4.
    var rangeSliderBackgroundColor: UIColor = .gray
    
    // The color that is used for rangeSlider selected range view. (i.e., the view that is between the slider points). Default is #FF9800.
    var rangeSliderForegroundColor: UIColor = .orange
    
    // The label color to be used for min range display. Default is white.
    var rangeDisplayLabelColor: UIColor = .white
    
    // The label color to be used for min range display. Default is black.
    var minMaxDisplayLabelColor: UIColor = .black
    
    // The color for segment button when it is within the selected range. Default is clear.
    var segmentSelectedColor: UIColor = .clear
    
    // The color for segment button when it is outside the selected range. Default is #F8F8FA.
    var segmentUnSelectedColor: UIColor = .white
    
    // The image used for displaying slider buttons. By default "ic_sliderButton". rangeSliderButtonColor will be used if not set
    var rangeSliderButtonImage: UIImage?
    
    // The image for segment button when it is within the selected range. If not set, segmentSelectedColor will be used.
    var segmentSelectedImage: UIImage?
    
    // The image for segment button when it is outside the selected range. If not set, segmentUnSelectedColor will be used.
    var segmentUnSelectedImage: UIImage?
    
    // The size of the slider button. If not set, defaults to (16, 16).
    var sliderSize: CGSize = CGSize(width: 16, height: 16)
    
    // The size of the segments. If not set, defaults to (4, 4).
    var segmentSize: CGSize = CGSize(width: 4, height: 4)
    
    // The min and max range label text to be set by caller
    var minRangeText: String?
    var maxRangeText: String?
    
    // The delegate property
    weak var delegate: TWSliderDelegate?
    
    // PRIVATE VAR
    // Slider button size
    private var SLIDER_BUTTON_WIDTH: CGFloat = 44.0
    
    // Slider frame
    private var DEFAULT_SLIDER_FRAME: CGRect!
    
    // Segment width
    private var segmentWidth: CGFloat!
    
    // The backgroundView represent unselected/outside range view
    private var sliderBackgroundView: UIView!
    
    // The foregroundView represent selected/inside range view
    private var sliderForegroundView: UIView!
    
    // The label placed below the min and max sliders
    private var minRangeView: UIView!
    private var maxRangeView: UIView!
    private var minRangeLabel: UILabel!
    private var maxRangeLabel: UILabel!
    
    // min and max value
    private var minLabel: UILabel!
    private var maxLabel: UILabel!
    
    // Represent the range slider on either side of the slider
    private var startSliderButton: UIButton!
    private var endSliderButton: UIButton!
    
    // The segment index or percent for initial slider position loading for segmented and unsegmented respectively
    private var minRangeInitialIndex: Int?
    private var maxRangeInitialIndex: Int?
    
    // Padding range view with slider button
    private let iconRangeMidView = "ic_rangeMidView"
    private let iconRangeView = "ic_rangeView"
    private let iconSliderButton = "ic_sliderButton"
    private let iconSegmentUnSelected = "ic_segmentUnSelected"
    private let paddingRangeView: CGFloat = 4
    
    private var sliderMidView: UIView!
    private var sliderMidLabel: UILabel!
    private var checkInit: Bool = false
    // MARK: init
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setUpUI()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpUI()
    }
    
    func setUpUI() {
        setDefaultValues()
        initSliderViews()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        updateFrame()
    }
}

3. Tạo các hàm private để setup UI cho slider

extension TWSlider {
    
    // Default Initializaer
    private func setDefaultValues() {
        checkInit = false
        numberOfSegments = 2
        shouldSliderButtonOverlap = false
        
        minRangeLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        minRangeLabel.then {
            $0.textColor = rangeDisplayLabelColor
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        }
        
        minRangeView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 29))
        minRangeView.then {
            $0.center = CGPoint(x: SLIDER_BUTTON_WIDTH / 2, y: bounds.midY - (SLIDER_BUTTON_WIDTH / 2) - (paddingRangeView / 2))
            if let image = UIImage(named: iconRangeView) {
                $0.backgroundColor = UIColor(patternImage: image)
            }
            addSubview($0)
            $0.addSubview(minRangeLabel)
        }
        
        maxRangeLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        maxRangeLabel.then {
            $0.textColor = rangeDisplayLabelColor
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        }
        
        maxRangeView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 29))
        maxRangeView.then {
            $0.center = CGPoint(x: SLIDER_BUTTON_WIDTH / 2, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2) + (paddingRangeView / 2))
            if let image = UIImage(named: iconRangeView) {
                $0.backgroundColor = UIColor(patternImage: image)
            }
            addSubview($0)
            $0.addSubview(maxRangeLabel)
        }
        
        minLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        minLabel.then {
            $0.center = CGPoint(x: SLIDER_BUTTON_WIDTH / 2, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2))
            $0.textColor = minMaxDisplayLabelColor
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 12, weight: .regular)
            addSubview($0)
        }
        
        maxLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
        maxLabel.then {
            $0.center = CGPoint(x: bounds.maxX - SLIDER_BUTTON_WIDTH, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2))
            $0.textColor = minMaxDisplayLabelColor
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 12, weight: .regular)
            addSubview($0)
        }
        
        // Mid View
        sliderMidLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 49, height: 24))
        sliderMidLabel.then {
            $0.textColor = rangeDisplayLabelColor
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        }
        sliderMidView = UIView(frame: CGRect(x: 0, y: 0, width: 49, height: 29))
        sliderMidView.then {
            $0.center = CGPoint(x: SLIDER_BUTTON_WIDTH / 2, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2) + (paddingRangeView / 2))
            if let image = UIImage(named: iconRangeMidView) {
                $0.backgroundColor = UIColor(patternImage: image)
            }
            addSubview($0)
            $0.addSubview(sliderMidLabel)
            $0.alpha = 0
        }
        segmentWidth = getSegmentWidth(forSegmentCount: numberOfSegments)
        rangeSliderButtonImage = UIImage(named: iconSliderButton)
        segmentUnSelectedImage = UIImage(named: iconSegmentUnSelected)
        
    }
    
    // Init the sliding representing views
    private func initSliderViews() {
        DEFAULT_SLIDER_FRAME = CGRect(x: SLIDER_BUTTON_WIDTH / 2, y: self.bounds.midY, width: self.bounds.width - SLIDER_BUTTON_WIDTH, height: 4)
        
        sliderBackgroundView = UIView(frame: DEFAULT_SLIDER_FRAME)
        sliderBackgroundView.then {
            $0.backgroundColor = rangeSliderBackgroundColor
            addSubview($0)
        }
        
        sliderForegroundView = UIView(frame: DEFAULT_SLIDER_FRAME)
        sliderForegroundView.then {
            $0.backgroundColor = rangeSliderForegroundColor
            addSubview($0)
        }
        startSliderButton = getSegmentButton(withSegmentIndex: 1, isSlider: true)
        addSubview(startSliderButton)
        
        endSliderButton = getSegmentButton(withSegmentIndex: numberOfSegments, isSlider: true)
        addSubview(endSliderButton)
        
        // Pan gesture for identifying the sliding (More accurate than touchesMoved).
        addPanGestureRecognizer()
    }
    
    // Update the frames
    private func updateFrame() {
        if self.numberOfSegments >= 2 {
            // If the range selectors are at the extreme points, then reset the frame. Else fo nothing
            if isRangeSlidersPlacedAtExtremePosition() {
                DEFAULT_SLIDER_FRAME = CGRect(x: SLIDER_BUTTON_WIDTH / 2, y: self.bounds.midY, width: self.bounds.width - SLIDER_BUTTON_WIDTH, height: 4)
                self.sliderBackgroundView.frame = DEFAULT_SLIDER_FRAME
                self.sliderForegroundView.frame = DEFAULT_SLIDER_FRAME
                
                self.sliderBackgroundView.backgroundColor = self.rangeSliderBackgroundColor
                self.sliderForegroundView.backgroundColor = self.rangeSliderForegroundColor
                
                segmentWidth = getSegmentWidth(forSegmentCount: numberOfSegments)
                
                startSliderButton.center = CGPoint(x: SLIDER_BUTTON_WIDTH / 2, y: sliderBackgroundView.frame.midY)
                endSliderButton.center = getSegmentCenterPoint(forSegmentIndex: numberOfSegments)
                
                minRangeView.center = CGPoint(x: startSliderButton.frame.midX, y: bounds.midY - (SLIDER_BUTTON_WIDTH / 2) - (paddingRangeView / 2))
                maxRangeView.center = CGPoint(x: endSliderButton.frame.midX, y: bounds.midY - (SLIDER_BUTTON_WIDTH / 2) - (paddingRangeView / 2))
                
                minLabel.center = CGPoint(x: startSliderButton.frame.midX, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2))
                maxLabel.center = CGPoint(x: endSliderButton.frame.midX, y: bounds.midY + (SLIDER_BUTTON_WIDTH / 2))
                
                sliderMidView.center = CGPoint(x: startSliderButton.frame.midX, y: bounds.midY - (SLIDER_BUTTON_WIDTH / 2) - (paddingRangeView / 2))
                
                setImageForSegmentOrSliderButton(startSliderButton, isSlider: true)
                setImageForSegmentOrSliderButton(endSliderButton, isSlider: true)
                
                // Reset the frame of all the intermediate buttons
                for segmentIndex in 1...numberOfSegments {
                    let segmentButton = self.viewWithTag(segmentIndex) as? UIButton
                    segmentButton?.center = getSegmentCenterPoint(forSegmentIndex: segmentIndex)
                    if let button = segmentButton {
                        setImageForSegmentOrSliderButton(button, isSlider: false)
                    }
                }
                
                // Slide the buttons if the initial position is needed
                slideRangeSliderButtonsIfNeeded()
                checkInit = true
            }
        }
    }
}

4. Tạo các hàm để tính toán vị trí và di chuyển slider

extension TWSlider {
    private func isRangeSlidersPlacedAtExtremePosition() -> Bool {
        let sliderBackgroundViewMaxX = sliderBackgroundView.frame.maxX + (SLIDER_BUTTON_WIDTH / 2)
        return (startSliderButton.frame.minX == 0.0 && endSliderButton.frame.maxX == sliderBackgroundViewMaxX)
    }
    
    private func slideRangeSliderButtonsIfNeeded() {
        var startScrollPoint = CGPoint.zero
        var endScrollPoint = CGPoint(x: bounds.size.width, y: 0)
        if let min = minRangeInitialIndex, let max = maxRangeInitialIndex, min < max {
            let startX = getSegmentCenterPoint(forSegmentIndex: min).x
            startScrollPoint.x = startX > (SLIDER_BUTTON_WIDTH / 2) ? startX : SLIDER_BUTTON_WIDTH / 2
            let endX = getSegmentCenterPoint(forSegmentIndex: max).x
            endScrollPoint.x = endX > (SLIDER_BUTTON_WIDTH / 2) ? endX : SLIDER_BUTTON_WIDTH / 2
        }
        scrollStartAndEndSlider(for: startScrollPoint, andEndScroll: endScrollPoint)
        minRangeInitialIndex = 0
        maxRangeInitialIndex = 0
    }
    
    private func scrollStartAndEndSlider(for startScrollPoint: CGPoint, andEndScroll endScrollPoint: CGPoint) {
        startSliderButton.isSelected = true
        sliderDidSlide(for: startScrollPoint)
        startSliderButton.isSelected = false
        
        endSliderButton.isSelected = true
        sliderDidSlide(for: endScrollPoint)
        endSliderButton.isSelected = false
    }
}

5. Tạo các hàm tính toán frame của slider

extension TWSlider {
    private func getSliderViewWidth() -> CGFloat {
        let startMinX = startSliderButton.frame.midX
        let endMinX = endSliderButton.frame.midX
        if startMinX > endMinX {
            return startMinX - endMinX
        } else {
            return endMinX - startMinX
        }
    }
    
    private func sliderMidPoint(forPoint point: CGFloat) -> CGFloat {
        let sliderMidPoint = point - (SLIDER_BUTTON_WIDTH / 2)
        return sliderMidPoint
    }
    
    private func getSegmentWidth(forSegmentCount segmentCount: Int) -> CGFloat {
        let segmentCount = CGFloat(segmentCount - 1)
        let sliderWidth = frame.width - SLIDER_BUTTON_WIDTH
        return sliderWidth / segmentCount
    }
    
    private func getSegmentButton(withSegmentIndex segmentIndex: Int, isSlider: Bool) -> UIButton {
        // Create rounded button for representing slider segments
        let segmentButton = UIButton(type: .custom)
        segmentButton.frame = CGRect(x: 0, y: 0, width: SLIDER_BUTTON_WIDTH, height: SLIDER_BUTTON_WIDTH)
        segmentButton.center = getSegmentCenterPoint(forSegmentIndex: segmentIndex)
        setImageForSegmentOrSliderButton(segmentButton, isSlider: isSlider)
        return segmentButton
    }
    
    // MARK: - Calculation for segment button frame
    private func getSegmentCenterPoint(forSegmentIndex segmentIndex: Int) -> CGPoint {
        let pointX = CGFloat((CGFloat(segmentIndex - 1) * segmentWidth) + (SLIDER_BUTTON_WIDTH / 2))
        return CGPoint(x: pointX, y: sliderBackgroundView.frame.midY)
    }
    
    private func setImageForSegmentOrSliderButton(_ button: UIButton, isSlider: Bool) {
        if let image = rangeSliderButtonImage, isSlider {
            button.setImage(image, for: .normal)
        } else if let iamge = segmentSelectedImage {
            button.setImage(iamge, for: .normal)
        } else {
            button.setImage(getImageWithSize(isSlider ? sliderSize : segmentSize, with: segmentSelectedColor), for: .normal)
        }
        
        button.imageView?.layer.masksToBounds = true
        let buttonWidth = button.imageView?.frame.size.width ?? button.frame.size.width
        button.imageView?.layer.cornerRadius = buttonWidth / 2
    }
    
    private func getImageWithSize(_ size: CGSize, with backgroundColor: UIColor?) -> UIImage? {
        let imageView = UIView(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        imageView.backgroundColor = backgroundColor
        
        UIGraphicsBeginImageContextWithOptions(CGSize(width: size.width, height: size.height), false, 1.0)
        if let context = UIGraphicsGetCurrentContext() {
            imageView.layer.render(in: context)
        }
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

6. Tạo các hàm để tính toán vị trí và xử lí delegate của Pangesture

extension TWSlider {
    
    private func addPanGestureRecognizer() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture))
        panGesture.maximumNumberOfTouches = 1
        addGestureRecognizer(panGesture)
    }
    
    // Pan Gesture selector method
    
    @objc
    func handlePanGesture(_ panGesture: UIPanGestureRecognizer) {
        let point = panGesture.location(in: self)
        
        if panGesture.state == .began {
            self.setSelectedStateForSlidingButton(point)
        } else if panGesture.state == .changed {
            sliderDidSlide(for: point)
        } else if panGesture.state == .ended || panGesture.state == .failed || panGesture.state == .cancelled {
            // Move the slider to nearest segment
            moveSliderToNearestSegment(withEnding: point)
            resetSelectedStateForSlidingButtons()
        }
    }
    
    // If sliding began, check if startSlider is moved or endSlider is moved
    private  func setSelectedStateForSlidingButton(_ point: CGPoint) {
        if startSliderButton.frame.contains(point) {
            startSliderButton.isSelected = true
            endSliderButton.isSelected = false
        } else if endSliderButton.frame.contains(point) {
            endSliderButton.isSelected = true
            startSliderButton.isSelected = false
        } else {
            startSliderButton.isSelected = false
            endSliderButton.isSelected = false
        }
    }
    
    private func sliderDidSlide(for point: CGPoint) {
        var newPoint = point
        // Check if startButton is moved or endButton is moved. Based on the moved button, set the frame of the slider button and foregroundSliderView
        newPoint = resetFrameOnBoundsCross(for: point)
        
        if startSliderButton.isSelected {
            if shouldStartButtonSlide(for: newPoint) {
                UIView.animate(withDuration: 0.1, animations: {
                    // Change only the x value for startbutton
                    self.startSliderButton.frame = CGRect(x: self.sliderMidPoint(forPoint: newPoint.x), y: self.startSliderButton.frame.origin.y, width: self.startSliderButton.frame.size.width, height: self.startSliderButton.frame.size.height)
                    
                    // Change the x and width for slider foreground view
                    if self.shouldSliderButtonOverlap {
                        let startMidX = self.startSliderButton.frame.midX
                        let endMidX = self.endSliderButton.frame.midX
                        var originX = self.startSliderButton.frame.origin.x
                        if endMidX < startMidX {
                            originX = self.endSliderButton.frame.origin.x
                        }
                        self.sliderForegroundView.frame = CGRect(x: originX + self.SLIDER_BUTTON_WIDTH / 2, y: self.sliderForegroundView.frame.origin.y, width: self.getSliderViewWidth(), height: self.sliderForegroundView.frame.size.height)
                    } else {
                        let originX = self.startSliderButton.frame.origin.x + self.SLIDER_BUTTON_WIDTH / 2
                        self.sliderForegroundView.frame = CGRect(x: originX, y: self.sliderForegroundView.frame.origin.y, width: self.getSliderViewWidth(), height: self.sliderForegroundView.frame.size.height)
                    }
                    
                    // Change the x and width for slider foreground view
                    self.minRangeView.center = CGPoint(x: self.startSliderButton.frame.midX, y: self.startSliderButton.frame.minY - self.paddingRangeView)
                    
                    self.sliderMidView.center = CGPoint(x: self.endSliderButton.frame.midX, y: self.startSliderButton.frame.minY - self.paddingRangeView)
                    
                    // Update the intermediate segment colors
                    self.updateSegmentColor(for: newPoint)
                }, completion: { _ in
                    self.callScrollDelegate(point: newPoint, isStartSliderButton: true)
                })
            }
        } else if endSliderButton.isSelected {
            if shouldEndButtonSlide(for: newPoint) {
                UIView.animate(withDuration: 0.1, animations: {
                    // Change only the x value for endbutton
                    self.endSliderButton.frame = CGRect(x: self.sliderMidPoint(forPoint: newPoint.x), y: self.endSliderButton.frame.origin.y, width: self.endSliderButton.frame.size.width, height: self.endSliderButton.frame.size.height)
                    
                    // Change the x and width for slider foreground view
                    if self.shouldSliderButtonOverlap {
                        let startMidX = self.startSliderButton.frame.midX
                        let endMidX = self.endSliderButton.frame.midX
                        var originX = self.startSliderButton.frame.origin.x
                        if endMidX < startMidX {
                            originX = self.endSliderButton.frame.origin.x
                        }
                        self.sliderForegroundView.frame = CGRect(x: originX + self.SLIDER_BUTTON_WIDTH / 2, y: self.sliderForegroundView.frame.origin.y, width: self.getSliderViewWidth(), height: self.sliderForegroundView.frame.size.height)
                    } else {
                        let originX = self.startSliderButton.frame.origin.x + self.SLIDER_BUTTON_WIDTH / 2
                        self.sliderForegroundView.frame = CGRect(x: originX, y: self.sliderForegroundView.frame.origin.y, width: self.getSliderViewWidth(), height: self.sliderForegroundView.frame.size.height)
                    }
                    
                    // Change the x and width for slider foreground view
                    self.maxRangeView.center = CGPoint(x: self.endSliderButton.frame.midX, y: self.endSliderButton.frame.minY - self.paddingRangeView)
                    
                    self.sliderMidView.center = CGPoint(x: self.startSliderButton.frame.midX, y: self.endSliderButton.frame.minY - self.paddingRangeView)
                    
                    // Update the intermediate segment colors
                    self.updateSegmentColor(for: newPoint)
                }, completion: { _ in
                    self.callScrollDelegate(point: newPoint, isStartSliderButton: false)
                })
            }
        }
    }
    
    // Method that handles if the sliders move out of range
    private func resetFrameOnBoundsCross(for point: CGPoint) -> CGPoint {
        var newPoint = point
        if shouldSliderButtonOverlap {
            if point.x < 0 {
                newPoint.x = 0
            } else if sliderMidPoint(forPoint: point.x) >= sliderBackgroundView.bounds.maxX {
                newPoint.x = sliderBackgroundView.bounds.maxX + SLIDER_BUTTON_WIDTH / 2
            }
        } else {
            if startSliderButton.isSelected {
                if sliderMidPoint(forPoint: point.x) >= endSliderButton.frame.midX - segmentWidth {
                    newPoint.x = endSliderButton.frame.midX - segmentWidth
                } else if point.x < 0 {
                    newPoint.x = 0
                }
            } else if endSliderButton.isSelected {
                if point.x <= startSliderButton.frame.midX + segmentWidth {
                    newPoint.x = startSliderButton.frame.midX + segmentWidth
                } else if sliderMidPoint(forPoint: point.x) >= sliderBackgroundView.bounds.maxX {
                    newPoint.x = sliderBackgroundView.bounds.maxX + SLIDER_BUTTON_WIDTH / 2
                }
            }
        }
        
        return newPoint
    }
    
    private func shouldStartButtonSlide(for point: CGPoint) -> Bool {
        if shouldSliderButtonOverlap {
            return (point.x >= (SLIDER_BUTTON_WIDTH / 2)) && (point.x <= (bounds.maxX - SLIDER_BUTTON_WIDTH / 2))
        } else {
            var endButtonMidPoint = endSliderButton.frame.midX
            endButtonMidPoint -= segmentWidth
            return round(point.x) <= round(endButtonMidPoint) && point.x >= SLIDER_BUTTON_WIDTH / 2
        }
    }
    
    private func shouldEndButtonSlide(for point: CGPoint) -> Bool {
        if shouldSliderButtonOverlap {
            return point.x >= SLIDER_BUTTON_WIDTH / 2
        } else {
            var startButtonMidPoint = startSliderButton.frame.midX
            startButtonMidPoint += shouldSliderButtonOverlap ? 0 : segmentWidth
            return round(point.x) >= round(startButtonMidPoint) && point.x <= sliderMidPoint(forPoint: frame.size.width)
        }
    }
    
    // Call the delegate to set the label for min range and max range
    private func callScrollDelegate(point: CGPoint, isStartSliderButton: Bool) {
        let nearestSegmentIndex = Int(round(sliderMidPoint(forPoint: point.x) / segmentWidth))
        
        var startIndex = Int(round(startSliderButton.frame.minX / segmentWidth))
        var endIndex = Int(round(endSliderButton.frame.minX / segmentWidth))
        
        if isStartSliderButton {
            startIndex = nearestSegmentIndex
        } else {
            endIndex = nearestSegmentIndex
        }
        updateData(startIndex: startIndex, endIndex: endIndex, endDragDrop: false)
    }
    
    private func updateData(startIndex: Int, endIndex: Int, endDragDrop: Bool) {
        if startIndex > endIndex {
            let min = endIndex < 0 ? 0 : endIndex
            let max = startIndex > numberOfSegments ? numberOfSegments : startIndex
            delegate?.sliderScrolled(self, toMinIndex: min, andMaxIndex: max, endDragDrop: endDragDrop)
            minRangeLabel.text = maxRangeText
            maxRangeLabel.text = minRangeText
        } else {
            let min = startIndex < 0 ? 0 : startIndex
            let max = endIndex > numberOfSegments ? numberOfSegments : endIndex
            delegate?.sliderScrolled(self, toMinIndex: min, andMaxIndex: max, endDragDrop: endDragDrop)
            minRangeLabel.text = minRangeText
            maxRangeLabel.text = maxRangeText
        }
        
        if startIndex != endIndex {
            UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseIn) {
                self.sliderMidView.alpha = 0
                self.minRangeView.alpha = 1
                self.maxRangeView.alpha = 1
            } completion: { _ in
                print("completion \(startIndex) = \(endIndex)")
            }
        } else {
            sliderMidLabel.text = "\(minRangeText ?? "") - \(maxRangeText ?? "")"
            UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseIn) {
                self.sliderMidView.alpha = 1
                self.minRangeView.alpha = 0
                self.maxRangeView.alpha = 0
            } completion: { _ in
                print("completion \(startIndex) = \(endIndex)")
            }
        }
    }
    
    private func updateSegmentColor(for point: CGPoint) {
        
        if shouldSliderButtonOverlap {
            let startMinX = startSliderButton.frame.midX
            let endMinX = endSliderButton.frame.midX
            
            var min: CGFloat = 0.0
            var max: CGFloat = 0.0
            if startMinX > endMinX {
                min = (endSliderButton.frame.minX / segmentWidth).rounded(.up)
                max = (startSliderButton.frame.minX / segmentWidth).rounded(.down)
            } else {
                min = (startSliderButton.frame.minX / segmentWidth).rounded(.up)
                max = (endSliderButton.frame.minX / segmentWidth).rounded(.down)
            }
            updateSegmentColor(withStart: Int(min) + 1, andEnd: Int(max) + 1)
        } else {
            if startSliderButton.isSelected {
                let startMinX = (sliderMidPoint(forPoint: startSliderButton.frame.midX) / segmentWidth).rounded(.up)
                let endMinX = (sliderMidPoint(forPoint: endSliderButton.frame.midX) / segmentWidth).rounded(.up)
                updateSegmentColor(withStart: Int(startMinX) + 1, andEnd: Int(endMinX) + 1)
            } else if endSliderButton.isSelected {
                let startMinX = (startSliderButton.frame.minX / segmentWidth).rounded(.up)
                let endMinX = (endSliderButton.frame.minX / segmentWidth).rounded(.down)
                updateSegmentColor(withStart: Int(startMinX) + 1, andEnd: Int(endMinX) + 1)
            }
        }
        let pointX: Int = Int(round(point.x - SLIDER_BUTTON_WIDTH / 2))
        if pointX % Int(round(segmentWidth)) == 0 {
            let generator = UIImpactFeedbackGenerator(style: .medium)
            generator.impactOccurred()
        }
    }
    
    private func updateSegmentColor(withStart startIndex: Int, andEnd endIndex: Int) {
        // Segments before startSegment slider
        
        if startIndex > 1 {
            for segmentIndex in 1..<startIndex {
                if let segmentButton = viewWithTag(segmentIndex) as? UIButton {
                    if let image = segmentUnSelectedImage {
                        segmentButton.setImage(image, for: .normal)
                    } else {
                        let image = getImageWithSize(segmentSize, with: segmentUnSelectedColor)
                        segmentButton.setImage(image, for: .normal)
                    }
                }
            }
        }
        
        // Segments between startSegment slider and endSegment slider
        if startIndex <= endIndex {
            for segmentIndex in startIndex...endIndex {
                if let segmentButton = viewWithTag(segmentIndex) as? UIButton {
                    if let image = segmentSelectedImage {
                        segmentButton.setImage(image, for: .normal)
                    } else {
                        let image = getImageWithSize(segmentSize, with: segmentSelectedColor)
                        segmentButton.setImage(image, for: .normal)
                    }
                }
            }
        }
        
        // Segments after endSegment slider
        if endIndex + 1 <= numberOfSegments {
            for segmentIndex in (endIndex + 1)...numberOfSegments {
                if let segmentButton = viewWithTag(segmentIndex) as? UIButton {
                    if let image = segmentUnSelectedImage {
                        segmentButton.setImage(image, for: .normal)
                    } else {
                        let image = getImageWithSize(segmentSize, with: segmentUnSelectedColor)
                        segmentButton.setImage(image, for: .normal)
                    }
                }
            }
        }
    }
    
    // Slide to nearest position
    private func moveSliderToNearestSegment(withEnding point: CGPoint) {
        var newPoint = point
        newPoint = resetFrameOnBoundsCross(for: point)
        
        let nearestSegmentIndex = Int(round(sliderMidPoint(forPoint: newPoint.x) / segmentWidth))
        sliderDidSlide(for: CGPoint(x: CGFloat(SLIDER_BUTTON_WIDTH / 2 + CGFloat(nearestSegmentIndex) * segmentWidth), y: newPoint.y))
        
        var startIndex = Int(round(startSliderButton.frame.minX / segmentWidth))
        var endIndex = Int(round(endSliderButton.frame.minX / segmentWidth))
        
        if startSliderButton.isSelected {
            startIndex = nearestSegmentIndex
        } else if endSliderButton.isSelected {
            endIndex = nearestSegmentIndex
        }
        updateData(startIndex: startIndex, endIndex: endIndex, endDragDrop: true)
    }
    
    // After ending, reset the selected state of both buttons
    private func resetSelectedStateForSlidingButtons() {
        startSliderButton.isSelected = false
        endSliderButton.isSelected = false
    }
}

5. Tạo các hàm public cho phép thay đổi giá trị của TWSlider

extension TWSlider {
    
    // Scroll to desired location on loading
    func scrollStartSlider(to startIndex: Int, andEnd endIndex: Int) {
        minRangeInitialIndex = startIndex
        maxRangeInitialIndex = endIndex
        if checkInit {
            slideRangeSliderButtonsIfNeeded()
        }
    }
    
    // MARK: - Setter methods, setup value for slider
    func setNumberOfSegments(_ numberOfSegments: Int, minText: String?, maxText: String?) {
        self.numberOfSegments = numberOfSegments
        
        // After setting the numberOfSegments, set all the necessary views
        segmentWidth = getSegmentWidth(forSegmentCount: self.numberOfSegments)
        addSegmentButtons()
        addSubview(startSliderButton)
        addSubview(endSliderButton)
        minLabel.text = minText
        maxLabel.text = maxText
    }
    
    private func addSegmentButtons() {
        for segmentIndex in 1...numberOfSegments {
            let segmentButton = getSegmentButton(withSegmentIndex: segmentIndex, isSlider: false)
            segmentButton.then {
                $0.tag = segmentIndex
                $0.isUserInteractionEnabled = false
                addSubview($0)
            }
        }
    }
}

3. Cách sử dụng

Bước 1: mở file storyboard hoặc file .xib và thêm UIView và constraint, sửa lại tên class thành class custom slider mới tạo ở trên ở project này là TWSlider -> Kéo outlet

Bước 2: mở viewcontroller vừa được kéo outlet viết hàm setup cho slider như sau

class ViewController: UIViewController {

    @IBOutlet weak var customSlider: TWSlider!
    private let data: [String] = ["10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        customSlider.then {
            $0.shouldSliderButtonOverlap = true
            $0.delegate = self
        }
        customSlider.then {
            $0.setNumberOfSegments(data.count, minText: data.first, maxText: data.last)
            $0.scrollStartSlider(to: 0 + 1, andEnd: 10 + 1)
        }
    }
}

extension ViewController: TWSliderDelegate {
    func sliderScrolled(_ slider: TWSlider?, toMinIndex minIndex: Int, andMaxIndex maxIndex: Int, endDragDrop: Bool) {
        customSlider.minRangeText = data[minIndex]
        customSlider.maxRangeText = data[maxIndex]
    }
}

Bạn có thể tuỳ chỉnh số hiển thị trên slider bằng các số tương ứng với project.

Mình để project ở đây cho mọi người tham khảo nếu cần nhé!

Vậy là chúng ta đã hoàn thành việc custom Slider hai chiều, mình hi vọng nó có thể giải quyết được bài toán của các bạn. Cảm ơn các bạn đã theo dõi bài viết!