繪制下載進度條
1.搭建界面.
2.拖動滑竿的時候讓他里面的能夠跟著我的拖動,數字在改變.
數字改變時有一個注意點, 就是要顯示%,它是一個特殊的符號,要用兩個%%代表一個%
3.拖動滑竿的時候就是在上面畫弧.
從最上面,按順時針畫,所以,它的起始角度是-90度.結束角度也是-90度
也是從起始角度開始畫,
起始角度-90度, 看你下載進度是多少
假如說你下載進度是100,就是1 * 360度
也就是說這個進度占你360度多少分之一
CGContextRef ctx = UIGraphicsGetCurrentContext(); CGPoint center = CGPointMake(50, 50); CGFloat radius = rect.size.width * 0.5; CGFloat startA = -M_PI_2; CGFloat endA = -M_PI_2 + M_PI * 2 * PRogress; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
要獲得Progress的值,這個進度值沒有, 所以要傳進來才能畫.弄一個成員變量
要在值改變的時候就要傳進來.
要拿到ProgressView才能夠傳進來,所以要拖線,拿到ProgressView
所有都做好的, 發現沒有畫圓孤?
為什么?
問題:drawRect方法總共調用多少次?
總共就調用一次, 第一次Progress為0,以后都不會執行了
解決:每次傳的時候,就要畫一次,
重寫Progress方法
-(void)setProgress:(CGFloat)progress{ _progress = progress; //手動調用drawRect方法, 讓它重新繪制 [self setNeedsDisplay];}
運行發現還是不畫,為什么?
原因:drawRect方法是不能手動調用,因為在drawRect方法中才能獲取跟View相關聯的上下文
系統在調用DrawRect方法時,會自動幫你創建一個跟View相關聯的上下文,并且傳遞給它.
自己調用的,沒有給drawRect方法傳遞上下文.所以在draw方法中拿不到上下文.
解決辦法:想要重繪,調用[self setNeedsDisplay];
告訴系統重新繪制View,系統就會自動幫你調用drawRect方法,系統在調用
drawRect方法,它會幫你創建上下文
繪制餅圖
第一步, 獲取上下文
第二步,拼接路徑 ,繪制第一個扇形
獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();CGPoint center = CGPointMake(125, 125);CGFloat radius = 100;CGFloat startA = 0;CGFloat endA = 0;CGFloat angle = 25 / 100.0 * M_PI * 2;endA = startA + angle;
拼接路徑
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];添加一根線到圓心[path addLineToPoint:center];把路徑添加到上下文CGContextAddPath(ctx, path.CGPath);把上下文渲染到ViewCGContextFillPath(ctx);
注意點: CGFloat angle = 25 / 100.0 * M_PI * 2;
100.0一定要加一個.0
繪制第二個扇形
一樣的, 把路徑描述第二個扇形就好了
直接來個path =
讓Path指針重新指向一個新的對象.也就是把指針重復利用了
之前的那個對象已經用完了,已經添加到了上下文當中了.
第二個扇形
startA = endA;angle = 25 / 100.0 * M_PI * 2;endA = startA + angle;path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[path addLineToPoint:center];
把二個路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
把上下文渲染到View
CGContextFillPath(ctx);
添加第二個扇形之后, 發現它們的顏色都一樣,想要修改它的顏色
在下面再寫一個
[[UIColor greenColor] set];
下面的一個顏色把之前的東西給覆蓋了.
解決辦法, 讓它渲染兩次
第三個扇形,把第二個拷貝一下就好了
總結:
有沒有發現在畫三個扇形用太多代碼了,
里面有很多代碼相似.
是不是可以把代碼給抽一下
可以用便利數組的的方式
發現就兩個地方變了, 一個數字變了, 一個顏色變了.
抽取代碼:
假設他給一組數據
NSArray datas = @[@25,@25,@50];
把數組便利出來
NSArray *datas = @[@25,@25,@50];CGPoint center = CGPointMake(125, 125);CGFloat radius = 100;CGFloat startA = 0;CGFloat angle = 0;CGFloat endA = 0;for (NSNumber *number in datas) { startA = endA; angle = number.intValue / 100.0 * M_PI * 2; endA = startA + angle; 描述路徑 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];[path addLineToPoint:center];[[self randomColor] set];[path fill];}- (UIColor *)randomColor{ CGFloat r = arc4random_uniform(256)/ 255.0; CGFloat g = arc4random_uniform(256)/ 255.0; CGFloat b = arc4random_uniform(256)/ 255.0; return [UIColor colorWithRed:r green:g blue:b alpha:1];}
隨機顏色:alpha通道它的取值范圍是0-255;
OC里面的取值范圍只能是0到1,把它 / 255.0就讓它到這個范圍了,
arc4random_uniform(256)隨機產生 0 - 255的數.
顏色通道它的取值范圍是0 到 255.
所以說要把0 到 255轉換成0 到 1
直接是 0 ~ 255 / 255.0就可以了.
剛好是255就是255 / 255.0 就是1,
剛才是0 就是 0 / 255.0 就是0.
新聞熱點
疑難解答
