class DownloadImage: Operation {
    var index: Int
    
    init(ind: Int) {
        self.index = ind
    }

    override func main() {
        // Download image task
        print("Start downloading task \(index) at time: \(Date().timeIntervalSince1970)")
        sleep(5)
        print("Finish downloading task \(index) at time: \(Date().timeIntervalSince1970)")
    }
}

let firstOperation = DownloadImage(ind: 1)
let secondOperation = DownloadImage(ind: 2)
//firstOperation.addDependency(secondOperation)

let operationQueue = OperationQueue()
operationQueue.addOperation(firstOperation)
operationQueue.addOperation(secondOperation)

firstOperation.removeDependency(op: secondOperation)

firstOperation.addDependency(secondOperation)
secondOperation.addDependency(firstOperation)

class Calculate: Operation {
    let firstNum: Int
    let secondNum: Int
    var sum: Int?
    
    init(first: Int, second: Int) {
        self.firstNum = first
        self.secondNum = second
    }
    
    override func main() {
        sum = firstNum + secondNum
    }
}

class Display: Operation {
    
    override func main() {
        // 2
        let sum = dependencies.compactMap{ ($0 as? Calculate)?.sum }.first
        
        guard let unwrappedSum = sum else {
            return
        }
        // 3
        print("Sum = \(unwrappedSum)")
    }
}

let calculateOperation = Calculate(first: 5, second: 10)
let displayOperation = Display()
// 1
displayOperation.addDependency(calculateOperation)


let operationQueue = OperationQueue()
// 4
operationQueue.addOperation(calculateOperation)
operationQueue.addOperation(displayOperation)

Lời mở đầu

Xin chào mọi người, hôm nay mình sẽ giới thiệu với các bạn về UIPanGestureReconizer. Và mình sẽ hướng dẫn mọi người cách sử dụng và ứng dụng nó vào thực tế. Mình hi vọng sau khi xem hết bài viết này, mọi người có thể áp dụng nó vào các ứng dụng sau này nếu cần đến 😀

Ý tưởng

Chắc hẳn ai sử dụng iOS đều sử dụng qua tính năng “Control Center” của iOS. Để mở Control center lên ta phải vuốt từ dưới màn hình lên và ẩn đi thì ngược lại, nó còn cho phép người dùng kéo thả một cách mượt mà.

UIGestureRecognizer là gì?

UIGestureRecognizer là class định nghĩa một tập hợp các hành vi phổ biến có thể được cấu hình cho tất cả các cử chỉ cụ thể. Dạng như chạm, kéo thả …

UIGestureRecognizer được sử dụng để nhận dạng các loại hành vi của người dùng khi tương tác lên màn hình và thực hiện hành động được cấu hình.

Dưới đây là một số subclasses của nó:

• UITapGestureRecognizer
• UIPinchGestureRecognizer
• UIRotationGestureRecognizer
• UISwipeGestureRecognizer
• UIPanGestureRecognizer
• UIScreenEdgePanGestureRecognizer
• UILongPressGestureRecognizer

UIPanGestureRecognizer là gì?

UIPangestureRecognizer là subclass của UIGestureRecognizer dùng để nhận biết hành vi kéo thả.

Ví dụ về UIPanGestureRecognizer

Để bắt đầu chúng ta cần mở XCode và tạo mới một Single View App. Sau khi tạo project xong chúng ta mở file Main.storyboard và kéo vào một UIView -> đổi màu nền(Background color) của view sang một màu khác cho dễ nhìn.

Khi này chúng ta cần gán constraint cho view đó theo Hình 1
Cần chú ý ở đây chúng ta sẽ constraint bottom của view vào bottom của superview thay vì Safe Area để khi build trên các dòng điện thoại tai thỏ (iphone x, xs ….) sẽ không bị trắng ở dưới của màn hình.

Tiếp đến chúng ta sẽ add 1 UIView nhỏ vào trong UIView vừa mới tạo để thể hiện view này có thể kéo thả được.
Chúng ta cũng constraint UIView nhỏ để nó nằm trên top và giữa của superview kết quả chúng ta thu được như Hình 2

Vậy là chúng ta đã xong phần UI, tiếp đến chúng ta cần kéo IBOutlet top constraint cho cái view to và đặt tên nó là topViewContainer kết quả sẽ được như hình 3

Chúng ta kéo IBOutlet cho top constraint của view để làm gì? Mục đích ở đây là để sau này chúng ta sẽ thay đổi giá trị của topConstraint.constant -> thay đổi vị trí và để tạo hiệu ứng chuyển động.

Tiếp đến chúng ta kéo outlet cho thằng View to đặt tên là viewContainer

OK, giờ chúng ta sẽ đi vào code chi tiết.
Giờ chúng ta mở file ViewController.swift ra và tạo enum cho các trạng thái mở rộng

// 1: Tạo 3 trạng thái mở rộng cho viewContainer
enum ExpansionState {
    case compressed
    case haft
    case expanded
}

Tạo pangesture và gán nó cho viewContainer, trong code mình đã comment rõ từng dòng, từng hàm để các bạn có thể hiểu được nó làm gì.

   // thêm UIGestureRecognizerDelegate để sử dụng được PanGesture
class ViewController: UIViewController, UIGestureRecognizerDelegate {

    @IBOutlet weak var viewContainer: UIView!
    @IBOutlet weak var topViewContainer: NSLayoutConstraint!
    // Khởi tạo trạng thái
    var expansionState: ExpansionState = .haft
    // Khởi tạo giá trị cũ của topViewContainer
    var oldTopViewContainer: CGFloat = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupGestureRecognizers()
        // Khởi tạo vị trí bắt đầu cho việc animte viewContainer.
        // Ở đây chúng ta đang để nó ở trạng thái compressed có nghĩa là ở trạng thái expansion nhỏ nhất.
        topViewContainer.constant = topViewContainer(forState: .compressed)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Do mình muốn viewContainer sẽ chuyển động từ dưới lên trên và dừng lại ở trạng thái expansion 1 nửa màn hình
        // Nên mình gọi hàm phía dưới để nó thực hiện chuyển động vì ở viewDidLoad nó đang ở trạng thái compressed
        animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: CGPoint(x: 0, y: 50))
    }

    // Cài đặt Pangesture,
    func setupGestureRecognizers() {
        let panGestureRecognizer = UIPanGestureRecognizer(target: self,
                                                          action: #selector(panGestureDidMove(sender:)))
        panGestureRecognizer.delegate = self
        viewContainer.isUserInteractionEnabled = true

        viewContainer.addGestureRecognizer(panGestureRecognizer)
    }

    @objc func panGestureDidMove(sender: UIPanGestureRecognizer) {
        let translationPoint = sender.translation(in: view.superview)
        // velocity là vận tốc chuyển động của hành động, dạng như bạn vuốt vào màn hình nhanh hay chậm
        let velocity = sender.velocity(in: view.superview)

        switch sender.state {
        case .changed:
            panGesture(didChangeTranslationPoint: translationPoint, withVelocity: velocity)
        case .ended:
            panGesture(didEndTranslationPoint: translationPoint, withVelocity: velocity)
        default:
            return
        }
    }

    // Phương thức này để tính toán giá trị viewContainer.top theo các trạng thái thái mà nó cần tính
    func topViewContainer(forState state: ExpansionState) -> CGFloat {
        let heightView = self.view.bounds.height
        switch state {
        case .compressed:
            return heightView - 100
        case .haft:
            return heightView / 2
        case .expanded:
            return 100
        }
    }
}

Tiếp đến chúng ta cần tạo Extenstion cho phần animation để phục vụ cho việc chuyển động view container

/ MARK: Animation
extension ViewController {
    /// Animates the top constraint of the drawerViewController by a given constant
    /// using velocity to calculate a spring and damping animation effect.
    func animateTopConstraint(constant: CGFloat, velocity: CGPoint) {
        let previousConstraint = topViewContainer.constant
        let distance = previousConstraint - constant
        let springVelocity = velocity.y != 0 ? max(1 / (abs(velocity.y / distance)), 0.08) : 0.08
        let springDampening = CGFloat(0.6)

        UIView.animate(withDuration: 0.5,
                       delay: 0.0,
                       usingSpringWithDamping: springDampening,
                       initialSpringVelocity: springVelocity,
                       options: [.curveLinear],
                       animations: {
                        self.topViewContainer.constant = constant
                        self.oldTopViewContainer = constant
                        self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

Tiếp đến chúng ta cần các hàm để xử lí khi mà người dùng kéo viewContainer
Ở trong code mình đã comment các hàm, các dòng để mọi người dễ hiểu, hãy đọc trong code nhé.

//MARK: PanGesture handle
extension ViewController {

    // Hàm này được gọi khi PanGestureRecognizer nhận ra được sự thay đổi của view,
    // trong hàm này chúng ta có thể thực hiện một số điều kiện để giới hạn việc kéo của người dùng
    func panGesture(didChangeTranslationPoint translationPoint: CGPoint,
                              withVelocity velocity: CGPoint) {
        let newConstraintConstant = oldTopViewContainer + translationPoint.y
        // Giới hạn việc người dùng kéo quá xa so với phía trên
        if newConstraintConstant >= 0 {
            topViewContainer.constant = newConstraintConstant
        }
    }

    // Phương thức này được gọi khi kết thúc pan
    func panGesture(didEndTranslationPoint translationPoint: CGPoint,
                              withVelocity velocity: CGPoint) {
        // Velocity là kiểu CGPoint vì vậy nó có 2 giá trị x và y
        // x: đại diện cho vận tốc theo chiều ngang
        // y: đại điện cho vận tốc theo chiều dọc
        // Do mình đang muốn thực hiện kéo thả theo chiều dọc nên ở ví dụ này mình sẽ dùng thuộc tính vận tốc y
        if abs(velocity.y) <= 50.0 {
            // 50: ở đây là vận tốc mà mình coi nó là người dùng đang kéo từ từ. Con số này các bạn có thể tùy chỉnh
            // Giá trị của y < 0 có nghĩa là người dùng đang kéo lên trên và y > 0 là kéo xuống dưới
            // dấu của y sẽ thể hiện chiều di chuyển của nó.
            // Vì vậy mình cần sử dụng hàm abs() trước khi thực hiện phép so sánh
            drag(lowVelocity: velocity)
        } else if velocity.y > 0 {
            dragDown(highVelocity: velocity)
        } else {
            dragUp(highVelocity: velocity)
        }
    }

    // Hàm này thực hiện việc xác định xem view đang gần vị trí của trạng thái nào hơn sẽ chuyển sang trạng thái đó.
    func drag(lowVelocity velocity: CGPoint) {
        let compressedTopConstraint = topViewContainer(forState: .compressed)
        let haftTopConstraint = topViewContainer(forState: .haft)
        let expandedTopConstraint = topViewContainer(forState: .expanded)

        let expandedDifference = abs(topViewContainer.constant - expandedTopConstraint)
        let haftDifference = abs(topViewContainer.constant - haftTopConstraint)
        let compressedDifference = abs(topViewContainer.constant - compressedTopConstraint)

        let heightArray = [expandedDifference, haftDifference, compressedDifference]
        let minHeight = heightArray.min()

        if expandedDifference == minHeight {
            expansionState = .expanded
            animateTopConstraint(constant: expandedTopConstraint, velocity: velocity)
        } else if haftDifference == minHeight {
            expansionState = .haft
            animateTopConstraint(constant: haftTopConstraint, velocity: velocity)
        } else {
            expansionState = .compressed
            animateTopConstraint(constant: compressedTopConstraint, velocity: velocity)
        }
    }

    // Hàm này để xử lí khi người dùng kéo thả view với tốc độ cao,
    // nó sẽ xác định và chuyển tới trạng thái liền kề theo hướng phía dưới
    func dragDown(highVelocity velocity: CGPoint) {
        // Handle High Velocity Pan Gesture

        switch expansionState {
        case .compressed, .haft:
            expansionState = .compressed
            animateTopConstraint(constant: topViewContainer(forState: .compressed), velocity: velocity)
        case .expanded:
            expansionState = .haft
            animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: velocity)
        }
    }

    // Hàm này để xử lí khi người dùng kéo thả view với tốc độ cao,
    // nó sẽ xác định và chuyển tới trạng thái liền kề theo hướng phía trên
    func dragUp(highVelocity velocity: CGPoint) {
        // Handle high Velocity Pan Gesture
        switch expansionState {
        case .compressed:
            expansionState = .haft
            animateTopConstraint(constant: topViewContainer(forState: .haft), velocity: velocity)
        case .haft, .expanded:
            expansionState = .expanded
            animateTopConstraint(constant: topViewContainer(forState: .expanded), velocity: velocity)
        }
    }
}

Và đây là kết quả khi chúng ta build app lên:

Vậy là xong!
Ngoài ra các bạn có thể chỉnh sửa lại view sao cho phù hợp với ứng dụng đang làm 😀

---

Cảm ơn mọi người đã theo dõi bài viết!
Mọi ý kiến đóng góp mọi người hãy comment xuống phía dưới để mình có thể thay đổi cho bài biết được tốt hơn. :v

Grand Central Dispatch (Part 1)

class DownloadImage: Operation {
    override func main() {
        // Download image task
        print("Start downloading... at time: \(Date().timeIntervalSince1970)")
        sleep(5)
        print("Finish downloading... at time: \(Date().timeIntervalSince1970)")
    }
}

let operation = DownloadImage()
let operation2 = DownloadImage()

let operationQueue = OperationQueue()
operationQueue.maxConcurrentOperationCount = 1
operationQueue.addOperations([operation, operation2], waitUntilFinished: true)

Ở part cuối của Animation Basic này, mình xin giới thiệu đến mọi người phần ảo diệu nhất của animation với UIView đó là UIView.transition. Transitions được dùng khi chúng ta muốn tạo hiệu ứng cho việc hidden view hay add hoặc remove một view lên hoặc khỏi một view cha của nó hay thay thế 2 views cho nhau khá tương đồng với các slide chúng ta hay gặp trong power point.

UIView Transitions và các hiệu ứng của View

UIView.transition(with: self.view, duration: 2.0, options:[.transitionCrossDissolve, .repeat], animations: {
        self.view.addSubview(self.animatedView)
}, completion: nil)

Tương tự keyframe và animation, transition cũng gồm các thuộc tính cơ bản:

• withView: view thực hiện animation
• duration: thời gian thực hiện animation
• options: nơi thêm các hiệu ứng thay đổi view
• animations: closure chỉ ra animation đối tượng gì
• completion: khi animation kết thúc, closure này sẽ được thực thi

Các tùy chọn hiệu ứng options cho Transition

• transitionFlipFromLeft/ transitionFlipFromRight

UIView.transition(with: self.animationView, duration: 1, options: [.transitionFlipFromLeft, .repeat], animations: {
            self.animationImage.alpha = 1
        }, completion: { _ in
            self.animationImage.removeFromSuperview()
        })

• 

• 

• transitionCurlUp/ transitionCurlDown

UIView.transition(with: self.animationView, duration: 1, options: [.transitionCurlUp], animations: {
            self.animationImage.alpha = 0
            self.animationImage2.alpha = 1
        }, completion: { _ in
            self.animationImage.removeFromSuperview()
        })

• 

• 

• transitionCrossDissolve

UIView.transition(with: self.animationView, duration: 4, options: [.transitionCrossDissolve], animations: {
            self.animationImage.alpha = 1
        }, completion: { _ in
        })

• transitionFlipFromTop/transitionFlipFromBottom

UIView.transition(with: self.animationView, duration: 2, options: [.transitionFlipFromBottom], animations: {
            self.animationImage.alpha = 1
            self.animationImage2.removeFromSuperview()

        }, completion: { _ in
        })

• 

• 

Transition rất đơn giản và cực kỳ hiệu quả, nó giúp app của chúng ta trở lên thân thiện, gần gũi hơn đối với người dùng. Tuy nhiên, nếu trong một màn hình có quá nhiều chuyển động sẽ dễ gấy rối mắt vì vậy hãy sử dụng các hiệu ứng animation một cách hiệu quả để đạt được kết quả tối ưu nhất.

Cảm ơn mọi người đã theo dõi loạt bài về Basic Animation của mình!
Hi vọng sẽ được mọi người ủng hộ ở những bài tiếp theo.

Như phần trước, mình đã đề cập đến những khái niệm cơ bản về animation trong iOS. Với phần này, mình sẽ đi sâu hơn về các thuộc tính và hiệu ứng của UIView để làm ra một animation đẹp mắt.

Một số thuộc tính cơ bản của UIView.animation

UIView.animate(duration: 1, usingSpringWithDamping: 0.2, initSpringVelocity: 0, delay: 0, options: [], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)

withDuration: giá trị TimeInterval (typealias cho Double) thời gian thực hiện animation tính bằng giây.

delay: độ trễ tính bằng giây (TimeInterval cũng vậy) trước khi animation bắt đầu. Nếu bạn muốn bắt đầu hoạt hình ngay lập tức, bạn có thể bỏ qua tham số này (chỉ trong một số trường hợp nhất định) hoặc đặt thành 0.

usingSpringWithDamping: độ nẩy của view khi gần đến điểm kết thúc( thuộc tính này giống với sự dao động của một vật thể khi được treo trên một cái lò xo trong thực tế).

initSpringVelocity: Tốc độ di chuyển của view bắt đầu ở thời điểm xuất phát.

options: hiệu ứng hoạt hình của view trên quãng đường. Dưới đây là 1 số thuộc tính cơ bản của options:

• .repeat: dùng để lặp lại animation vô hạn.
• .autoreverse: là hiệu ứng view tới điểm kết thúc và trở lại điểm xuất phát.

//Repeate
UIView.animate(duration: 1, options: [.repeat], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)
//Autoreverse
UIView.animate(duration: 1, options: [.autoreverse], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)

• 

• 

• .curveLinear: animation không có sự thay đổi về tốc độ từ khi bắt đầu tới điểm kết thúc.
• .curveEaseIn: Tăng tốc khi bắt đầu animation
• .curveEaseOut: Giảm tốc khi kết thúc animation
• .curveEaseInOut: Kết hợp của .CurveEaseIn và .CurveEaseOut, tăng tốc khi bắt đầu animation và giảm tốc khi kết thúc animation.

Keyframes giúp tạo các chuỗi animation riêng biệt

Chúng ta có thể sử dụng các UIView.animation chồng lên nhau để tạo thành các chuỗi animation tuy nhiên sẽ gây lộn xộn các dòng code. Mọi việc sẽ trở lên dễ dàng hơn rất nhiều với keyframes hỗ trợ rất tốt xử lý các chuỗi animation kế tiếp nhau.

Tương tự UIView.animation, câu lệnh của keyframe cũng gồm 1 số thuộc tính:

UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], animations: {
//add keyframes

}, completion: nil)

• duration : tổng thời gian diễn ra animation.
• options : một danh sách các tuỳ chọn về cách thức animation.
• animations : closure chỉ ra animation các key frames nào.
• completion : khi animation kết thúc, closure này sẽ được thực thi.

Tạo keyframe:

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
    self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
})

• relativeStartTime : là thời điểm bắt đầu tính theo % trên tổng thời gian diễn ra animation. RelativeStartTime có giá trị 0 -> 1. Ví dụ: relativeStartTime = 0.2 -> animation sẽ bắt đầu sau 20% * tổng thời gian animation.
• relativeDuration : là lượng thời gian tương đối tính theo % diễn ra animation cho keyframes với tổng thời gian diễn ra toàn bộ animation. Ví dụ: relativeDuration  = 0.25 tức là animation sẽ diễn ra trong 25% * tổng thời gian animation.
• animations : closure chỉ ra animation đối tượng gì.

Một ví dụ về ứng dụng của keyframe.

            UIView.animateKeyframes(withDuration: 2, delay: 0, options: [], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: {
                let translation = CGAffineTransform(translationX: 0, y: -200)
                let rotation = CGAffineTransform(rotationAngle: CGFloat.pi)
                self.imageView.transform = translation.concatenating(rotation)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
                self.imageView.transform = CGAffineTransform(translationX: -150, y: 200)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.3, animations: {
                let translation = CGAffineTransform(translationX: 0, y: 0)
                let rotation = CGAffineTransform(rotationAngle: -CGFloat.pi)
                self.imageView.transform = translation.concatenating(rotation)
            })
        }, completion: nil)

Phần tiếp theo, mình sẽ giới thiệu về UIView.transtion.
Cảm ơn mọi người đã ghé đọc bài viết của mình 🙂

Xin chào mọi người,

Hôm nay, mình sẽ chia sẻ đôi chút kiến thức của mình về tạo animation giúp app của chúng ta trở lên thú vị và thu hút hơn đối với người dùng.

Những điều cơ bản để tạo được animation

Về cơ bản, animation là tổ hợp các thay đổi về frame, bounds, center, transform, alpla, backgroundColor của đối tượng trên mặt phẳng và không gian chứa đối tượng ấy. Tất cả những animaton phức tạp đều được tạo thành từ những phần tử cơ bản nói trên vì vậy khi gặp 1 yêu cầu về animation phức tạp, bạn đừng vội lo lắng, thay vào đó, hãy phân tích animation ấy và đưa về các khái niệm cơ bản nhất và thực hiện từng bước các thay đổi điều kì diệu sẽ xuất hiện và bạn sẽ rất thích thú với những gì mình làm được. 🙂

UIView.animation thường được sử dụng với những animation đơn giản:

UIView.animate(withDuration: 0, animations: {})

Thay đổi màu sắc và hình dạng của View

self.animationView.backgroundColor = UIColor.purple
self.animationView.alpha = 1
self.animationView.layer.cornerRadius = 50

• 

• 

• 

Làm thế nào để thay đổi được kích thước và vị trí?

Hãy cùng tìm hiểu 3 câu lệnh sau đây để thực hiện được điều trên,

imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
imageView.transform = CGAffineTransform(translationX: 0, y: 100)
imageView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)

• 

• 

• 

Ngoài ra, chúng ta còn có một số cách sau để thay đổi kích thước và vị trí của đối tượng,.

 imageView.frame.origin.x += 100
 imageView.frame.origin.y += 100
 imageView.center.x = 100
 imageView.frame.origin = CGPoint(x: 100, y: 100)  

Hãy cùng nhau thử trộn các thay đổi trên vào xem kết quả chúng ta sẽ được gì nhé!

        UIView.animate(withDuration: 2, animations: {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
        })
        
        UIView.animate(withDuration: 2, animations: {
            self.imageView.transform = CGAffineTransform(translationX: 0, y: -200)
            let scaleImage = CGAffineTransform(scaleX: 4, y: 4)
            let rotateImage = CGAffineTransform(rotationAngle: CGFloat.pi * 2)
            self.imageView.transform = scaleImage.concatenating(rotateImage)
            
            self.imageView.alpha = 1
        })

Chúng ta đã cùng nhau hoàn thành 1 trong những animation cơ bản nhất của một app.
Hi vọng những kiến thức mình chia sẻ có ích với tất cả mọi người!

Xây dựng UICollection View Custom Layout và làm thế nào để lưu cache và dynamically size cell.

UICollection view được giới thiệu từ bản iOS 6 và nó đã là UI Control mà các developer hay dùng nhất.

UICollection view có thể hỗ trợ các loại hiển thị khác nhau và đặc biệt là tính năng dynamically size cell hỗ trợ người dùng hiển thị những phần mô tả ngắn mà đầy đủ nội dung cần truyền tải nhất mà không làm thay đổi thiết kế của mình. Như vậy thì UICollection view được sử dụng nhiều ở các app dạng social network, news,…,.

Ở bài viết này tôi sẽ hướng dẫn các bạn

• Custom layout
• Xử lý dynamically cell
• Những điểm cần lưu ý

Tạo custom UICollection View Layout

Bạn có thể tạo một chế độ hiển thị cho UICollection view theo cách riêng bằng cách tuỳ chỉnh layout của bạn.
Collection view layout là lớp con của UICollectionViewLayout, nó xác đinh mọi thuộc tính trong chế độ hiển thị trên UICollectionView của bạn.
Các thuộc tính của UICollectionViewLayout là intances của UICollectionViewLayoutAttributes. Chúng chứa các thuộc tính của từng mục trong chế độ hiển thị của bạn.

Bắt đầu

• Trước tiên ta cần chuẩn bị một project sample đã được implement UICollection View. UI cần custom là dạng cột và dynamic height.
• Tạo custom collection view layout
• Cách dùng Custom Collection View Layout

Tạo Custom Collection View Layout

Tạo file CustomCollectionViewLayout sub class là UICollectionViewLayout

Tiếp theo config cho collection view sử dụng custom layout.
Mở file view chứa collection view

Mở thanh công cụ Attributes inspector. Chọn Custom trên thuộc tính Layout

Như vậy chúng ta đã config thành công cho collection view sử dụng custom layout.

Như vậy để hiển thị chúng cần thực hiện những gì

Như vậy class CustomCollectionViewLayout vừa tạo cần thực hiện những function sau:

• collectionViewContentSize: function này trả về chiều rộng chiều cao của toàn bộ collection view contents.
• prepare: UIKit sẽ call function này trước khi có các thay đổi về UI. Đây là nơi mà bạn có thể chuẩn bị các tính toán liên quan đến chế độ xem, kích thước, vị trí ,…,.
• layoutAttributesForElements(in:): Trong function này bạn trả về các thuộc tính bố cục cho tất cả item dưới dạng array UICollectionViewLayoutAttributes.
• layoutAttributesForItem(at:): Function này cung cấp thông tin bố trí riêng cho từng item. Bạn cần override lại nó để có thể hiển thị cho từng item mà bạn mong muốn.

Tính toán bố cục

Với layout dạng cột và bạn cần height nó được dãn tự động thì bạn cần tính toán lại bố cục của layout

Mở file CustomCollectionViewLayout và tạo protocol cho nó

protocol CustomCollectionViewLayoutDelegate: AnyObject {
  func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath: IndexPath) -> CGFloat
}

Trong delegate bạn mới tạo 01 function yêu cầu trả về height, bạn sẽ implement function này trong Controller của chúng.

Tiếp đến bạn cần thực hiện implement class CustomCollectionViewLayout

// 1
    weak var delegate: CustomCollectionViewLayoutDelegate?

    // 2
    private let numberOfColumns = 2
    private let cellPadding: CGFloat = 6

    // 3
    private var cache: [UICollectionViewLayoutAttributes] = []

    // 4
    private var contentHeight: CGFloat = 0

    private var contentWidth: CGFloat {
      guard let collectionView = collectionView else {
        return 0
      }
      let insets = collectionView.contentInset
      return collectionView.bounds.width - (insets.left + insets.right)
    }
    // 5
    override var collectionViewContentSize: CGSize {
      return CGSize(width: contentWidth, height: contentHeight)
    }

Bạn có thể thấy ở đây:

1. delegate
2. Số columns bạn cần hiển thị
3. cache để lưu trữ các thuộc tính hiển thị.
4. 02 Thuộc tính width và height của contents
5. Trả về kích thước của collection view’s content. Bạn sử dụng cả 2 thuộc tính contentWidth và contentHeight để tính kích thước

Để tính toán cách hiển thị, mời bạn xem sơ đồ sau:

Bạn sẽ tính toán dựa trên số cột bạn muốn thiển thị và vị trí của mục trước đó trong cùng một cộ. Để tính toán thì bạn dùng xOffset cho cột và yOffset cho vị trí.

Tiếp tục bạn cần override lại function prepare

override func prepare() {
      // 1
      guard
        cache.isEmpty,
        let collectionView = collectionView
        else {
          return
      }
      // 2
      let columnWidth = contentWidth / CGFloat(numberOfColumns)
      var xOffset: [CGFloat] = []
      for column in 0..<numberOfColumns {
        xOffset.append(CGFloat(column) * columnWidth)
      }
      var column = 0
      var yOffset: [CGFloat] = .init(repeating: 0, count: numberOfColumns)
        
      // 3
      for item in 0..<collectionView.numberOfItems(inSection: 0) {
        let indexPath = IndexPath(item: item, section: 0)
          
        // 4
        let photoHeight = delegate?.collectionView(
          collectionView,
          heightForPhotoAtIndexPath: indexPath) ?? 180
        let height = cellPadding * 2 + photoHeight
        let frame = CGRect(x: xOffset[column],
                           y: yOffset[column],
                           width: columnWidth,
                           height: height)
        let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
          
        // 5
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        attributes.frame = insetFrame
        cache.append(attributes)
          
        // 6
        contentHeight = max(contentHeight, frame.maxY)
        yOffset[column] = yOffset[column] + height
          
        column = column < (numberOfColumns - 1) ? (column + 1) : 0
      }
    }

Ở function này bạn có thể thấy tính width có thể cho số columns mà bạn muốn hiển thị, và tính height cho từng item và được lưu lại các thuộc tính ở cache.

Tiếp theo bạn override lại function layoutAttributesForElements(in rect: CGRect) function này sẽ được gọi sau khi function prepare() kết thúc

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
      var visibleLayoutAttributes: [UICollectionViewLayoutAttributes] = []
      
      // Loop through the cache and look for items in the rect
      for attributes in cache {
        if attributes.frame.intersects(rect) {
          visibleLayoutAttributes.append(attributes)
        }
      }
      return visibleLayoutAttributes
    }

Ở function này, bạn duyệt lại bộ cache xem frame của từng item có giao nhau với collection view không.

Cuối cùng bạn cần phải override lại function layoutAttributesForItem

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
      return cache[indexPath.item]
    }

Ở đây sẽ return về các item theo các indexPath.

Kết nối với ViewController

Bạn mở View Controller chứa nó và thêm

extension CustomCollectionViewController: CustomCollectionViewLayoutDelegate {
  func collectionView(
    _ collectionView: UICollectionView,
    heightForPhotoAtIndexPath indexPath:IndexPath) -> CGFloat {
    return photos[indexPath.item].image.size.height
  }
}

Ở đây tôi đang dùng dynamic height. Height sẽ tự động theo height của image.

Tiếp theo trong function viewDidLoad() bạn thêm

if let layout = collectionView.collectionViewLayout as? CustomCollectionViewLayout {
            layout.delegate = self
        }

Như vậy bạn đã custom thành công layout trên UICollectionView.

Những điều cần lưu ý

Tới đây bạn sẽ gặp bug là bạn reload data cho collection view khi tăng số lượng item hiển thị.
Bạn debug bạn sẽ thấy mọi quá trình bạn làm đã hoàn tất, từ việc get data và add vào list của data source cũng đã đầy đủ, nhưng chỉ thiếu một điều là collection view chỉ chạy lại với số lượng item lần đầu tiên.

Vậy vấn đề ở đây là gì?? tại sao reloadData lại không được và không có bất cứ một dòng log error nào ra ??

Vấn đề ở đây là contents size của collection view không được update, nên collection view không thể hiển thị thêm bất cứ item nào.

Vậy bug ở function nào?

Function nào tính toán lại contents size?

Là func prepare() nó là function được gọi để tính toán size. Ngay ở bước đầu tiên của func prepare()

// 1
      guard
        cache.isEmpty,
        let collectionView = collectionView
        else {
          return
      }

Đoạn code trên nó chỉ tính toán lại contents size lần đầu tiên.

Vậy bước 01 của func prepare() bạn cần làm:

      // 1
      guard
//        cache.isEmpty,
        let collectionView = collectionView
        else {
          return
      }

Như vậy bạn đã custom được layout của UICollectionViewLayout và hoàn toàn có thể update data source của UICollection view mà không bị bug.

Source code tham khảo: https://github.com/TracDV/CustomUICollectionViewLayout

Tham khảo nguồn: https://www.raywenderlich.com/4829472-uicollectionview-custom-layout-tutorial-pinterest