Question

在运行我的应用程序的两台设备上，我的UI看起来都不同，这是正常现象，但是我想使其适应于两种操作系统（iOS和Android），

我尝试在Grids中使用StackLayout，但是没有任何变化，我的UI仍然没有响应。

<?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="interface_test.Login" BackgroundColor="#E7695C">
  <ContentPage.Content>
    <Grid BackgroundColor="#E7695C">
      <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
      </Grid.RowDefinitions>
      <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,10,0,0" Grid.Row="0">
      </StackLayout>
      <Grid Grid.Row="1" Margin="20,0,20,0">
        <Grid.RowDefinitions>
          <RowDefinition Height="*"/>
          <RowDefinition Height="50"/>
          <RowDefinition Height="50"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="40"/>
          <RowDefinition Height="40"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Image Source="arrow.png" HeightRequest="70" VerticalOptions="EndAndExpand"/>
        <Entry Grid.Row="1" Placeholder="Email or Phone Number" PlaceholderColor="#bababa" FontSize="16"/>
        <Entry Grid.Row="2" Placeholder="Password" PlaceholderColor="#bababa" FontSize="16" IsPassword="true"/>
        <Button Clicked="Handle_Clicked" Text="Log In" BackgroundColor="#2B3D4F" TextColor="White" HeightRequest="50"
                VerticalOptions="Start" Grid.Row="3" />
        <Grid Grid.Row="5">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Label BackgroundColor="#bababa" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />
          <!--<Label Text="" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>-->
          <Image Source="facebook.png" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>
          <Label BackgroundColor="#bababa" Grid.Column="2" HeightRequest="1" HorizontalOptions="FillAndExpand"
                 VerticalOptions="Center" />
        </Grid>
        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="6">
          <Label Text="Connectez-vous avec Facebook" TextColor="#2B3D4F"  />
        </StackLayout>
      </Grid>
      <StackLayout Grid.Row="2" BackgroundColor="#2B3D4F">
        <Label Text="Créer un compte" VerticalOptions="FillAndExpand" TextColor="White" VerticalTextAlignment="Center"
               HorizontalTextAlignment="Center" />
      </StackLayout>
    </Grid>
  </ContentPage.Content>
</ContentPage>

这是我所得到的例子：

Android：

iPhone：

如果我的Android界面与iPhone一样，我会很乐意。

Answer 1

您可以使用“自定义渲染器”自定义控件，例如（Entry）：

1.custom MyEntry ：

public class MyEntry :Entry
{
}

2。在 *。Android 中创建 MyEntryRenderer ：

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace App11.Droid
{

   class MyEntryRenderer : EntryRenderer
     {
       public MyEntryRenderer(Context context) : base(context)
         {
         }
       protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
         {
           base.OnElementChanged(e);

            if (Control != null)
              {
               // custom your style
               Control.SetBackgroundResource(Resource.Drawable.edittext_shape);
              }
         }
     }
}

在资源/可绘制对象中创建xml（此处称为edittext_shape，用于设置条目的圆角）

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <solid android:color="#fff" />
  <corners android:radius="5dp" />
</shape>

3。在页面的 xaml 中使用：

<ContentPage ...
 xmlns:local="clr-namespace:*;assembly=*"
  ...>
  ...
  <local:MyEntry Placeholder="Email or Phone Number" PlaceholderColor="#bababa" FontSize="16"/>
  ...
</ContentPage>

更多信息可以在这里找到：CustomRenderer

如何使我的界面适应所有类型的设备（iOS / Android）？

1 个答案: