Круговые контрольные бары в IOS

Я хочу создать круговой индикатор выполнения следующим образом:

Круговой индикатор выполнения

Как я могу это сделать с помощью Objective-C и Cocoa?

Как я начал это делать, это создание UIView и редактирование drawRect, но я немного потерялся. Любая помощь будет принята с благодарностью.

Благодаря!

Основная идея – использовать class UIBezierPath в ваших интересах. Вы можете рисовать дуги, которые достигают эффекта, которым вы пользуетесь. У меня было всего полчаса или около того, чтобы иметь трещину, но моя попытка ниже.

Очень рудиментарный, он просто использует штрих на пути, но здесь мы идем. Вы можете изменить / изменить это для ваших конкретных потребностей, но логика для обратного отсчета дуги будет очень похожа.

В classе просмотра:

 @interface TestView () { CGFloat startAngle; CGFloat endAngle; } @end @implementation TestView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code self.backgroundColor = [UIColor whiteColor]; // Determine our start and stop angles for the arc (in radians) startAngle = M_PI * 1.5; endAngle = startAngle + (M_PI * 2); } return self; } - (void)drawRect:(CGRect)rect { // Display our percentage as a string NSString* textContent = [NSString stringWithFormat:@"%d", self.percent]; UIBezierPath* bezierPath = [UIBezierPath bezierPath]; // Create our arc, with the correct angles [bezierPath addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2) radius:130 startAngle:startAngle endAngle:(endAngle - startAngle) * (_percent / 100.0) + startAngle clockwise:YES]; // Set the display for the path, and stroke it bezierPath.lineWidth = 20; [[UIColor redColor] setStroke]; [bezierPath stroke]; // Text Drawing CGRect textRect = CGRectMake((rect.size.width / 2.0) - 71/2.0, (rect.size.height / 2.0) - 45/2.0, 71, 45); [[UIColor blackColor] setFill]; [textContent drawInRect: textRect withFont: [UIFont fontWithName: @"Helvetica-Bold" size: 42.5] lineBreakMode: NSLineBreakByWordWrapping alignment: NSTextAlignmentCenter]; } по @interface TestView () { CGFloat startAngle; CGFloat endAngle; } @end @implementation TestView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code self.backgroundColor = [UIColor whiteColor]; // Determine our start and stop angles for the arc (in radians) startAngle = M_PI * 1.5; endAngle = startAngle + (M_PI * 2); } return self; } - (void)drawRect:(CGRect)rect { // Display our percentage as a string NSString* textContent = [NSString stringWithFormat:@"%d", self.percent]; UIBezierPath* bezierPath = [UIBezierPath bezierPath]; // Create our arc, with the correct angles [bezierPath addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2) radius:130 startAngle:startAngle endAngle:(endAngle - startAngle) * (_percent / 100.0) + startAngle clockwise:YES]; // Set the display for the path, and stroke it bezierPath.lineWidth = 20; [[UIColor redColor] setStroke]; [bezierPath stroke]; // Text Drawing CGRect textRect = CGRectMake((rect.size.width / 2.0) - 71/2.0, (rect.size.height / 2.0) - 45/2.0, 71, 45); [[UIColor blackColor] setFill]; [textContent drawInRect: textRect withFont: [UIFont fontWithName: @"Helvetica-Bold" size: 42.5] lineBreakMode: NSLineBreakByWordWrapping alignment: NSTextAlignmentCenter]; } 

Для controllerа вида:

 @interface ViewController () { TestView* m_testView; NSTimer* m_timer; } @end - (void)viewDidLoad { // Init our view [super viewDidLoad]; m_testView = [[TestView alloc] initWithFrame:self.view.bounds]; m_testView.percent = 100; [self.view addSubview:m_testView]; } - (void)viewDidAppear:(BOOL)animated { // Kick off a timer to count it down m_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(decrementSpin) userInfo:nil repeats:YES]; } - (void)decrementSpin { // If we can decrement our percentage, do so, and redraw the view if (m_testView.percent > 0) { m_testView.percent = m_testView.percent - 1; [m_testView setNeedsDisplay]; } else { [m_timer invalidate]; m_timer = nil; } } 

Я реализовал простую библиотеку для iOS, которая делает именно это. Он основан на classе UILabel, поэтому вы можете отображать все, что хотите, в вашем индикаторе выполнения, но вы также можете оставить его пустым.

После инициализации у вас есть только одна строка кода, чтобы установить ход:

[_myProgressLabel setProgress:(50/100))];

Библиотека называется KAProgressLabel

Мой пример с магическими номерами (для лучшего понимания):

  CAShapeLayer *circle = [CAShapeLayer layer]; circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath; circle.fillColor = [UIColor clearColor].CGColor; circle.strokeColor = [UIColor greenColor].CGColor; circle.lineWidth = 4; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animation.duration = 10; animation.removedOnCompletion = NO; animation.fromValue = @(0); animation.toValue = @(1); animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [circle addAnimation:animation forKey:@"drawCircleAnimation"]; [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)]; [imageCircle.layer addSublayer:circle]; 

Для Swift используйте это,

 let circle = UIView(frame: CGRectMake(0,0, 100, 100)) circle.layoutIfNeeded() let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2) let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83 var circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true ) let progressCircle = CAShapeLayer() progressCircle.path = circlePath.CGPath progressCircle.strokeColor = UIColor.greenColor().CGColor progressCircle.fillColor = UIColor.clearColor().CGColor progressCircle.lineWidth = 1.5 progressCircle.strokeStart = 0 progressCircle.strokeEnd = 0.22 circle.layer.addSublayer(progressCircle) self.view.addSubview(circle) 

Ссылка: см. Здесь .

Вы можете проверить мой lib MBCircularProgressBar

Swift 3 используют это,

CAShapeLayer с анимацией: Продолжайте с Zaid Pathan ans.

  let circle = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100)) circle.layoutIfNeeded() var progressCircle = CAShapeLayer() let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2) let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83 let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true ) progressCircle = CAShapeLayer () progressCircle.path = circlePath.cgPath progressCircle.strokeColor = UIColor.green.cgColor progressCircle.fillColor = UIColor.clear.cgColor progressCircle.lineWidth = 2.5 progressCircle.strokeStart = 0 progressCircle.strokeEnd = 1.0 circle.layer.addSublayer(progressCircle) let animation = CABasicAnimation(keyPath: "strokeEnd") animation.fromValue = 0 animation.toValue = 1.0 animation.duration = 5.0 animation.fillMode = kCAFillModeForwards animation.isRemovedOnCompletion = false progressCircle.add(animation, forKey: "ani") self.view.addSubview(circle) 
  • Разработка iPhone: освобожден указатель
  • Сортировка NSArray пользовательских объектов по их свойствам NSDate
  • Выбрать программную строку таблицы таблиц
  • UIScrollView не прокручивается после обновления до iOS7 / xcode 5
  • iOS 8 Снимок снимка, который не был отображен, приводит к созданию пустого моментального снимка
  • Что мне нужно сделать, чтобы заставить Core Data автоматически переносить модели?
  • Как предоставить пространство между двумя ячейками в виде таблицы?
  • Использование MPMediaItems с AVAudioPlayer
  • Почему я не должен использовать Objective C 2.0-аксессоры в init / dealloc?
  • Добавление неизвестного количества строк в «Статические ячейки» UITableView
  • NSArray слабых ссылок (__unsafe_unretained) для объектов под ARC
  • Interesting Posts

    Как я имитирую статические методы в classе с помощью easymock?

    Весна и hibernate: сеанс не найден для текущей темы

    Как восстановить удаленный файл docx?

    Событие, зарегистрированное в CheckedListBox?

    Как найти Waldo с Mathematica?

    Почему я не могу создать пустой массив вложенного classа?

    HttpURLConnection для отправки изображений, аудио и видео файлов с параметром может (String или Json String) Android

    Как распечатать мой объект Java, не получив «SomeType @ 2f92e0f4»?

    Как изменить кодировку символов в текстовом файле в OpenOffice.org writer?

    Должен ли я использовать свойства или прямую ссылку при доступе к переменным экземпляра внутри?

    Может ли две разные строки генерировать один и тот же MD5-hash-код?

    Как выбрать из MySQL, где имя таблицы Variable

    Для чего нужен JsonRequestBehavior?

    Как восстановить изображения из резервной копии MediaWiki?

    Коробка для бродяг не может быть найдена или недоступна в удаленном каталоге – несовместимая версия завитка

    Давайте будем гением компьютера.