Issue
Scenario 1: I'm trying to create a mobile application using Xamarin. I want the position of my buttons and design to be in its place. I tried to run it on my smartphone, and the buttons and designs' position looks good, but when I tried to run it on another smartphone, they all got messed up. It changes its position. I used stacklayout here.
Scenario 2: Then some people say they used grid. So, I tried using a grid in creating my login page. The problem is when I click on the entry box to type a username/password, of course the keyboard will pop up, but the whole UI will go higher/above its original position. When I tried to not type username/password or click the back button from the keyboard, the UI will go back to its original position.
How to fix any of these?
Solution
I tried to run it on my smartphone, and the buttons and designs' position looks good, but when I tried to run it on another smartphone, they all got messed up. It changes its position.
Xamarin.Forms XAML Support :
Xamarin.Forms
use the platform-specific mechanisms to calculate the absolute pixel dimensions. Xamarin.Forms
uses xaml
as it's base markup language for renderng displays, and converts this into the native counterparts at runtime. Usually, you don't have to care about the resolution
, it will adjust the views based on your layout and constraints.
Some useful link about Xamarin.Forms multi-device support :
Provides a few nice helper methods to extend the app for a better tablet experience
The Device class contains a number of properties and methods to help developers customize layout and functionality on a per-platform basis.
Discuss about the supported device types, and how to optimize layouts for tablets versus phones.
For Scenario 2
The problem is when I click on the entry box to type a username/password, of course the keyboard will pop up, but the whole UI will go higher/above its original position. When I tried to not type username/password or click the back button from the keyboard, the UI will go back to its original position.
I don't know what's the detail of your app, but you can refer to the following code,which does not present the problem you mentioned.
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="0" Grid.ColumnSpan="2" />
<Entry Grid.Row="0" Grid.Column="0" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing" />
<Image Source="head.png" Scale="0.6" Grid.Row="0" Grid.Column="1"/>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="1" Grid.ColumnSpan="2"/>
<Entry Grid.Row="1" Grid.Column="0" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="Lock.png" Scale="0.6" Grid.Row="1" Grid.Column="1"/>
</Grid>
<Button Text="Login"/>
Update
Since your controls(e.g. the two Entry
) are at the bottom of the page,when you want to enter something, the keyboard will pop up. The keyboard will surely take up some space on the screen. The system makes a decision as to how it should adjust the visible portion of your UI, but it might not get it right. To ensure the best behavior for your app, you should specify how you'd like the system to display your UI in the remaining space.
From the Android Developer Site link, we know
"adjustResize"
The activity's main window is always resized to make room for the soft keyboard on screen.
"adjustPan"
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
In xamarin, you can change the value of WindowSoftInputModeAdjust
in class Application
<Application ...
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:Application.WindowSoftInputModeAdjust="Resize">
...
</Application>
For more details, you can check:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/soft-keyboard-input-mode .
https://developer.android.com/training/keyboard-input/visibility
Answered By - Jessie Zhang -MSFT
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.