在Xamarin.iOS（Xamarin Monotouch）中繪制圓圈以圖形方式顯示進度

Question

因為我對Xamarin World非常陌生並且對其控件不熟悉 。 我想在我的單聲道觸摸應用程序中添加Circles to Show Work Progress。 為了顯示進度，我必須在圓圈中標記一個圓弧。 如果可能，任何人都可以幫我一個示例代碼。 等待回答，非常感謝提前。

Answer 1

using System;
    using UIKit;
    using CoreGraphics;

    namespace CircleTest.Touch
    {
        public class CircleGraph : UIView
        {
            int _radius = 10;
            int _lineWidth = 10;
            nfloat _degrees = 0.0f;
            UIColor _backColor = UIColor.FromRGB(46, 60, 76);
            UIColor _frontColor = UIColor.FromRGB(234, 105, 92);
            //FromRGB (234, 105, 92);

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

        }

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

        }

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

            using (CGContext g = UIGraphics.GetCurrentContext ()) {
                _radius = (int)( (this.Bounds.Width) / 3) - 8;
                DrawGraph(g, this.Bounds.GetMidX(), this.Bounds.GetMidY());
            };
        }

        public void DrawGraph(CGContext g,nfloat x0,nfloat y0) {
            g.SetLineWidth (_lineWidth);

            // Draw background circle
            CGPath path = new CGPath ();
            _backColor.SetStroke ();
            path.AddArc (x0, y0, _radius, 0, 2.0f * (float)Math.PI, true);
            g.AddPath (path);
            g.DrawPath (CGPathDrawingMode.Stroke);

            // Draw overlay circle
            var pathStatus = new CGPath ();
            _frontColor.SetStroke ();
            pathStatus.AddArc(x0, y0, _radius, 0, _degrees * (float)Math.PI, false);
            g.AddPath (pathStatus);
            g.DrawPath (CGPathDrawingMode.Stroke);
        }
    }
}

實際上這就是我實際應該做的事情。 它為我工作

這就是它的樣子。 你可以像創建類文件一樣創建它，只需你可以分配給UIView。 有關更多參考，您可以使用此示例項目Pi Graph

[編輯]： Draw方法最初將View.Frame x，y傳遞給DrawGraph方法。 這應該是View.Bounds （上面修改以反映這一點）。 請記住，框架x，y是對包含的超級視圖的引用，並且邊界是引用當前視圖的。 如果視圖是在0,0處添加的話，這可能會有效，但是一旦你開始在UI中移動它就會消失。 繪制弧時，傳遞給AddArc的x，y的值需要引用當前視圖而不是父超級視圖。

Answer 2

在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與Android上的Canvas非常相似。 它有輔助方法來繪制圓弧，圓，矩形，點等等。

因此，要在該上下文中繪制一個簡單的圓，您可以：

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);

Answer 3

@SARATH作為復制和粘貼提供的答案的微小改動沒有產生預期的結果。

將_degrees更改為_percentComplete

修復了通過為percentComplete添加參數來更改顏色的重載構造函數，並為_backColor和_frontColor添加了缺少的成員變量賦值

添加常量浮點值以繪制整圓（FULL_CIRCLE）

用FULL_CIRCLE乘以_percentComplete來獲得兩個弧的結束角度（具有不同的方向）

計算半徑

  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％