IOS實現簡單的進度條功能_IOS

來源:互聯網
上載者:User

本文執行個體繪製了炫酷的下載進度條,分享給大家供大家參考,具體內容如下

一、實現思路
1、要實現繪圖,通常需要自訂一個UIView的子類,重寫父類的- (void)drawRect:(CGRect)rect方法,在該方法中實現繪圖操作
2、若想顯示下載進度,只需要執行個體化自訂子類的對象(若是storyboard中控制項,只需修改控制項的class屬性為自訂子類的類名即可)

3、效果圖所示的效果其實是繪製一個圓弧,動態改變終點的位置,最終達到一個封閉的圓
4、中間的文字是一個UILabel控制項,根據進度動態改變文字的現實
二、實現步驟
1、自訂一個UIView的子類

//提供一個成員屬性,接收下載進度值@property (nonatomic, assign) CGFloat progress;

2、重寫成員屬性progress的setter

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

3、重寫- (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];}

以上就是本文的全部內容,希望對大家的學習有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.