Xamarin.Forms 中带轮廓的文本框

Question

我想在 Xamarin.Forms 中实现 material 轮廓文本框。我创建了自定义渲染器但无法对其应用样式。我想要这样的文本框 https://i.stack.imgur.com/7pWPr.png

通过创建自定义渲染器并从 TextInputLayout 继承显示默认 material 文本框。 https://i.stack.imgur.com/Ek9Vb.jpg

Answer 1

您可以像这样使用带有一些 -ve 边距值的网格：

<Grid>
    <Frame Padding="10"
            BorderColor="#570dff"
            HasShadow="False">
        <Entry Placeholder="Enter here"/>
    </Frame>
    <Label Text=" UserName "
            FontSize="15"
            TextColor="#570dff"
            BackgroundColor="white"
            HorizontalOptions="Start"
            VerticalOptions="Start"
            Margin="20,-10,0,0"/>
</Grid>

输出：

Answer 2

您可以使用 Custom Renderer 自定义包含 material 设计 Entry 的视图。

在表单中创建一个 EntryView:

public class EntryView : ContentView
{
    public static readonly BindableProperty TextProperty =
      BindableProperty.Create("Text", typeof(string), typeof(EntryView), null);
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
}

其次，您需要在 Android 中创建 EntryViewRenderer :

public class EntryViewRenderer : ViewRenderer
{
    global::Android.Views.View view;
    global::Android.Widget.EditText editText;
    EntryView entryView;
    Activity activity;

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
    {
        base.OnElementChanged(e);
        if(e.NewElement != null)
        {
            entryView= e.NewElement as EntryView;
        }

        if (e.OldElement != null || Element == null)
        {
            return;
        }

        try
        {
            SetupUserInterface();
            SetupEventHandlers();
            AddView(view);
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(@"           ERROR: ", ex.Message);
        }
    }

    private void SetupEventHandlers()
    {
        editText.TextChanged += EditText_TextChanged;
    }

    private void EditText_TextChanged(object sender, Android.Text.TextChangedEventArgs e)
    {
        entryView.Text = editText.Text; 
        Console.WriteLine("chanegd +" + entryView.Text);
    }

    void SetupUserInterface()
    {
        activity = this.Context as Activity;
        view = activity.LayoutInflater.Inflate(Resource.Layout.EntryLayout, this, false);

        editText = view.FindViewById<EditText>(Resource.Id.editText1);
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);

        var msw = MeasureSpec.MakeMeasureSpec(r - l, MeasureSpecMode.Exactly);
        var msh = MeasureSpec.MakeMeasureSpec(b - t, MeasureSpecMode.Exactly);

        view.Measure(msw, msh);
        view.Layout(0, 0, r - l, b - t);
    }
}

此外，您需要为此视图添加 EntryLayout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Label"
            android:outlineSpotShadowColor="@color/cardview_shadow_start_color"/>
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

现在，您可以在 Xamarin Forms 的 Xaml 中使用它了：

xmlns:app18="clr-namespace:App18"

<app18:EntryView Text="abc"/>

效果：

如果需要修改轮廓颜色，只需在Resources/values/styles中添加style即可。xml.

  <style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">#570dff</item>
    <item name="boxStrokeWidth">2dp</item>
    <item name="android:textColorHint">#570dff</item>
  </style>

在Resources/values/colors.xml中添加以下代码：

<color name="mtrl_textinput_default_box_stroke_color">#570dff</color>

终于在EntryLayout.xml中使用了：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/LoginTextInputLayoutStyle">
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label"/>
</android.support.design.widget.TextInputLayout>

效果：

Answer 3

<Grid Margin="20">
    <Frame  Padding="10"
            BorderColor="#570dff"
            HasShadow="False">
        <Entry Placeholder="Enter here"/>
    </Frame>
    <Label  Text=" UserName "
            FontSize="15"
            TextColor="#570dff"
            BackgroundColor="white"
            HorizontalOptions="Start"
            VerticalOptions="Start"
            Margin="20,-10,0,0"/>
</Grid>

太好了，对我也有帮助。我在网格中添加了 20 的边距以使其看起来更好。

Xamarin.Forms 中带轮廓的文本框

Outlined Textbox in Xamarin.Forms

xamarin

xamarin.forms

material-design

custom-renderer