Xamarin.iOS如何实现步进进度条（Stepped Progress bar）

自定义控件核心代码 #

using System;
using CoreGraphics;
using UIKit;

public class SteppedProgressBar : UIView
{
    // 公共可配置属性
    public int StepCount { get; set; } = 4;
    public int CurrentStep { get; set; } = 1;
    public UIColor CompletedColor { get; set; } = UIColor.SystemGreen;
    public UIColor IncompletedColor { get; set; } = UIColor.SystemGray4;
    public nfloat LineThickness { get; set; } = 4f;
    public nfloat NodeRadius { get; set; } = 12f;

    public SteppedProgressBar(CGRect frame) : base(frame)
    {
        BackgroundColor = UIColor.Clear;
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        if (StepCount <= 0) return;

        using (var context = UIGraphics.GetCurrentContext())
        {
            // 计算每个节点的X坐标
            nfloat padding = NodeRadius * 2;
            nfloat totalValidWidth = rect.Width - padding * 2;
            nfloat stepInterval = totalValidWidth / (StepCount - 1);

            // 1. 绘制未完成背景线
            context.SetStrokeColor(IncompletedColor.CGColor);
            context.SetLineWidth(LineThickness);
            context.MoveTo(padding, rect.Height / 2);
            context.AddLineToPoint(rect.Width - padding, rect.Height / 2);
            context.StrokePath();

            // 2. 绘制已完成进度线
            if (CurrentStep > 0)
            {
                nfloat completedLineEndX = padding + stepInterval * (CurrentStep - 1);
                context.SetStrokeColor(CompletedColor.CGColor);
                context.SetLineWidth(LineThickness);
                context.MoveTo(padding, rect.Height / 2);
                context.AddLineToPoint(completedLineEndX, rect.Height / 2);
                context.StrokePath();
            }

            // 3. 绘制所有节点
            for (int i = 0; i < StepCount; i++)
            {
                nfloat nodeX = padding + stepInterval * i;
                CGPoint nodeCenter = new CGPoint(nodeX, rect.Height / 2);
                bool isCompleted = i < CurrentStep;

                // 节点背景圆
                context.SetFillColor(isCompleted ? CompletedColor.CGColor : IncompletedColor.CGColor);
                context.AddArc(nodeCenter.X, nodeCenter.Y, NodeRadius, 0, (nfloat)Math.PI * 2, true);
                context.FillPath();

                // 已完成节点绘制对勾
                if (isCompleted)
                {
                    context.SetStrokeColor(UIColor.White.CGColor);
                    context.SetLineWidth(2f);
                    context.MoveTo(nodeCenter.X - NodeRadius * 0.4f, nodeCenter.Y);
                    context.AddLineToPoint(nodeCenter.X - NodeRadius * 0.1f, nodeCenter.Y + NodeRadius * 0.4f);
                    context.AddLineToPoint(nodeCenter.X + NodeRadius * 0.4f, nodeCenter.Y - NodeRadius * 0.3f);
                    context.StrokePath();
                }
            }
        }
    }

    // 切换进度带动画效果
    public void SetCurrentStep(int step, bool animated = true)
    {
        if (step < 0 || step > StepCount) return;
        CurrentStep = step;
        if (animated)
        {
            UIView.Animate(0.3, () => { SetNeedsDisplay(); });
        }
        else
        {
            SetNeedsDisplay();
        }
    }
}

调用示例 #

在ViewController中使用该控件的示例代码：

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    // 实例化步进进度条
    var progressBar = new SteppedProgressBar(new CGRect(20, 100, View.Bounds.Width - 40, 40));
    // 配置属性
    progressBar.StepCount = 4; // 总步数4
    progressBar.CurrentStep = 2; // 当前完成到第2步
    View.AddSubview(progressBar);

    // 模拟进度更新
    DispatchQueue.MainQueue.DispatchAfter(new DispatchTime(DispatchTime.Now, 2 * 1000000000), () =>
    {
        progressBar.SetCurrentStep(3); // 2秒后更新到第3步，带动画
    });
}

可调整参数说明 #

• 可通过修改StepCount自定义总步长数量
• 可通过CompletedColor、IncompletedColor自定义进度颜色
• 可通过NodeRadius、LineThickness调整节点大小和线条粗细
• 进度切换默认带动画效果，可通过SetCurrentStep方法的animated参数关闭

内容的提问来源于stack exchange，提问作者Zubair Munir