Как мы можем создать пользовательскую запись для автоматического заполнения OTP. как это в форме xamarin крест от

Question

поле ввода может принимать только 1 символ. Дизайн должен быть таким:

Answer 1

Я написал простой пример для достижения того, что вы хотите с помощью Xamarin.forms:

В Xaml:

<StackLayout Padding="0,100,0,0">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>


            <StackLayout Grid.Column="0">

                <Label x:Name="label1" Text="" TextColor="Black" HorizontalTextAlignment="Center" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="1">

                <Label x:Name="label2" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="1" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="2">

                <Label x:Name="label3" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="2" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Column="3">

                <Label x:Name="label4" Text="" TextColor="Black" HorizontalTextAlignment="Center" Grid.Column="3" HeightRequest="30"/>
                <BoxView BackgroundColor="Gray" HeightRequest="1" WidthRequest="60" HorizontalOptions="Center"/>
            </StackLayout>

        </Grid>

        <Editor TextChanged="Editor_TextChanged" Keyboard="Numeric" TextColor="Transparent" BackgroundColor="Transparent"  HorizontalOptions="FillAndExpand" Grid.Row="0"/>

    </Grid>

</StackLayout>

И в коде:

public partial class MainPage : ContentPage
{

    List<Label> labels;
    public MainPage()
    {
        InitializeComponent();

        labels = new List<Label>();
        labels.Add(label1);
        labels.Add(label2);
        labels.Add(label3);
        labels.Add(label4);
    }

    private void Editor_TextChanged(object sender, TextChangedEventArgs e)
    {
        var oldText = e.OldTextValue;
        var newText = e.NewTextValue;

        Editor editor = sender as Editor;


        string editorStr = editor.Text;
        //if string.length lager than max length
        if (editorStr.Length > 4)
        {
            editor.Text = editorStr.Substring(0,4);
        }

        //dismiss keyboard
        if (editorStr.Length >= 4)
        {
            editor.Unfocus();
        }

        for (int i = 0; i < labels.Count; i++)
        {
            Label lb = labels[i];

            if (i < editorStr.Length)
            {
                lb.Text = editorStr.Substring(i, 1);
            }
            else {
                lb.Text = "";
            }
        }
    }
}

Кроме того, я создал custom renderer в iOS и Android, чтобы скрыть курсор. Для более подробной информации, вы можете проверить мой пример проекта здесь . Не стесняйтесь задавать мне любые вопросы!

Answer 2

Это решит вашу проблему.

Добавьте следующий пакет NuGet: Просмотр Pin в Xamarin Forms

 // iOS:
 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
 {
     ...
     global::Xamarin.Forms.Forms.Init();
     PinItemViewRenderer.Init();
 }

 // Android:

 protected override void OnCreate(Bundle bundle)
 {
     ...
     global::Xamarin.Forms.Forms.Init(this, bundle);
     PinItemViewRenderer.Init();
 }

Добавьте PinView на свою страницу:

  ...
 xmlns:local="clr-namespace:FormsPinView.Core;assembly=FormsPinView.Core"
 ...
     <local:PinView
         HorizontalOptions="CenterAndExpand"
         VerticalOptions="CenterAndExpand"
         TargetPinLength="4"
         Validator="{Binding ValidatorFunc}"
         Success="Handle_Success" />