Xamarin 中按钮和设计的位置

Question

场景一：我正在尝试使用 Xamarin 创建移动应用程序。我希望我的按钮和设计的位置就位。我尝试在我的智能手机上运行它，按钮和设计的位置看起来不错，但是当我尝试在另一部智能手机上运行它时，它们都搞砸了。它改变了它的位置。我在这里使用了stacklayout。

场景二：然后有人说他们用grid。因此，我尝试使用网格来创建我的登录页面。问题是当我点击输入框输入username/password时，当然会弹出键盘，但是整个UI会回到higher/above原来的位置。当我尝试不键入 username/password 或单击键盘上的后退按钮时，UI 将返回到其原始位置。

如何解决这些问题？

Answer 1

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 支持:

Xamarin.Forms 使用特定于平台的机制来计算绝对像素尺寸。 Xamarin.Forms 使用 xaml 作为 renderng 显示的基本标记语言，并在运行时将其转换为本机对应语言。通常，您不必关心 resolution，它会根据您的布局和约束调整视图。

一些有用的link关于Xamarin.Forms多设备支持：

Bringing Xamarin.Forms Apps to Tablets

提供一些不错的辅助方法来扩展应用程序以获得更好的平板电脑体验

Xamarin.Forms Device Class

设备 class 包含许多属性和方法，可帮助开发人员在每个平台的基础上自定义布局和功能。

Layout for Tablet and Desktop apps

讨论支持的设备类型，以及如何针对平板电脑和手机优化布局。

对于场景 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.

不知道你的app具体是什么，你可以参考下面的代码，没有出现你说的问题

<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"/>

结果是：

更新

由于您的控件（例如两个 Entry ）位于页面底部，当您要输入内容时，键盘会弹出。键盘肯定会在屏幕上占用一些space。系统会决定如何调整 UI 的可见部分，但它可能无法正确调整。为了确保您的应用的最佳行为，您应该指定您希望系统如何在剩余的 space.

中显示您的 UI

从Android Developer Site link，我们知道

"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.

在xamarin中，可以在classApplication

中更改WindowSoftInputModeAdjust的值

<Application ...
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:Application.WindowSoftInputModeAdjust="Resize">
  ...
</Application>

更多详情，您可以查看：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/soft-keyboard-input-mode.

https://developer.android.com/training/keyboard-input/visibility

Xamarin 中按钮和设计的位置

Position of buttons and designs in Xamarin

xamarin

mobile

mobile-application