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

问题描述

我使用了来自这个

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

解决方案

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

UIView ProgressBar 示例:

公共类ProgressView : UIView{CAShapeLayer 进度层；UILabel 标签；公共 ProgressView() { Setup();}public ProgressView(Foundation.NSCoder coder) : base(coder) { Setup();}公共 ProgressView(Foundation.NSObjectFlag t) : base(t) { Setup();}公共 ProgressView(IntPtr handle) : base(handle) { }public ProgressView(CGRect frame) : base(frame) { Setup();}无效设置(){BackgroundColor = UIColor.Clear;层角半径 = 25;层.BorderWidth = 10;Layer.BorderColor = UIColor.Blue.CGColor;Layer.BackgroundColor = UIColor.Cyan.CGColor;进度层 = 新 CAShapeLayer(){FillColor = UIColor.Red.CGColor,框架 = 边界};Layer.AddSublayer(progressLayer);label = new UILabel(Bounds){TextAlignment = UITextAlignment.Center,TextColor = UIColor.White,BackgroundColor = UIColor.Clear,Font = UIFont.FromName("ChalkboardSE-Bold", 20)};插入子视图(标签，100)；}双完成;公共双完成{得到{返回完成；}设置 { 完成 = 值；label.Text = $"{value * 100} %";SetNeedsDisplay();}}公共覆盖无效绘制(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));添加(进度视图)；DispatchQueue.MainQueue.DispatchAsync(async () =>{while (progressView.Complete  progressView.Complete += 0.05);等待 Task.Delay(1000);}});

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.

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

解决方案

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:

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

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