Drawing circles in Xamarin.iOS (Xamarin Monotouch) to display progress graphically

Question

Because I am very new to the Xamarin world and new to its controls. I would like to add Kroogi to show the progress in my mono-touch application. To show progress, I must mark an arc in a circle. And if possible, someone can help me with some sample code. Awaiting an answer, thanks a lot in advance.

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

This is actually what I really have to do. His work is for me

Here is how it looks. U can create it as a class file and just you can assign a UIView. For more information, you can use this sample Pi Graph project.

[EDIT]: The Draw method originally passed View.Frame x, y to the DrawGraph method. It should be View.Bounds (modified above to reflect this). Remember that the x, y frame refers to the containing super-ver and borders, refers to the current view. This would work if the view were added at 0.0, but as soon as you start navigating the user interface, it will disappear. When arcs are drawn, the values ​​for x, y passed to AddArc should refer to the current view, and not to parental supervision.

Answer 2

Drawing a circle in GLContext is not that difficult, and it's the same thing you would do in Objective-C or Swift.

I assume that you want to create your own view, which you can reuse. To do this, simply inherit from UIView :

 public class CircleView : UIView { } 

Now, to draw something in a new user view, you want to override the Draw method:

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

To draw material, you need to get the current context from UIGraphics , which can be done as follows:

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

The returned CGContext is very similar to Canvas on Android, for example. It has helper methods for drawing arcs, circles, rectangles, points, and more.

To draw a simple circle in this context, you do:

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

So combine everything you get:

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

That's all! Well, not really, that's where you need to start thinking about how you want to draw a progress indicator. I think that will probably work:

• Draw the back surface
• Draw the borders
• Calculate the percentage of progress
• Use degrees to create an arc using gctx.AddArc() , which can take an angle and draw an arc.
• Draw a percentage as a line in the middle

To draw a string, you will need to convert your string to NSAttributedString , then use CTLine to draw the text as follows:

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

Answer 3

Minor changes in the answer provided by @SARATH as copy and paste did not produce the desired result.

Changed _degrees for _percentComplete

Overload constructor for changing colors has been fixed by adding a parameter for percentComplete and added missing element variable assignments for _backColor and _frontColor

Added constant float value for drawing a full circle (FULL_CIRCLE)

Multiply _percentComplete by FULL_CIRCLE to get the final angle for both arcs (with different directions)

Radius calculation

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

Example

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

CircleGraph at 75%