Comment faire une barre de progression avec des coins arrondis dans les formes Xamarin

Question

Je veux afficher une barre de progression avec des coins arrondis dans les formes Xamarin. J'ai été capable de le faire dans iOS en utilisant un moteur de rendu personnalisé:

class CustomProgressBarRenderer: ProgressBarRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e) 
    { 
     base.OnElementChanged(e); 
     Control.ProgressTintColor = Color.FromRgb(255, 201, 74).ToUIColor(); 
    } 

    public override void LayoutSubviews() 
    { 
     base.LayoutSubviews(); 
     var X = 1.0f; 
     var Y = 7.0f; 
     CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y); 
     this.Transform = transform; 
     this.ClipsToBounds = true; 
     this.Layer.MasksToBounds = true; 
     this.Layer.CornerRadius = 5; // This is for rounded corners. 
    } 
} 

Comment puis-je obtenir la même chose sur Android? Voici à quoi doit ressembler la barre de progression (coins arrondis).

Answer 1

Comment faire une barre de progression avec des coins arrondis en forme Xamarin

Vous pouvez ajouter un Drawable sur votre Android ProgressBar pour implémenter cette fonctionnalité.

Définissez le style de votre ProgressBar, Drawable \ bar_color.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!--set progressbar backgound style--> 
    <item 
     android:id="@android:id/background" 
     android:drawable="@drawable/progress_bar_background" /> 

    <!--set progressbar schedule style--> 
    <item android:id="@android:id/progress"> 
     <scale 
      android:drawable="@drawable/shape_progressbar_progress" 
      android:scaleWidth="100%" /> 
    </item> 

</layer-list> 

Drawable \ progress_bar_background.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <corners android:radius="20dp" /> 
    <solid android:color="#FFCBC2C2" /> 
</shape> 

Drawable \ shape_progressbar_progress.xml:

<corners android:radius="20dp" /> 
    <solid android:color="#3F8CC4" /> 
    <stroke 
     android:width="0dp" 
     android:color="#FFFFFF"></stroke> 
</shape> 

l'utiliser dans votre CustomProgressBarRenderer:

public class CustomProgressBarRenderer : ProgressBarRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e) 
    { 
     base.OnElementChanged(e); 

     if(Control != null) 
     { 
      var progressBar = Control as Android.Widget.ProgressBar; 
      var draw = Resources.GetDrawable(Resource.Drawable.bar_color); 
      progressBar.ProgressDrawable = draw; 
     } 
    } 
} 

Effet: