Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
624 views
in Technique[技术] by (71.8m points)

c# - How to create a progress bar with rounded corners in iOS using Xamarin.Forms

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.

Given below is how it looks on Android. Android Sample

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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".

UIView ProgressBar Example:

enter image description here

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

Usage Example:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...