你好,歡迎來到IOS教程網

 Ios教程網 >> IOS教程 >> 關於IOS教程 >> OC - 9.基於Quartz2D繪制下載進度條(demo)

OC - 9.基於Quartz2D繪制下載進度條(demo)

編輯:關於IOS教程

效果圖

實現思路

要實現繪圖,通常需要自定義一個UIView的子類,重寫父類的- (void)drawRect:(CGRect)rect方法,在該方法中實現繪圖操作
若想顯示下載進度,只需要實例化自定義子類的對象(若是storyboard中控件,只需修改控件的class屬性為自定義子類的類名即可)

效果圖所示的效果其實是繪制一個圓弧,動態的改變終點的位置,最終達到一個封閉的圓

中間的文字是一個UILabel控件,根據進度動態改變文字的現實

實現步驟

自定義一個UIView的子類

//提供一個成員屬性,接收下載進度值

@property (nonatomic, assign) CGFloat progress;

重寫成員屬性progress的setter

//每次改變成員屬性progress的值,就會調用它的setter
- (void)setProgress:(CGFloat)progress
{
 _progress = progress;
 //當下載進度改變時,手動調用重繪方法
 [self setNeedsDisplay];
}

重寫- (void)drawRect:(CGRect)rect(核心)

- (void)drawRect:(CGRect)rect
{
 //設置圓弧的半徑
 CGFloat radius = rect.size.width * 0.5;
 //設置圓弧的圓心
 CGPoint center = CGPointMake(radius, radius);
 //設置圓弧的開始的角度(弧度制)
 CGFloat startAngle = - M_PI_2;
 //設置圓弧的終止角度
 CGFloat endAngle = - M_PI_2 + 2 * M_PI * self.progress;
 //使用UIBezierPath類繪制圓弧
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 5 startAngle:startAngle endAngle:endAngle clockwise:YES];
 //將繪制的圓弧渲染到圖層上(即顯示出來)
 [path stroke];
}
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved