Xamarin：如何将 Android 中的 Stepper 颜色更改为 iOS 中的样子？

Question

我有使用 Stepper 的 Xamarin PCL 应用程序。我想改变我的Stepper 按钮的颜色，现在使用下面的渲染器。

在 PCL 中：

public class MyStepper : Stepper
{
   public static readonly BindableProperty ColorProperty = 
            BindableProperty.Create(nameof(Color), typeof(Color), typeof(MyStepper), Color.Default);

   public Color MyColor
   {
      get { return (Color)GetValue(ColorProperty); }
      set { SetValue(ColorProperty, value); }
   }
}

在 iOS 中：

public class MyStepperRenderer : StepperRenderer
{
   protected override void OnElementChanged(ElementChangedEventArgs<Stepper> e)
   {
      base.OnElementChanged(e);
      MyStepper s = Element as MyStepper;

      if (Control != null)
         Control.TintColor = s.MyColor.ToUIColor();
   }
}

在安卓中：

protected override void OnElementChanged(ElementChangedEventArgs<Stepper> e)
{
   base.OnElementChanged(e);
   MyStepper s = Element as MyStepper;

   if (Control != null)
   {
      Control.GetChildAt(0).Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
      Control.GetChildAt(1).Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
    }
}

在 XAML 中：

<local:MyStepper MyColor="Red" Maximum="10" Minimum="0" ....... />

正如预期的那样，它会像附加的图像一样工作。但是有没有可能让 Android 颜色只改变按钮的“轮廓”，就像它在 iOS 中的样子？

Answer 1

如何将 - 和 + 的颜色也更改为红色。有没有办法做到这一点？

根据@Sven-Michael Stübe 的回答，我添加了一些代码来更改“-”和“+”颜色：

protected override void OnElementChanged(ElementChangedEventArgs<Stepper> e)
{
    base.OnElementChanged(e);
    MyStepper s = Element as MyStepper;

    if (Control != null)
    {
        var button = Control.GetChildAt(0) as Android.Widget.Button;
        button.SetTextColor(s.MyColor.ToAndroid());
        button.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.button_selector, null));
        button.Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);

        var button2 = Control.GetChildAt(1) as Android.Widget.Button;
        button2.SetTextColor(s.MyColor.ToAndroid());
        button2.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.button_selector, null));
        button2.Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
    }
}

Effectt.

去创建一个带有状态的可绘制对象并将它们设置在您的渲染器中，而不是设置单一颜色。

Sven-Michael Stübe 想说，如果您将单一颜色设置为背景，那么您的Button 将没有点击效果。您可以参考：Material effect on button with background color 了解更多详细信息。

例如：

button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/colorAccent" android:state_pressed="true"/>
  <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
  <item android:drawable="@drawable/button_border"/>
</selector>

button_border.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >

  <solid android:color="#00FFFFFF" />
  <corners android:radius="5dp" />
  <stroke
    android:width="2dp"
    android:color="#FFFFFF" />

</shape>

Answer 2

如果您创建自定义矢量可绘制对象，您可以做到这一点

button_border.xml

将此文件放在您的 Android Resources\drawable 文件夹中，并确保将构建操作设置为 AndroidResource

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >

  <solid android:color="#00FFFFFF" />

  <corners android:radius="5dp" />
  <stroke
    android:width="2dp"
    android:color="#FFFFFF" />

</shape>

MyStepperRenderer.cs

然后你只需要将它设置为你的两个按钮的背景。

protected override void OnElementChanged(ElementChangedEventArgs<Stepper> e)
{
    base.OnElementChanged(e);
    var s = Element as MyStepper;

    if (Control != null)
    {
        Control.GetChildAt(0).SetBackground(Resources.GetDrawable(Resource.Drawable.button_border));
        Control.GetChildAt(1).SetBackground(Resources.GetDrawable(Resource.Drawable.button_border));
        Control.GetChildAt(0).Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
        Control.GetChildAt(1).Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
    }
}

这将如下所示：

讨论

• 你松散的状态，如按下，禁用，......（见https://developer.android.com/guide/topics/resources/color-list-resource.html）

如果您没有很多不同的颜色，请使用状态创建可绘制对象并将它们设置在您的渲染器中，而不是设置单一颜色。所以你的用户会得到更好的反馈。