Lời mở đầu

Có thể các bạn đã biết progress view của Apple nó khá là đơn giản và ýt thuộc tính để chúng ta có thể sử dụng cũng như thay đổi để phù hợp với thiết kế. Trong dự án gần đây mình đã có cơ hội để động vào nó. Trong thời gian đầu mình tự mày mò thì progress bar không hỗ trợ việc như vậy. Vì vậy mình viết bài này để chia sẻ về cách mình đã custom lại progress này. Hi vọng nó giúp các bạn gặp khó khăn với việc custom lại progress bar.

Vấn đề cần giải quyết: Làm thế nào để bo tròn góc của progress bar

Đây là progress view mình cần đạt được:

Đây là progress bar mặc đinh của apple:

Phân tích

Khi thử đọc tài liệu về UIProgressView. Không có thuộc tính nào giúp mình có thể đạt được điều mình muốn.

Để bo tròn cả progressview thì ta có thể dùng layer.cornerRadius, nhưng để bo tròn thằng progress chạy bên trong thì sao? Chúng ta cần tìm được cái view đó và bo nó lại.

Giải quyết bài toán

Bước 1: Chúng ta cần tạo constraint height cho progressView

Chúng ta có 2 cách để tăng height cho ProgressView:
1. Sử dụng Transform Scale: Nó sẽ làm cornerRadius chạy không đúng
2. Sử dụng constraint height: Nên chúng ta chon cách này

Tuy rằng chúng ta đã constraint height của nó bằng 16 nhưng thực tế height của progressView vẫn = 2. Vì vậy khi set cornerRadius chúng ta không thể sử dụng frame.height/2 được mặc dù đó là cách tốt nhất đối với các view khác.

Bước 2: Bo tròn góc cho trackView

progressBar.layer.cornerRadius = 8.0
progressBar.clipsToBounds = true

Bước 3: Bo tròn progressView

        if let sublayers = progressBar.layer.sublayers, sublayers.count > 1 {
            sublayers[1].cornerRadius = 8.0
        }
        progressBar.subviews[1].clipsToBounds = true

Nếu để ý kĩ các bạn sẽ thấy progress bar này gồm 2 view chồng lên nhau đó là Progress View và track view. Và theo thứ tự trong lập trình thì thằng đầu tiên là thằng nằm dưới có index = 0. Chúng ta nhìn thấy progress view vì nó nằm trên Track View -> nó có index = 1

Lưu ý: Nó chỉ đúng khi chúng ta không thêm subview, sublayer cho ProgressView. Vậy nên trong trường hợp này chúng ta sẽ ổn.

If let giúp chúng ta handle trường hợp crash app, khi các layer của progress bị remove. (nó thường k xảy ra, nhưng vì an toàn chúng ta nên thêm dòng này)

sublayers[1]: là layer của track view
subviews[1]: là trackView

Kết quả thu được thật mỹ mãn 😀

Ngoài ra các bạn có thể sử dụng image cho progress view cũng như trackView để có 1 progress đẹp hơn.

progressBar.progressImage = UIImage(named: "2697")

Các bạn có thể tải về file assets ở dưới:

Tổng kêt

Mình hi vọng bài viết dưới đây giúp các bạn hiểu rõ hơn về UIProgressView và dễ dàng hơn khi làm việc với nó.

let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"

func insertBook() {
    if openDatabaseConnectionAtPath(path: getDatabasePath()) {
        let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"
        do {
           try database.executeUpdate(query, values: nil)
        } catch let err {
           print("Insert failed, error: \(err.localizedDescription)")
        }
    }
    database.close()
}

https://guides.cocoapods.org/using/using-cocoapods.html

struct Book {
    let id: Int
    let name: String
    let author: String
    let price: Double
    
    func toString() {
        print("Book's info: id: \(id), name: \(name), author: \(author), price: \(price)")
    }
}

import Foundation
import FMDB

class DatabaseManager {
    static let shared = DatabaseManager()
    var database: FMDatabase!
}

func getDatabasePath() -> String {
   let directoryPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)
   let path = directoryPath.first!.appendingPathComponent("musicDB.db")
   print(path)
   return path.description
}

func getPathOfExistDB() -> String? {
   if let path = Bundle.main.path(forResource: "bookDB", ofType: ".db") {
       return path
   } 
   return nil
}

func createDatabase() {
    if database == nil {
        if !FileManager.default.fileExists(atPath: getDatabasePath()) {
            database = FMDatabase(path: getDatabasePath())
        }
    }
}

database.open()

database.close()

func openDatabaseConnectionAtPath(path: String) -> Bool {
    if database == nil {
        if !FileManager.default.fileExists(atPath: path) { // don’t want to create the database file again and destroy the original database.
            database = FMDatabase(path: path)
        }
    }
        
    if database != nil {
        if database.open() {
            print("Open Success")
            return true
        }
    }
    print("Open failed")
    return false
}

let query = "create table Book (id integer primary key autoincrement not null, name text not null, author text not null, price float not null default 0)"

database.executeUpdate(query, values: nil)

func createBookTable() {
    if openDatabaseConnectionAtPath(path: getDatabasePath()) {
        let query = "create table Book id integer primary key autoincrement not null, name text not null, author text not null, price float not null default 0"
        do {
            try database.executeUpdate(query, values: nil)
        } catch let err {
            print("Execute query failed. error: \(err.localizedDescription)")
        }
    }
    database.close()
}

Swift—Closure

• 

func calculate(a: Int, b: Int) -> Int {
    return a + b
} 
// Function này có kiểu dữ liệu là (Int, Int) -> Int

var onCalculate: (Int, Int) -> (Int)

var onPrint: (String) -> Void

class FirstViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func didTapButtonGoNext(_ sender: Any) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)        
        let secondVC = storyboard.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController
        
        // Viết code hiển thị kết quả ở đây
        
        navigationController?.pushViewController(secondVC, animated: true)
        
    }
}

class SecondViewController: UIViewController {
    // 1
    var completionSum: ((Int) -> (Void))?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 3
        let result = calculate(num1: 9, num2: 8)
        completionSum?(result)
        
        // 4
        navigationController?.popViewController(animated: true)
    }
    
    // 2
    func calculate(num1: Int, num2: Int) -> Int {
        return num1 + num2
    }
}

secondVC.completionSum = { [weak self] (result) in
    self?.myLabel.text = String(result)
}

func showResult(result:  Int) {
    myLabel.text = String(result)
}

secondVC.completionSum = showResult

class Rank {
    subscript (index: Int) -> String {
        switch index {
            case 1: return "First"
            case 2: return "Second"
            case 3: return "Three"
            default: return "Dont have rank"
        }
    }
}

let rank = Rank()
print (rank[1]) // -> "First"
print (rank[12]) // -> "Dont have rank"

class Car {
    let id: Int = 1
    var color: UIColor?
    var price: Double
    
    init(price: Double) {
        self.price = price
    }
}

let car1 = Car(price: 5000)

struct Car {
    let id: Int = 1
    var color: UIColor
    var price: Double
}

let car1 = Car(color: .red, price: 5000)

let car1 = Car(price: 5000)
var car2 = car1
car2.price = 10000
print(car1.price) // -> 5000.0
print(car2.price) // -> 10000.0

let car1 = Car(price: 5000)
let car2 = car1
car2.price = 10000
print(car1.price) // -> 10000.0
print(car2.price) // -> 10000.0
print(car1 === car2) // -> true

class Dog {
    var name = ""
}

let dogs = [Dog](repeating: Dog(), count: 3)
dogs[0].name = "Green"
dogs[1].name = "Red"
dogs[2].name = "Blue"

print("\(dogs[0].name) \(dogs[1].name) \(dogs[2].name)") // Blue Blue Blue

operation.cancel()

operationQueue.cancelAllOperations()

class AsyncOperation: Operation {
    // State enumaration
    enum State: String {
        case ready, excuting, finished

        // 1
        fileprivate var keyPath: String {
            return "is" + rawValue.capitalized
        }
    }
    // State property
    // 2
    var state: State = .ready {
        // 3
        willSet {
            debugPrint("New value \(newValue)")
            willChangeValue(forKey: newValue.keyPath)
            debugPrint("Will change value 1 for key \(newValue.keyPath)")
            willChangeValue(forKey: state.keyPath)
            debugPrint("Will change value 2 for key \(state.keyPath)")
        }
        didSet {
            debugPrint("old value \(oldValue)")
            didChangeValue(forKey: oldValue.keyPath)
            debugPrint("Did change value 1 for key \(oldValue.keyPath)")
            didChangeValue(forKey: state.keyPath)
            debugPrint("Did change value 2 for key \(state.keyPath)")
        }
    }
}

extension AsyncOperation {
    // 1
    open override var isReady: Bool {
        return super.isReady && state == .ready
    }

    open override var isExecuting: Bool {
        return state == .excuting
    }


    open override var isFinished: Bool {
        return state == .finished
    }
    // 2
    open override var isAsynchronous: Bool {
        return true
    }
    // 3
    open override func start() {
        // 4
        if isCancelled {
            state = .finished
            return
        }

        main()
    }

    open override func cancel() {
        super.cancel()
        state = .finished
    }
}

Lời mở đầu

Chào mọi người, thông thường mành hình Launch screen là nơi để hiển thị logo của ứng dụng khi mà nó được khởi động, và mọi người thường để nó là một ảnh tĩnh để đảm bảo ứng dụng khởi động nhanh nhất có thể. Nhưng gần đây, mình có nhận được một yêu cầu của khách hàng về việc làm cho màn hình này trở nên sinh động hơn. Mình thấy nó cũng khá hay nên mình muốn chia sẻ với mọi người.

Chia sẻ cách tạo Launch screen một cách sinh động

Cách làm của chúng ta sẽ là tạo một LaunchScreen mới thay thế cho cái cũ. Trên màn hình LaunchScreen mới chúng ta sẽ thêm vào một số đối tượng và chúng ta sẽ làm cho nó chuyển động để tạo hiệu ứng. Ở phần hướng dẫn này mình sẽ dùng 2 UIImageView và 1 UILabel.
Cụ thể mục đích của chúng ta sẽ làm chuyển động như hình này:

Mình sẽ phải tách logo GST ra làm 2 phần và cho nó chuyển động từ 2 bên vào chính giữa và ghép thành một logo hoàn chỉnh.

Đây là assets mình dùng trong project này:

Bắt đầu

Bước 1: Mở XCode và tạo mới Project (Single View App)

Bước 2: Chúng ta cần file LaunchScreen.storyboard và tạo mới file LaunchScreen bằng cách:
New File -> View -> đặt tên là LaunchScreen.xib.

Bước 3: Mở tab General của Target Chọn lại Launch Screen File là LaunchScreen như hình dưới:

Bước 4: Chỉnh sửa lại file LaunchSceen.xib để chuẩn bị cho việc sử dụng animtion

Mở file LaunchScreen.xib chúng ta kéo vào 2 UIImageView và set image và tag cho từng lần lượt cho các view theo thứ tự từ trên xuống là 1, 2, 3 sao cho nó như hình dưới:

Tiếp đến để đảm bảo nó chạy đúng với các kích thước màn hình khác nhau chúng ta cần set constraint cho các item trên màn hình.

Ta cho imgeview với tag = 1 ẩn khỏi màn hình để sau chúng ta sẽ animate nó ra giữa màn hình vậy ta sẽ set constraint như hình dưới đây.

Tương tự ta cũng set constraint imageview còn lại như hình dưới:

Vậy là chúng ta đã chuẩn bị xong UI, giờ chúng ta cần đi vào code để thưc hiện animation.

Bước 5. Tạo file LaunchScreenManager.swift để thực hiện animation bằng cách:
Chọn new file -> Swift file -> đặt tên là LaunchScreenManager.swift

Thêm code vào như dưới đây:

import Foundation
import UIKit

class LaunchScreenManager {
    // dòng này dùng để tạo singleton: Nó đảm bảo sẽ chỉ tạo ra 1 instance duy nhất.
    static let instance = LaunchScreenManager()

    var view: UIView?// Đây sẽ là LaunchScreen của chúng ta
    var parentView: UIView?

    init() {}

    func loadView() -> UIView {
        let launchScreen = UINib(nibName: "LaunchScreen", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView
        return launchScreen
    }

    // Phương thức này thực hiện việc thêm view(launch screen) vào màn hình
    // Và set lại frame và vị trí cho LaunchScreen view
    func fillParentViewWithView() {
        guard let view = view, let parentView = parentView else { return }
        parentView.addSubview(view)
        view.frame = parentView.bounds
        view.center = parentView.center
    }
    
    // MARK: - Animation

    // Phương thức này để setup launch screen view và gọi hàm thực hiện animation
    func animateAfterLaunch(_ parentViewPassedIn: UIView) {
        parentView = parentViewPassedIn
        view = loadView()
        fillParentViewWithView()
        // start animation
        startAnimation()
    }

    func startAnimation() {

        // Lúc này chúng ta cần lấy các view đã add vào file LaunchScreen.xib để thực hiện animation
        // Để tránh sai sót trong việc đánh tag cho các view -> crash app
        //Chúng ta cần kiểm tra các item này có bị nil hay không
        guard let logo1 = view?.viewWithTag(1),
            let logo2 = view?.viewWithTag(2),
            let label = view?.viewWithTag(3) else { return }

        let screen = UIScreen.main.bounds.size

        UIView.animateKeyframes(withDuration: 2, delay: 0, options: [], animations: {
            //0
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.1) {
                logo1.transform = CGAffineTransform.identity.translatedBy(x: screen.width / 2 + logo1.frame.size.width / 2, y: 0)
                logo2.transform = CGAffineTransform.identity.translatedBy(x: -(screen.width / 2 + logo2.frame.size.width / 2), y: 0)
            }
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.1) {
                label.center.x = screen.width / 2
            }
            UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
                self.view?.alpha = 0
            }
        }) { (_) in
            self.view?.removeFromSuperview()
        }
    }
}

Bước cuối cùng:
Mở file SceneDelegate.swift thêm đoạn code thực thi animation để khi app được khởi động sẽ chạy animation 😀

Done, giờ chúng ta sẽ build app lên và tận hưởng 😀

Kết quả

Đối với việc tạo animation nếu mọi người quan tâm có thể tham khảo các bài viết của
Vũ Đức Cương nhé!
Part1
Part2
Part3

Tổng kết

Mình hi vọng bài viết của mình có thể giúp ích cho mọi người, để góp phần tạo ra các ứng dụng ngon hơn 😀

Dưới đây là code project demo:

TableView là được sử dụng rất nhiều trong các ứng dụng của chúng ta. Vì vậy, việc tạo thêm một số hiệu ứng cho TableView khiến cho ứng dụng trở lên sinh động và bớt nhàm chán hơn. Chỉ với một vài câu lệnh, mọi thứ sẽ trở lên mới mẻ và dễ gần hơn rất nhiều lần.

Hầu như các animation của tableview sẽ được tạo trong method dưới đây:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    // Add animations here
}

Chúng ta bắt đầu với hiệu ứng đơn giản nhất nhưng được sử dụng nhiều nhất:

Kết quả đạt được:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.alpha = 0
        UIView.animate(withDuration: 0.5,
                       delay: 0.1 * Double(indexPath.row),
            animations: {
                cell.alpha = 1
        })
    }

Hiệu ứng Bounce animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
      cell.transform = CGAffineTransform(translationX: 0, y: 60)
        UIView.animate(
            withDuration: 1,
            delay: 0.05 * Double(indexPath.row),
            usingSpringWithDamping: 0.4,
            initialSpringVelocity: 0.1,
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
        })
}

Move and Fade Animation

Kết hợp hai hiệu ứng trên và chung ta ngừng sử dụng hiệu ứng Spring cho Cell, một hiệu ứng mới được tạo thành.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.transform = CGAffineTransform(translationX: 0, y: 30)
        cell.alpha = 0

        UIView.animate(
            withDuration: 1,
            delay: 0.05 * Double(indexPath.row),
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
                cell.alpha = 1
        })
}

Slide in Animation

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.transform = CGAffineTransform(translationX: tableView.bounds.width, y: 0)

        UIView.animate(
            withDuration: 1,
            delay: 0.5 * Double(indexPath.row),
            options: [.curveEaseInOut],
            animations: {
                cell.transform = CGAffineTransform(translationX: 0, y: 0)
        })
    }

Trên đây là một số ví dụ về việc thêm animation vào tableview bằng các hiệu ứng cơ bản của UIView( transform, alpha …) ngoài ra với 1 số hiệu ứng khác như Flip, Change color … cũng được sử dụng rất nhiều trong các hiệu ứng animation. Chúng ta hoàn toàn có thể tạo ra các animation mang mang màu sắc của cá nhân như các họa sĩ code vậy.
Một lưu ý đó là khi muốn kiểm soát tốt hơn các animation thì chúng ta nên tạo ra một class riêng  để xử lý việc chạy animation. Nó đồng thời cũng kiểm soát việc animation chỉ chạy một lần duy nhất với tất cả các cell.