Xamarin.iOS-如何实现步进进度条

Posted 2023-03-29

【中文标题】Xamarin.iOS-如何实现步进进度条

【英文标题】：Xamarin.iOS- How to implement Stepped Progress bar

【发布时间】：2021-11-19 08:09:33

【问题描述】：

我已附加屏幕简短我想在 Xamarin.ios 中实现这个阶梯式进度条。 请帮助 Xamarin.iOS 中有关此过程的任何源代码。谢谢

【参考方案1】：

您可以创建自定义步骤进度条。

    public class StepProgressBarControl : StackLayout

    Button _lastStepSelected;
    public static readonly BindableProperty StepsProperty =BindableProperty.Create(nameof(Steps), typeof(int), typeof(StepProgressBarControl), 0);
    public static readonly BindableProperty StepSelectedProperty =BindableProperty.Create(nameof(StepSelected), typeof(int), typeof(StepProgressBarControl), 0, defaultBindingMode: BindingMode.TwoWay);
    public static readonly BindableProperty StepColorProperty = BindableProperty.Create(nameof(StepColor), typeof(Xamarin.Forms.Color), typeof(StepProgressBarControl), Color.Black, defaultBindingMode: BindingMode.TwoWay);

    public Color StepColor
    
        get  return (Color)GetValue(StepColorProperty); 
        set  SetValue(StepColorProperty, value); 
    

    public int Steps
    
        get  return (int)GetValue(StepsProperty); 
        set  SetValue(StepsProperty, value); 
    

    public int StepSelected
    
        get  return (int)GetValue(StepSelectedProperty); 
        set  SetValue(StepSelectedProperty, value); 
    


    public StepProgressBarControl()
    
        Orientation = StackOrientation.Horizontal;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        Padding = new Thickness(10, 0);
        Spacing = 0;
        AddStyles();

    

    protected override void OnPropertyChanged(string propertyName = null)
    
        base.OnPropertyChanged(propertyName);

        if (propertyName == StepsProperty.PropertyName)
        
            for (int i = 0; i < Steps; i++)
            
                var button = new Button()
                
                    Text = $"i + 1", ClassId= $"i + 1",
                    Style = Resources["unSelectedStyle"] as Style
                ;

                button.Clicked += Handle_Clicked;

                this.Children.Add(button);

                if (i < Steps - 1)
                
                    var separatorLine = new BoxView()
                    
                        BackgroundColor = Color.Silver,
                        HeightRequest = 1,
                        WidthRequest=5,
                        VerticalOptions = LayoutOptions.Center,
                        HorizontalOptions = LayoutOptions.FillAndExpand
                    ;
                    this.Children.Add(separatorLine);
                
            
        else if(propertyName == StepSelectedProperty.PropertyName)
            var children= this.Children.First(p => (!string.IsNullOrEmpty(p.ClassId) && Convert.ToInt32(p.ClassId) == StepSelected));
            if(children != null) SelectElement(children as Button);
           
        else if(propertyName == StepColorProperty.PropertyName)
            AddStyles();
        
    
    void Handle_Clicked(object sender, System.EventArgs e)
    
        SelectElement(sender as Button);
    

    void SelectElement(Button elementSelected)

        if (_lastStepSelected != null) _lastStepSelected.Style = Resources["unSelectedStyle"] as Style;

        elementSelected.Style = Resources["selectedStyle"] as Style;

        StepSelected = Convert.ToInt32(elementSelected.Text);
        _lastStepSelected = elementSelected;

    

    void AddStyles()
        var unselectedStyle = new Style(typeof(Button))
        
            Setters = 
                new Setter  Property = BackgroundColorProperty,   Value = Color.Transparent ,
                new Setter  Property = Button.BorderColorProperty,   Value = StepColor ,
                new Setter  Property = Button.TextColorProperty,   Value = StepColor ,
                new Setter  Property = Button.BorderWidthProperty,   Value = 0.5 ,
                new Setter  Property = Button.BorderRadiusProperty,   Value = 20 ,
                new Setter  Property = HeightRequestProperty,   Value = 40 ,
                new Setter  Property = WidthRequestProperty,   Value = 40 
        
        ;

        var selectedStyle = new Style(typeof(Button))
        
            Setters = 
                new Setter  Property = BackgroundColorProperty, Value = StepColor ,
                new Setter  Property = Button.TextColorProperty, Value = Color.White ,
                new Setter  Property = Button.BorderColorProperty, Value = StepColor ,
                new Setter  Property = Button.BorderWidthProperty,   Value = 0.5 ,
                new Setter  Property = Button.BorderRadiusProperty,   Value = 20 ,
                new Setter  Property = HeightRequestProperty,   Value = 40 ,
                new Setter  Property = WidthRequestProperty,   Value = 40 ,
                new Setter  Property = Button.FontAttributesProperty,   Value = FontAttributes.Bold 
        
        ;

        Resources = new ResourceDictionary();
        Resources.Add("unSelectedStyle", unselectedStyle);
        Resources.Add("selectedStyle", selectedStyle);
    

或者你可以使用Xamarin.Forms.StepProgressBar。从 NuGet 安装它。

【讨论】：

我正在使用 Xamarin.iOS ...您共享代码 Xamarin.form。我可以在 xamarin.iOS 中使用 xamarin.forms 代码吗

Xamarin.forms 上的代码适用于 ios 平台。

好的，我将如何使用此代码？

您可以创建一个 Xamarin.forms 项目并选择 ios 平台。它支持 iOS 9 或更高版本。 docs.microsoft.com/en-us/xamarin/get-started/…