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