如何使用Xamarin.Forms在iOS中创建带有圆角的进度条

问题描述

我使用了中的输入内容因此，问题使用Drawable为Android平台创建一个带有圆角的自定义进度栏.但是我无法为iOS创建相同的输出.

I used inputs from this SO Question to create a custom progress-bar with rounded corners for the Android platform using the Drawable.But the I'm not able to create the same output for the iOS.

下面是在Android上的外观.

Given below is how it looks on Android.

如何在iOS中也创建相同的效果?

How can I create the same effect in the iOS as well?

推荐答案

有很多方法可以做到这一点，我更喜欢使用UIView的CALayer并添加一个绘制进度"的CAShapeLayer酒吧".

There are a number of ways to do this, I prefer using the CALayer of a UIView and adding a CAShapeLayer that draws the "progress bar".

public class ProgressView : UIView
{
    CAShapeLayer progressLayer;
    UILabel label;

    public ProgressView() { Setup(); }
    public ProgressView(Foundation.NSCoder coder) : base(coder) { Setup(); }
    public ProgressView(Foundation.NSObjectFlag t) : base(t) { Setup(); }
    public ProgressView(IntPtr handle) : base(handle) { }
    public ProgressView(CGRect frame) : base(frame) { Setup(); }

    void Setup()
    {
        BackgroundColor = UIColor.Clear;

        Layer.CornerRadius = 25;
        Layer.BorderWidth = 10;
        Layer.BorderColor = UIColor.Blue.CGColor;
        Layer.BackgroundColor = UIColor.Cyan.CGColor;

        progressLayer = new CAShapeLayer()
        {
            FillColor = UIColor.Red.CGColor,
            Frame = Bounds
        };
        Layer.AddSublayer(progressLayer);

        label = new UILabel(Bounds)
        {
            TextAlignment = UITextAlignment.Center,
            TextColor = UIColor.White,
            BackgroundColor = UIColor.Clear,
            Font = UIFont.FromName("ChalkboardSE-Bold", 20)
        };
        InsertSubview(label, 100);
    }

    double complete;
    public double Complete
    {
        get { return complete; }
        set { complete = value; label.Text = $"{value * 100} %"; SetNeedsDisplay(); }
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        var progressWidth = (rect.Width - (Layer.BorderWidth * 2)) * complete;
        var progressRect = new CGRect(rect.X + Layer.BorderWidth, rect.Y + Layer.BorderWidth, progressWidth, (rect.Height - Layer.BorderWidth * 2));
        progressLayer.Path = UIBezierPath.FromRoundedRect(progressRect, 25).CGPath;
    }
}

用法示例:

var progressView = new ProgressView(new CGRect(50, 50, 300, 50));
Add(progressView);
DispatchQueue.MainQueue.DispatchAsync(async () =>
{
    while (progressView.Complete <= 1)
    {
        InvokeOnMainThread(() => progressView.Complete += 0.05);
        await Task.Delay(1000);
    }
});

这篇关于如何使用Xamarin.Forms在iOS中创建带有圆角的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！