如何使用自定义渲染器在 Xamarin Forms 中制作带圆角的进度条答案

【问题标题】：How to make a progress bar with rounded corners in Xamarin Forms using Custom Renderer如何使用自定义渲染器在 Xamarin Forms 中制作带圆角的进度条
【发布时间】：2018-03-07 08:09:37
【问题描述】：

我想在 Xamarin 表单中显示带有圆角的进度条。我可以在 iOS 中使用自定义渲染器做到这一点：

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

如何使用自定义渲染器在 Android 中实现相同的效果。这就是我希望进度条（圆角）的外观。

【问题讨论】：

你在iOS中使用这个progress bar时能不能把图片贴出来？只有我知道效果我才能理解你想要什么。
我在我的原始帖子@YorkShen-MSFT 中添加了一张图片

标签： xamarin xamarin.forms xamarin.android progress-bar custom-renderer

【解决方案1】：

如何在 Xamarin 表单中制作带圆角的进度条

您可以在您的 android ProgressBar 上添加一个 Drawable 来实现此功能。

为您的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>

可绘制\progress_bar_background.xml：

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

可绘制\shape_progressbar_progress.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <corners android:radius="20dp" />
   <solid android:color="#3F8CC4" />
   <stroke
       android:width="0dp"
       android:color="#FFFFFF"></stroke>
</shape>

在您的 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;
            //below is now deprecated
            //var draw = Resources.GetDrawable(Resource.Drawable.bar_color);
            var draw = Context.GetDrawable(Resource.Drawable.bar_color);
            progressBar.ProgressDrawable = draw;
        }
    }
}

效果：

【讨论】：

是否可以仅使用自定义渲染器来实现这一点？