Рисование Кругов На Xamarin.iOS (Xamarin Monotouch) для графического отображения прогресса

рисование круга на GLContext не так сложно сделать и то же самое, что и в Objective-C или Swift.

я предполагаю, что вы хотите создать свой собственный вид, который вы можете использовать. Для этого просто наследовать от UIView:

public class CircleView : UIView
{
}

теперь, чтобы нарисовать что-нибудь в новом пользовательском представлении, вы хотите переопределить Draw способ:

public override void Draw(RectangleF rect)
{
    base.Draw(rect);
    // draw stuff in here
}

чтобы нарисовать материал, вам нужно получить текущий контекст из UIGraphics, что можно сделать как Итак:

using (var gctx = UIGraphics.GetCurrentContext())
{
    // use gctx to draw stuff
}

на CGContext вы возвращаетесь, очень похоже на Canvas на Android, например. Он имеет вспомогательные методы для рисования дуг, кругов, прямоугольников, точек и многое другое.

Итак, чтобы нарисовать простой круг в этом контексте, вы:

gctx.SetFillColor(UIColor.Cyan.CGColor);
gctx.AddEllipseInRect(rect);

так объединить все, что вы получаете:

public class CircleView : UIView
{
    public override Draw(RectangleF rect)
    {
        base.Draw(rect);
        using (var gctx = UIGraphics.GetCurrentContext())
        {
            gctx.SetFillColor(UIColor.Cyan.CGColor);
            gctx.AddEllipseInRect(rect);
        }
    }
}

вот оно! Ну, не совсем, здесь вам нужно начать думать о том, как вы хотите нарисовать индикатор прогресса. Что я думаю, вероятно работа:

1. нарисуйте заднюю землю
2. нарисуйте границы
3. рассчитать Градусы от прогресса в процентах
4. используйте Градусы для создания дуги с помощью gctx.AddArc(), который может принять угол и нарисовать дугу.
5. нарисуйте процент в виде строки в середине

чтобы нарисовать строку, вам нужно будет преобразовать строку в NSAttributedString затем использовать CTLine чтобы нарисовать текст, как:

using(var line = new CTLine(nsAttrString))
    line.Draw(gctx);

незначительные изменения ответа, предоставленного @SARATH в качестве копирования и вставки, не дали желаемого результата.

изменено _degrees на _percentComplete

исправлен конструктор перегрузки для изменения цветов путем добавления параметра для percentComplete и добавлены отсутствующие назначения переменных-членов для _backColor и _frontColor

добавлено постоянное значение float для рисования полного круга (FULL_CIRCLE)

умножьте _percentComplete на FULL_CIRCLE на получите конечный угол для обеих дуг (с разными направлениями)

расчет радиуса

  public class CircleGraph : UIView
  {
      const float FULL_CIRCLE = 2 * (float)Math.PI;
      int _radius = 10;
      int _lineWidth = 10;
      nfloat _percentComplete = 0.0f;
      UIColor _backColor = UIColor.LightGray; //UIColor.FromRGB(46, 60, 76);
      UIColor _frontColor = UIColor.Green; //UIColor.FromRGB(234, 105, 92);

      public CircleGraph(CGRect frame, int lineWidth, nfloat percentComplete)
      {
         _lineWidth = lineWidth;
         _percentComplete = percentComplete;
         this.Frame = new CGRect(frame.X, frame.Y, frame.Width, frame.Height);
         this.BackgroundColor = UIColor.Clear;

      }

      public CircleGraph(CGRect frame, int lineWidth, nfloat percentComplete, UIColor backColor, UIColor frontColor)
      {
         _lineWidth = lineWidth;
         _percentComplete = percentComplete;
         this.Frame = new CGRect(frame.X, frame.Y, frame.Width, frame.Height);
         this.BackgroundColor = UIColor.Clear;
         _backColor = backColor;
         _frontColor = frontColor;
      }

      public override void Draw(CoreGraphics.CGRect rect)
      {
         base.Draw(rect);

         using (CGContext g = UIGraphics.GetCurrentContext())
         {
            var diameter = Math.Min(this.Bounds.Width, this.Bounds.Height);
            _radius = (int)(diameter / 2) - _lineWidth;

            DrawGraph(g, this.Bounds.GetMidX(), this.Bounds.GetMidY());
         };
      }

      public void DrawGraph(CGContext g, nfloat x, nfloat y)
      {
         g.SetLineWidth(_lineWidth);

         // Draw background circle
         CGPath path = new CGPath();
         _backColor.SetStroke();
         path.AddArc(x, y, _radius, 0, _percentComplete * FULL_CIRCLE, true);
         g.AddPath(path);
         g.DrawPath(CGPathDrawingMode.Stroke);

         // Draw overlay circle
         var pathStatus = new CGPath();
         _frontColor.SetStroke();

         // Same Arc params except direction so colors don't overlap
         pathStatus.AddArc(x, y, _radius, 0, _percentComplete * FULL_CIRCLE, false);
         g.AddPath(pathStatus);
         g.DrawPath(CGPathDrawingMode.Stroke);
      }
   }

пример

var circleGraph = new CircleGraph(circleGraphView.Frame, 20, 0.75f);

CircleGraph на 75%