Как я могу адаптировать свой интерфейс ко всем видам устройств (iOS / Android)? - PullRequest
Новая
       48

Как я могу адаптировать свой интерфейс ко всем видам устройств (iOS / Android)?

0 голосов
/ 10 апреля 2019

Мой пользовательский интерфейс выглядит по-разному на обоих устройствах, на которых я запускаю приложение, что является нормальным, но я хочу адаптировать его для обеих ОС (iOS и Android),

Я пытался использовать StackLayout внутриСетки, но ничего не меняется, мой пользовательский интерфейс все еще не реагирует. 

<?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:

Android Image

iPhone:

iOS Image

И я бы хотел, чтобы мой интерфейс Android выглядел так же, как интерфейс iPhone.

1 Ответ

1 голос
/ 11 апреля 2019

Вы можете использовать Custom Renderer для вырезания элемента управления, например (Entry):

1.custom MyEntry : 

public class MyEntry :Entry
{
}

2.in *. Android create 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);
              }
         }
     }
}

in 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

...