iOS專案開發實戰——自定義圓形進度提示控制元件
iOS中預設的進度條是水平方向的進度條,這往往不能滿足我們的需求。但是我們可以自定義類似的圓形的進度提示控制元件,主要使用iOS中的繪圖機制來實現。這裡我們要實現一個通過按鈕點選然後圓形進度提示不斷增加的效果。
(1)新建一個Cocoa Touch Class,注意要繼承自UIView。這個是繪製圖形的類,繪製一個圓形的背景和扇形的進度。具體實現如下:
import UIKit
class ProgressControl: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor(white: 1, alpha: 0)//初始化繪圖背景為白色;
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private var _progressValue:CGFloat = 0//這個就是當前的進度;
func getProgressValue()->CGFloat{
return _progressValue
}
func setProgressvalue(value:CGFloat){//設定進度;
_progressValue = value
setNeedsDisplay()
}
override func drawRect(rect: CGRect) {//繪製圓形背景和扇形進度;
var context = UIGraphicsGetCurrentContext()
var r = rect.width/2
CGContextAddArc(context, r, r, r, 0, 3.1415926 * 2 , 0)
CGContextSetRGBFillColor(context, 0.5, 0.5, 0.5, 1)
CGContextFillPath(context)
CGContextAddArc(context, r, r, r, 0, 3.1415926 * 2 * _progressValue, 0)
CGContextAddLineToPoint(context, r, r)
CGContextSetRGBFillColor(context, 0, 0, 1, 1)
CGContextFillPath(context)
}
}
(2)介面中拖入一個按鈕,拖拽Action事件。在ViewController中實現如下:
import UIKit
class ViewController: UIViewController {
var progressControl:ProgressControl!
override func viewDidLoad() {
super.viewDidLoad()
progressControl = ProgressControl(frame:CGRect(x: 100, y: 100, width: 100, height: 100))
self.view.addSubview(progressControl)
}
//點選按鈕,增加進度
@IBAction func addProgressValuePressed(sender: UIButton) {
progressControl.setProgressvalue(progressControl.getProgressValue()+0.1)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
(3)最後的實現效果如下:
。
。
對於其他的觸發事件,也可以使用這個自定義圓形進度控制元件來進行提示。
github主頁:https://github.com/chenyufeng1991 。歡迎大家訪問!
相關文章
- 自定義圓形進度條控制元件控制元件
- 自定義圓形進度條
- iOS專案開發實戰——自定義控制元件背景與顏色iOS控制元件
- iOS專案開發實戰——配置自定義動畫iOS動畫
- iOS專案開發實戰——使用Xcode6設計自定義控制元件與圖形iOSXCode控制元件
- Android自定義圓形進度條Android
- Android自定義控制元件系列之圓形進度條的實現Android控制元件
- Android開發自定義控制元件實現一個圓形進度條【帶數值和動畫】Android控制元件動畫
- Android自定義圓形進度條實現程式碼Android
- Android自定義View——從零開始實現圓形進度條AndroidView
- Android自定義圓形進度條原始碼解析Android原始碼
- Android進階 自定義View(三)圓形刻度進度條AndroidView
- Android自定義控制元件實現一個帶文字與數字的圓形進度條Android控制元件
- Android圓形圖片--自定義控制元件Android控制元件
- [-Flutter 自定義元件-] 圓形進度條Flutter元件
- Android 自定義控制元件一 帶圓形進度的按鈕 ControlButton2Android控制元件
- [MAUI 專案實戰] 手勢控制音樂播放器(四):圓形進度條UI播放器
- iOS 自定義進度條iOS
- 鴻蒙專案實戰(三):自定義彈窗開發實踐鴻蒙
- iOS專案開發實戰——使用CALayer和定時器實現進度條iOS定時器
- 3個自定義view佈局:矩形TextView,圓形進度條,圓環viewTextView
- iOS專案開發實戰——彈出提示對話方塊iOS
- Android自定義設定圓形圖片控制元件Android控制元件
- iOS專案開發實戰——自定義設定導航欄和狀態列背景iOS
- ios自定義圓環進度條iOS
- 圓形進度條+二維碼掃描+自定義組合控制元件標題欄+自定義矩形view+介面回撥方法控制元件View
- 自定義ImageView完成圓形頭像自定義View
- iOS開發自定義View佈局子控制元件iOSView控制元件
- iOS專案開發實戰——學會使用TableView列表控制元件(一)iOSView控制元件
- iOS專案開發實戰——學會使用TableView列表控制元件(二)iOSView控制元件
- Android 自定義圓形旋轉進度條,仿微博頭像載入效果Android
- iOS專案開發實戰——使用使用者首選項資料進行啟動提示iOS
- Android 自定義圓形頭像Android
- Android自定義圓形頭像Android
- Android 自定義 View:包含多種狀態的下載用圓形進度條AndroidView
- Flutter 波浪圓形進度條Flutter
- SVG畫圓形進度條SVG
- 自定義頭像圓角控制元件控制元件