Xamarin Forms和Material Design，如何更改提示颜色

Question

我尝试为Xamarin Forms创建一个Material Design输入框，但是在提示颜色和底部线方面遇到了问题。

使用York Shen的答案进行编辑：

Xaml页面

<customControls:CustomEntry
    Keyboard="Email"
    Placeholder="EMAIL"
    Style="{StaticResource EntryAccount}"
    Text="{Binding Email}" />

登录账户风格

<Style x:Key="EntryAccount" TargetType="customControls:CustomEntry">
    <Setter Property="PlaceholderColor" Value="{StaticResource BackgroundColor}" />
    <Setter Property="BottomLineColor" Value="{StaticResource BackgroundColor}" />
    <Setter Property="TextColor" Value="{StaticResource BackgroundColor}" />
    <Setter Property="FontSize" Value="{StaticResource Subtitle1}" />
    <Setter Property="FontFamily" Value="{StaticResource Subtitle1Font}" />
</Style>

自定义输入框

public class CustomEntry : Entry
{
    public static readonly BindableProperty BottomLineColorProperty =
        BindableProperty.Create(nameof(BottomLineColor), typeof(Color), typeof(CustomEntry), Color.Blue);

    public Color BottomLineColor
    {
        get => (Color) GetValue(BottomLineColorProperty);
        set => SetValue(BottomLineColorProperty, value);
    }
}

CustomEntryRenderer

public class CustomEntryRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<CustomEntry, TextInputLayout>
{
    public CustomEntryRenderer(Context context) : base(context)
    {
    }

    protected EditText EditText => Control.EditText;

    protected override TextInputLayout CreateNativeControl()
    {
        var textInputLayout = new TextInputLayout(Context);
        var editText = new AppCompatEditText(Context);
        editText.SetTextSize(ComplexUnitType.Sp, (float) Element.FontSize);
        textInputLayout.AddView(editText);
        return textInputLayout;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<CustomEntry> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var ctrl = CreateNativeControl();
            SetNativeControl(ctrl);

            var activeColor = Element.BottomLineColor.ToAndroid(global::Android.Resource.Attribute.ColorAccent, Context);

            var hintText = Control.Class.GetDeclaredField("mFocusedTextColor");
            hintText.Accessible = true;
            hintText.Set(Control, new ColorStateList(new int[][] {new[] {0}}, new int[] {activeColor}));

            EditText.Enabled = Element.IsEnabled;
            Control.Hint = Element.Placeholder;
            EditText.SetTextColor(Element.TextColor.ToAndroid());
        }
    }
}

Element.TextColor和activeColor正确获取我在参数中传递的颜色。但这是我的结果：

- Naografix

Answer 1

您可以将 AppCompatEditText 添加到 TextInputLayout 中:

protected EditText EditText => Control.EditText;

protected override TextInputLayout CreateNativeControl()
{
    var textInputLayout = new TextInputLayout(Context);
    var editText = new AppCompatEditText(Context);
    editText.SetTextSize(ComplexUnitType.Sp, (float)Element.FontSize);
    textInputLayout.AddView(editText);
    return textInputLayout;
}

然后像这样设置提示文本的颜色：

var activeColor = Element.ActiveHintTextColor.ToAndroid(global::Android.Resource.Attribute.ColorAccent, Context);
var hintText = Control.Class.GetDeclaredField("mFocusedTextColor");
hintText.Accessible = true;
hintText.Set(Control, new ColorStateList(new int[][] { new[] { 0 } }, new int[] { activeColor }));

源代码

CustomEntry:

（自定义输入框）

public class CustomEntry : Entry
{
    public static readonly BindableProperty ActiveHintTextColorProperty = BindableProperty.Create(nameof(ActiveHintTextColor),
       typeof(Color),
       typeof(CustomEntry),
       Color.Accent);

    /// <summary>
    /// ActiveHintTextColor summary. This is a bindable property.
    /// </summary>
    public Color ActiveHintTextColor
    {
        get { return (Color)GetValue(ActiveHintTextColorProperty); }
        set { SetValue(ActiveHintTextColorProperty, value); }
    }
}

渲染器：

public class CustomEntryRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<CustomEntry, TextInputLayout>
{
    public CustomEntryRenderer (Context context) : base(context)
    {
    }

    protected EditText EditText => Control.EditText;

    protected override TextInputLayout CreateNativeControl()
    {
        var textInputLayout = new TextInputLayout(Context);
        var editText = new AppCompatEditText(Context);
        editText.SetTextSize(ComplexUnitType.Sp, (float)Element.FontSize);
        textInputLayout.AddView(editText);
        return textInputLayout;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<XfxEntry> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var ctrl = CreateNativeControl();
            SetNativeControl(ctrl);

            var activeColor = Element.ActiveHintTextColor.ToAndroid(global::Android.Resource.Attribute.ColorAccent, Context);

            var hintText = Control.Class.GetDeclaredField("mFocusedTextColor");
            hintText.Accessible = true;
            hintText.Set(Control, new ColorStateList(new int[][] { new[] { 0 } }, new int[] { activeColor }));

            EditText.Enabled = Element.IsEnabled;
            Control.Hint = Element.Placeholder;
            EditText.SetTextColor(Element.TextColor.ToAndroid());
        }
    }
}

使用方法：

<local:CustomEntry
    Placeholder="Enter your name:"
    Text="Name"
    ActiveHintTextColor="Blue"
    PlaceholderColor="Black"
        />

效果

更新：

设置底线颜色：

var element = (ITintableBackgroundView)EditText;
//using AColor = Android.Graphics.Color;
element.SupportBackgroundTintList = ColorStateList.ValueOf(AColor.White);

- York Shen

---

你好@YorkShen，谢谢你的回答，但是这并没有解决我的问题。底部线条颜色没有改变。 我已经在帖子中编辑了我的代码。 - Naografix

@Naografix，您需要什么底色？ - York Shen

我的页面中有白色。PlaceHolderColor、TextColor和BottomLine都是白色。 - Naografix

@Naografix，愉快编程。 :) - York Shen

Answer 2

我知道这不是最好的解决方案，但有时候它还是很有用的：

• 打开：Android/Resources/values/colors.xml
• 将colorAccent更改为所需的颜色

- Ângelo Polotto