2017-11-15 119 views
10

'daki Tamlık ölçer (Durum göstergesi) oluşturma İşlemin şu andaki durumu gibi bir işlemin geçerli durumunu görüntüleyen bir kontrol tasarlamaya çalışıyorum.Xamarin

Status Control

Yani, biz kilometre taşları veya kontrol noktaları için renkli bölümleri ile statü dairesel ekran var. Görüntüde, zaten ilk iki aşamadan geçiyoruz ve üçüncü aşamada% 70 tamamlandı.

Jquery'de oldukça benzer bir kontrolün olduğunu biliyorum. Ama Xamarin Formlarında kullanabileceğim bir üçüncü taraf kontrolü varsa emin değilim. Üçüncü taraf denetimi yoksa, tasarıma nasıl devam etmeliyim.

Farklı aşamalar için görüntü oluşturmalı ve görüntüyü görüntülemeli miyim? Ya da iki değer, "kilometre taşı" ve "yüzdelik_ tamamlama" alabilen özel bir denetim oluşturmalı ve sonra belki de bir pasta grafiği tasarlamalı mıyım?

+0

ben kesinlikle o Farklı görüntüler için gidin, uygulanması ve güzel olması kolay ve bakım açısından temiz. Dezavantaj ise, yeni bir sürece ihtiyaç duyarsanız, görüntüleri (çoğu olmasa bile) yeniden oluşturmanız gerekecektir. Fakat imo, bu, özel oluşturucularla böyle karmaşık bir kontrol inşa etmek için pek çok işten daha iyidir. –

+0

En kolay yol, farklı görüntüler ve kolay bakım oluşturmaktır ... Bunu daha zor bir şekilde isterseniz, 2d çizim için SkiaSharp'i deneyebilirsiniz https://developer.xamarin.com/guides/cross-platform/drawing/ –

+0

@ DennisSchröer İlk düşüncem buydu. Ama sonra Jquery'de buna benzeyen bir kontrol olduğunu hatırladım. Yani, bunu deneyebilirim diye düşündüm. Artı görüntü, farklı mobil cihazların çözünürlük değişiklikleriyle zor olabilir. Sadece olası bir çözüm arıyorum. Aksi takdirde, en basit şekilde, sadece en iyi çıkış yolu gibi görünen resimler yapacağım. – jitendragarg

cevap

4

.

Not: SkiaSharp ve diğer yerel 2d/3d kütüphaneleri harikadır, ancak bir uygulamaya çok fazla yük ekler ve eğer tüm özelliklerine ihtiyacınız yoksa bloat (uygulama boyutu, bellek kullanımı, başlatma süresi vb.) ..) buna değmez (IMHO).

re: Sana çizim yayın temellerini göstermek için yaptım MultiSegmentProgressControl soyunmuş https://github.com/praeclarum/NGraphics

. Yaptığım tam sürüm, birden fazla parça eklemenize ve bunlara animasyon uygulamanıza olanak tanıyor, yüzdeler, dokunma parçalarını gösterme, vb. ...

NControl kullanarak, dokunmatik elemanlarla kompozit kontroller oluşturabilirsiniz, bu size kalmış Onu ne kadar almanız gerektiği üzerine.

re: https://github.com/chrfalch/NControl

enter image description here

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

Çok etkileşimli tasarım kontrol NGraphics.Editor veya Xamarin' çalışma kitabı kullanmanızı tavsiye NGraphics kullanarak:

enter image description here

+0

Harika. Bu mükemmel çalışıyor. Üzgünüm, şehir dışındaydım, bu yüzden asla kontrol etmem. Ama sonunda kontrol ettim. Mükemmel çözüm. – jitendragarg

+0

Sorun değil, yardımcı olmasına sevindim. – SushiHangover

2

Zaten tamamlanmış bir çözüm bulamıyorsanız (bulabilirseniz önemle tavsiye edilir!) Daha sonra DrawSegment çağrıları ile grafik kitaplığına artan aramalar içeren bir denetim oluşturmak işe yarayabilir.

  • iç, loş renkli bölümler için daha az bir yarıçapı olan bir birim çiz

    1. güçlü renkli dış halkanın bölümleri her bir bölümü için bir birim çiz,
    2. beyaz merkezi için, beyaz bir daire çizin ped.

    İyi şanslar! Eğer platformu oluşturuculara oluşturarak veya projenize Skia gibi kütüphaneleri eklemek gerek kalmadan "tamlık metre" bir "vektör" sürümünü oluşturabilirsiniz NControl w/NGraphics kullanma