时间戳

首页 > 解决方案 > 如何使我的界面适应所有类型的设备（iOS/Android）？

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

问题描述

我的 UI 在我运行我的应用程序的两个设备上看起来都不同，这是正常的，但我想将它适应两个操作系统（iOS 和 Android），

我尝试在网格内使用 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>

这是我得到的一个例子：

安卓 ：

安卓图片

苹果手机 ：

iOS 图像

如果我的 Android 界面看起来像 iPhone，我会很高兴。

标签： xamarinxamarin.formsresponsive-designgridresponsive

解决方案

您可以使用自定义渲染器来自定义控件，例如（条目）：

1.自定义我的条目：

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);
              }
         }
     }
}

在Resources/drawable创建 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

推荐阅读