如何使用自定义渲染器在Xamarin Forms中制作带有圆角的进度条 [英] How to make a progress bar with rounded corners in Xamarin Forms using Custom Renderer
问题描述
我想以Xamarin形式显示带有圆角的进度条。我能够使用自定义渲染器在iOS中完成此操作:
I want to display progress bar with rounded corners in Xamarin forms. I was able to do it in iOS using a custom renderer:
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中使用自定义渲染器实现相同的功能。
这就是我希望进度条(圆角)显示的方式。
How can I achieve the same in Android using Custom Renderer. This is how I want the progress bar(rounded corners) to look.
推荐答案
如何在Xamarin表单中制作带有圆角的进度条
How to make a progress bar with rounded corners in Xamarin forms
您可以在Android ProgressBar
上添加 Drawable
来实现
You could add a Drawable
on your android ProgressBar
to implement this feature.
设置 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>
在您的 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;
}
}
}
效果:
这篇关于如何使用自定义渲染器在Xamarin Forms中制作带有圆角的进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!