在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.Framex,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你回来,非常类似于CanvasAndroid上的实例.它有辅助方法来绘制圆弧,圆,矩形,点等等.

因此,要在该上下文中绘制一个简单的圆,您可以:

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