Add a “Next Entry” effect in Xamarin.Forms for iOS and Android

Blog-Custom-Xamarin-Forms-EntryCell

Almost every mobile application has a form to present to the user and a developer add such forms to get the users user details and for the other purpose of a business and its application. Without a form, a user will not be able to share their feedback about the app, as a solution to this issue forms are the most important need of a application. In our earlier post we already discussed about how to add a form in xamarin and now, let’s see how can we add a next entry field in the form in both iOS and Android.

For this, apply this code first

xmlns:ctrl=”clr-namespace:samples.core.Controls;assembly=samples.core”>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Name=”MyEntry” TargetType=”Entry”>
<Setter Property=”HeightRequest” Value=”45″ />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding=”15,25″>
<Entry x:Name=”Entry_First” ReturnType=”Next” Placeholder=”First Entry” HeightRequest=”45″/>
<Entry x:Name=”Entry_Second” ReturnType=”Next” Placeholder=”Second Entry” HeightRequest=”45″/>
<Entry x:Name=”Entry_Third” ReturnType=”Done” Placeholder=”Third Entry” HeightRequest=”45″/>
<BoxView/>
<Button Text=”Save” VerticalOptions=”End”/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Use this code behind

using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace samples.core.Views
{
public partial class EntryMoveNextView : ContentPage
{
public EntryMoveNextView()
{
InitializeComponent();
Entry_First.ReturnCommand = new Command(() => Entry_Second.Focus());
Entry_Second.ReturnCommand = new Command(() => Entry_Third.Focus());
}
}
}

Now add Custom controls

By adding a custom control feature in an Xamarin.Form, we can re-use the same form in the entire application and if we need to add some extra netry columns in the form then we can easily do it so by using the below code:

using System;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace samples.core.Controls
{
public class EntryMoveNextControl : Entry
{
public static readonly BindableProperty NextEntryProperty = BindableProperty.Create(nameof(NextEntry), typeof(View), typeof(Entry));
public View NextEntry
{
get => (View)GetValue(NextEntryProperty);
set => SetValue(NextEntryProperty, value);
}

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);

this.Completed += (sender, e) =>
{
this.OnNext();
};
}

public void OnNext()
{
NextEntry?.Focus();
}
}
}

This is the cold to add basic entry controls

<?xml version=”1.0″ encoding=”UTF-8″?>
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”samples.core.Views.EntryMoveNextView”
xmlns:ctrl=”clr-namespace:samples.core.Controls;assembly=samples.core”>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Name=”MyEntry” TargetType=”Entry”>
<Setter Property=”HeightRequest” Value=”45″ />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding=”15,25″>
<ctrl:EntryMoveNextControl x:Name=”Entry_First” Placeholder=”First Entry” HeightRequest=”45″/>
<ctrl:EntryMoveNextControl x:Name=”Entry_Second” Placeholder=”Second Entry” HeightRequest=”45″ Keyboard=”Numeric”/>
<ctrl:EntryMoveNextControl x:Name=”Entry_Third” Placeholder=”Third Entry” HeightRequest=”45″ Keyboard=”Numeric”/>
<BoxView/>
<Button Text=”Save” VerticalOptions=”End”/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Here is how your xaml file code will be look:

namespace samples.core.Views
{
public partial class EntryMoveNextView : ContentPage
{
public EntryMoveNextView()
{
InitializeComponent();

Entry_First.NextEntry = Entry_Second;
Entry_Second.NextEntry = Entry_Third;
}
}
}

Now, finally it’s time to learn to add the next entry effect in Android. Use the followinf code.

using System;
using samples.core.Controls;
using samples.Droid.Effects;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportEffect(typeof(EntryMoveNextEffect), nameof(EntryMoveNextEffect))]
namespace samples.Droid.Effects
{
public class EntryMoveNextEffect : PlatformEffect
{
protected override void OnAttached()
{
// Check if the attached element is of the expected type and has the NextEntry
// property set. if so, configure the keyboard to indicate there is another entry
// in the form and the dismiss action to focus on the next entry
if (base.Element is EntryMoveNextControl xfControl && xfControl.NextEntry != null)
{
var entry = (Android.Widget.EditText)Control;

entry.ImeOptions = Android.Views.InputMethods.ImeAction.Next;
entry.EditorAction += (sender, args) =>
{
xfControl.OnNext();
};
}
}

protected override void OnDetached()
{
// Intentionally empty
}
}
}

If you need create the same effect for iOS then here is the code:

using System;
using CoreGraphics;
using samples.core.Controls;
using samples.iOS.Effects;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportEffect(typeof(EntryMoveNextEffect), nameof(EntryMoveNextEffect))]
namespace samples.iOS.Effects
{
public class EntryMoveNextEffect : PlatformEffect
{
protected override void OnAttached()
{
var entry = (UITextField)Control;

// Change return key to Don key
entry.ReturnKeyType = UIReturnKeyType.Done;

// Add the “done” button to the toolbar easily dismiss the keyboard
// when it may not have a return key
if (entry.KeyboardType == UIKeyboardType.DecimalPad ||
entry.KeyboardType == UIKeyboardType.NumberPad)
{
entry.InputAccessoryView = BuildDismiss();
}

// Check if the attached element is of the expected type and has the NextEntry
// property set. if so, configure the keyboard to indicate there is another entry
// in the form and the dismiss action to focus on the next entry
if (base.Element is EntryMoveNextControl xfControl && xfControl.NextEntry != null)
{
entry.ReturnKeyType = UIReturnKeyType.Next;
}
}

protected override void OnDetached()
{
// Intentionally empty
}

private UIToolbar BuildDismiss()
{
var toolbar = new UIToolbar(new CGRect(0.0f, 0.0f, Control.Frame.Size.Width, 44.0f));

// Set default state of buttonAction/appearance
UIBarButtonItem buttonAction = new UIBarButtonItem(UIBarButtonSystemItem.Done, delegate { Control.ResignFirstResponder(); });

// If we have a next element, swap out the default state for “Next”
if (base.Element is EntryMoveNextControl xfControl && xfControl.NextEntry != null)
{
buttonAction = new UIBarButtonItem(“Next”, UIBarButtonItemStyle.Plain, delegate
{
xfControl.OnNext();
});
}

toolbar.Items = new[]
{
new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
buttonAction,
};

return toolbar;
}
}
}

Apply and execute the code.

For development details and further discussions, please contact us on the below mentioned details:

Website Address: http://hire-xamarin-developer.com/
Email: info@hire-xamarin-developer.com
Call: +1-9796334727 , +91-9229225552

 

by admin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>