Arab Girl Lifestyle
Arab Girl Lifestyle

Reputation: 1

entry is hidden by keyboard on iOS

I'm facing the problem that I have entries at the bottom of the screen, which when the keyboard pops ups it completely hides the entry while the user is typing the values, and that only happens on iOS. I tried to use scrollview, but still didn't work.

<ContentView.Content>
        <AbsoluteLayout Margin="0,0,30,0">
            <Entry
                x:Name="searchBar"
                AbsoluteLayout.LayoutBounds="0,0,1,AutoSize"
                AbsoluteLayout.LayoutFlags="WidthProportional"
                BackgroundColor="White"
                HeightRequest="40"
                Placeholder="Enter sensor"
                TextChanged="SearchBar_OnTextChanged"
                TextColor="{DynamicResource RelogixDarkGray}"
                VerticalOptions="Center" />
            <ListView
                x:Name="dataListView"
                AbsoluteLayout.LayoutBounds="5,40,.98,.4"
                AbsoluteLayout.LayoutFlags="SizeProportional"
                BackgroundColor="White"
                CachingStrategy="RecycleElement"
                HasUnevenRows="True"
                IsVisible="False"
                ItemTapped="ListView_OnItemTapped">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <StackLayout Margin="5" Padding="0">
                                <Label
                                    BackgroundColor="White"
                                    FontFamily="{StaticResource NormalFont}"
                                    FontSize="16"
                                    Text="{Binding .}"
                                    TextColor="#FF464859"
                                    VerticalOptions="Center"
                                    VerticalTextAlignment="Center" />
                            </StackLayout>

                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </AbsoluteLayout>

this is the entry before the keyboard pops up

This is when the keyboard pops up

Upvotes: 0

Views: 369

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

I have a solution used in my project , you can have a check this whether be helpful for you .

Using Focused/UnFocused method of Entry in Xamarin Forms , to know whether the keyboard shows. Then you can detail with the view of Entry to move to the above of Keyboard by using TranslateTo animation to implement it .

Here is the Xaml code :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppkeyboardHideEntryInIOS.MainPage">

    <StackLayout x:Name="MainLayout" Padding="20">
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
        <Entry x:Name="myEntry" Placeholder="Entry" Focused="myEntry_Focused" Unfocused="myEntry_Unfocused"/>
    </StackLayout>

</ContentPage>

Focused/UnFocused in ContentPage as follow :

private void myEntry_Focused(object sender, FocusEventArgs e)
{
    // Decete whethe in iOS platform
    if(Device.RuntimePlatform == Device.iOS)
    {
        // belong to iPhone X seriors device , the height of keyboard is 333
        if (Height > 800)
        {
            // check whether entry need to tarnslate
            if (Height - myEntry.Y - myEntry.Height < 333)
            {
                myEntry.TranslateTo(0, -333, 50);
            }
        }
        else
        {
            // belong to iPhone 6,7,8 seriors device, the height of keyboard is 258
            // check whether entry need to tarnslate
            if (Height - myEntry.Y - myEntry.Height < 258)
            {
                myEntry.TranslateTo(0, -258, 50);
            }
        }
    }

}

private void myEntry_Unfocused(object sender, FocusEventArgs e)
{
    // Decete whethe in iOS platform
    if (Device.RuntimePlatform == Device.iOS)
    {
        Console.WriteLine("unFocused");
        myEntry.TranslateTo(0, 0, 50);
    }
}

Then you will see the effect as follow :

enter image description here

Upvotes: 0

Related Questions