Chào mừng các bạn đến với series mẹo vặt trong swift cùng Tuan Nguyen kỳ tiếp theo

Tuần này mình sẽ hướng dẫn các bạn tạo vòng tròn tích điểm với thư viện MBCircularProgressBar

Bước 1: Cài đặt MBcircularprogressbar1

Đầu tiên chúng ta cần thêm pod "MBCircularProgressBar" vào pod file của chúng ta
Sau đó mở terminal lên cd đến thư mục chứ project của mình và install pod file bằng lệnh pod install
Bạn nào chưa biết cách cài đặt cocoa pod và install pod file có thể xem lại bài hướng dẫn cài đặt firebase của mình để biết có biết thêm.
Sau khi hoàn thành cài đặt chúng ta sẽ làm việc trên file.xworkspace và đã có thể sử dụng được MBCircularProgressBar.

Bước 2: Import vào project và sử dụng

Thư viện lần này được thiết kế một cách trự quan và rất dễ sử dụng. Sau khi cài đặt pod file để có thể sử dụng bạn chỉ cần tạo một UIView trong màn hình làm việc của chúng ta sau đó chọn class MBCircularProgressBarView

Tại file quản trị cần sử dụng project chúng ta

import UIKit
import MBCircularProgressBar

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()


        // Do any additional setup after loading the view, typically from a nib.
    }

Quay lại mainstoryboard chúng ta có thể tinh chỉnh thuộc tính bằng cách tương tác với UIView chúng ta vừa tạo

Mình sẽ giải thích từng thuộc tính để các bạn có thể hiểu và tuỳ biến

  • Show Value String: Thuộc tính này thuộc kiểu Bool cho phép bạn hiển thị hoặc tắt giá trịng trong MBCircularProgressBar
  • Value: Đây sẽ là độ lớn giá trị của MBCircularProgressBar. trong bản giá trị đang là 240
  • Max Value: Giá trị tối đa của vòng
  • Decimal Places ở đây có nghĩa là phần phân số phía sau
  • Value font name, font size : thuộc tính font của giá trị. Ở đây là font chữ của giá trị 240 hiện tại của mình
  • Show Unit String: Thuộc tính này thuộc kiểu Bool cho phép bạn hiển thị hoặc tắt đơn vị phía sau giá trị
  • Unit font name, size, color : là thuộc tính tuỳ chỉnh font tương tự như của value
  • Unit String: đây là nơi bạn thay đổi unit phía sau value. Ví dụ như nếu bạn thêm "đ" ( để hiển thị điểm ) thì vòng hiển thị sẽ hiển thị "240 đ"
  • Progress Rotation: Ở dây giá trị của vòng quay sẽ có giá trị từ 0 - 100. ví dụ như tại gía trị bằng 0 value đang nằm ở giá trị hiện tại nhưng nếu bạn thay đổi bằng 50 thì value sẽ quay được nữa vòng so với vị trí hiện tại
  • Progress Angle : thuộc tính này cho chúng ta tuỳ chỉnh hình trong ví dụ như nếu Progress Angle = 100 thì vòng tròn sẽ hiển thị đầy đủ ngược lại = 50 thì vòng quay sẽ hiển thị 1 nữa
  • Progress Line Width: Hiển thị độ lớn của vòng giá trị
  • Progress color và stoke color : là 2 thuộc tính màu của vòng giá trị
  • ProgressCapTyp đây là kiểu vòng giá trị. Nếu giá trị bằng 0 thì vòng giá tị sẽ hiện thỉ phẳng và bằng 1 nếu muốn vòng giá trị bo tròn ở đầu
  • Empty Line Width: Ở đây có thể hiểu là độ lớn của phần rỗng chưa có giá trị
  • Empty Line color và stoke color tương tự như Progress color và stoke color
  • Text Offset sẽ cho bạn chọn vị trí của text
  • Countdown cho phép giá trị của bạn đếm ngược hoặc ko.

Bạn có thể tuỳ chỉnh thuộc tính ngay tại UIView hoặc bằng code. Để code được thuộc tính của bản thì rất đơn giản chúng ta làm như sau.

Bược 3: Ánh xạ và viết code

  • Ánh xạ UIView chứa MBCircularProgressBar vào file quản trị import MBCircularProgressBar chúng ta sẽ viết một hàm loadProgress 
import UIKit
import MBCircularProgressBar

class ViewController: UIViewController {

    @IBOutlet weak var progressBarView: MBCircularProgressBarView!

    override func viewDidLoad() {
        super.viewDidLoad()


        // Do any additional setup after loading the view, typically from a nib.
    }
    override func viewDidAppear(_ animated: Bool) {
        loadProgressbar()
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    func loadProgressbar () {

        let progressValue = 400
        let maxValue = 500
      //=================================================//

        progressBarView.maxValue = CGFloat(maxValue)
        progressBarView.value = 0

        progressBarView.fontColor = UIColor(red: 218/255, green: 55/255, blue: 65/255, alpha: 1)
        progressBarView.progressRotationAngle = 50
        progressBarView.progressAngle = 100

        progressBarView.progressColor = UIColor(red: 218/255, green: 55/255, blue: 65/255, alpha: 1)
        progressBarView.progressStrokeColor = UIColor(red: 218/255, green: 55/255, blue: 65/255, alpha: 1)
        progressBarView.progressCapType = 1

        progressBarView.emptyLineWidth = 15
        progressBarView.emptyLineColor = UIColor(red: 230/255, green: 231/255, blue: 232/255, alpha: 1)
        progressBarView.emptyLineStrokeColor = UIColor(red: 230/255, green: 231/255, blue: 232/255, alpha: 1)

        //=================================================//


        UIView.animate(withDuration: 3, animations: { 
            self.progressBarView.value = CGFloat(progressValue)
        }) { (true) in
            if progressValue == maxValue {
                self.progressBarView.value = 0

            }


        }

    }



}
  • Ở đây có 2 phần cần chú ý phần đầu tiên là phần mình set thuộc tính cho progressBarView và phần phía dưới là animation để giá trị tăng dần lên trong 3s.
  • Để sự dụng bạn có thể gọi funtion này ra tại nơi bạn cần sử dụng ở đây mình để trong hàm viewDidAppear có nghĩa là sau khi màn hình được hiện lên thì vòng quay tích điểm của mình sẽ tự động chạy từ giá trị 0 -> 240.

Bài viết có thể còn nhiều thiếu sót mong các bạn thông cảm hy vọng bài viết này sẽ giúp ích cho các bạn.

các bạn có thể đọc thêm tại Đây Tuan Nguyen

results matching ""

    No results matching ""