Tạo đồng hồ đo đầy đủ (Hiển thị trạng thái) trong Xamarin

Question

Tôi đang cố gắng thiết kế một điều khiển hiển thị trạng thái hiện tại của một quá trình, như hình dưới đây.

Vì vậy, chúng tôi có một màn hình tròn của trạng thái với phần màu cho sự kiện quan trọng hoặc các điểm kiểm tra. Trong hình ảnh, chúng tôi đã trải qua hai giai đoạn đầu tiên và giai đoạn thứ ba là 70%.

Tôi biết có một điều khiển trong Jquery khá giống nhau. Nhưng tôi không chắc chắn, nếu có sự kiểm soát của bên thứ ba trong các hình thức Xamarin mà tôi có thể sử dụng. Nếu không có kiểm soát của bên thứ ba, tôi nên tiến hành thiết kế như thế nào.

Tôi có nên tạo hình ảnh cho các giai đoạn khác nhau và hiển thị hình ảnh không? Hoặc tôi có nên tạo một điều khiển tùy chỉnh có thể lấy hai giá trị, "mốc quan trọng" và "percent_complete", và sau đó thiết kế có thể là một biểu đồ hình tròn khi đang bay?

Answer 1

Sử dụng NGraphics w/NControl bạn có thể tạo phiên bản "vectơ" của "đồng hồ đầy đủ" mà không tạo trình kết xuất nền tảng hoặc cần thêm thư viện như Skia vào dự án của bạn.

Lưu ý: SkiaSharp và các thư viện 2d/3d nguyên bản khác rất tuyệt, nhưng thêm rất nhiều chi phí cho ứng dụng và nếu bạn không cần tất cả các tính năng của chúng thì kích thước ứng dụng, mức sử dụng bộ nhớ, thời gian khởi tạo, v.v. ..) không đáng giá (IMHO).

lại: https://github.com/praeclarum/NGraphics

Tôi lột xuống một MultiSegmentProgressControl mà tôi đã để cho bạn thấy những điều cơ bản của hồ quang vẽ. Phiên bản đầy đủ mà tôi đã làm cho phép bạn thêm và tạo hoạt ảnh cho nhiều phân đoạn, hiển thị tỷ lệ phần trăm, phân đoạn phá vỡ khi chạm, v.v ...

Sử dụng NControl bạn có thể tạo điều khiển tổng hợp với các yếu tố cảm ứng, do đó tùy bạn về mức độ cần thiết của bạn.

lại: https://github.com/chrfalch/NControl

public class MultiSegmentProgressControl2 : NControlView 
{ 
    double ringWidth = 50; 
    double ringInnerWidth = 100; 
    SolidBrush redBush = new SolidBrush(Colors.Red); 
    RadialGradientBrush redSegmentBrush = new RadialGradientBrush(
      new Point(0.5, 0.5), 
      new Size(.75, .75), 
      Colors.LightGray, 
      Colors.Red); 
    SolidBrush blueBush = new SolidBrush(Colors.Blue); 
    RadialGradientBrush blueSegmentBrush = new RadialGradientBrush(
      new Point(0.5, 0.5), 
      new Size(.75, .75), 
      Colors.LightGray, 
      Colors.Green); 

    Tuple<double, double> _redSegment; 
    public Tuple<double, double> RedSegment { get { return _redSegment; } set { _redSegment = value; Invalidate(); } } 
    Tuple<double, double> _greenSegment; 
    public Tuple<double, double> GreenSegment { get { return _greenSegment; } set { _greenSegment = value; Invalidate(); } } 

    public override void Draw(ICanvas canvas, Rect rect) 
    { 
     canvas.FillEllipse(rect.TopLeft, rect.Size, Colors.Gray); 
     var n = rect; 
     n.X += ringWidth; 
     n.Y = n.X; 
     n.Width -= ringWidth * 2; 
     n.Height = n.Width; 
     var i = n; 
     canvas.FillEllipse(n.TopLeft, n.Size, Colors.LightGray); 
     n.X += ringInnerWidth; 
     n.Y = n.X; 
     n.Width -= ringInnerWidth * 2; 
     n.Height = n.Width; 
     canvas.FillEllipse(n.TopLeft, n.Size, Colors.White); 

     var r = rect.Width/2; 
     DrawSegment(canvas, rect, ringWidth, redBush, r, _redSegment.Item1, _redSegment.Item2); 
     DrawSegment(canvas, i, ringInnerWidth, redSegmentBrush, r - ringWidth, _redSegment.Item1, _redSegment.Item2); 
     DrawSegment(canvas, rect, ringWidth, blueBush, r, _greenSegment.Item1, _greenSegment.Item2); 
     DrawSegment(canvas, i, ringInnerWidth, blueSegmentBrush, r - ringWidth, _greenSegment.Item1, _greenSegment.Item2); 
    } 

    void DrawSegment(ICanvas canvas, Rect rect, double width, Brush brush, double r, double s, double f) 
    { 
     canvas.DrawPath(new PathOp[]{ 
      new MoveTo(SegmentEdgePoint(rect.Center, r, s)), 
      new ArcTo(new Size(rect.Height/2, rect.Width/2), false, true, SegmentEdgePoint(rect.Center, r, f)), 
      new LineTo(SegmentEdgePoint(rect.Center, r - width, f)), 
      new ArcTo(new Size(r, r), false, false, SegmentEdgePoint(rect.Center, r - width, s)), 
      new LineTo(SegmentEdgePoint(rect.Center, r, s)), 
      new ClosePath() 
     }, null, brush); 
    } 

    Point SegmentEdgePoint(Point c, double r, double d) 
    { 
     return new Point(
      c.X + r * Math.Cos(d * Math.PI/180), 
      c.Y + r * Math.Sin(d * Math.PI/180) 
     ); 
    } 
} 

Khi sử dụng NGraphics tôi khuyên bạn nên sử dụng NGraphics.Editor hay Workbook một Xamarin' tương tác thiết kế kiểm soát của bạn:

Answer 2

Nếu bạn không thể tìm thấy giải pháp đã hoàn thành (được khuyến nghị nếu bạn có thể tìm thấy một giải pháp!) Thì việc tạo điều khiển với các cuộc gọi gia tăng đến thư viện đồ họa với các cuộc gọi DrawSegment có thể hoạt động.

1. Vẽ một phân khúc cho mỗi phần của vòng ngoài màu mạnh phần,
2. Vẽ một phân khúc với giảm bán kính bên trong, lờ mờ màu phần,
3. Vẽ một vòng tròn màu trắng cho trung tâm màu trắng tập giấy.

Chúc may mắn!