Я хочу реализовать этот пользовательский интерфейс в Xamarin Forms. Это скриншот моего UI.
Поэтому я понятия не имею, как сделать этот пользовательский интерфейс в формах xamarin. Я не понимаю, это представление карты или просто представление, в которое я должен добавить все эти изображения и ярлыки? . Мне нужны некоторые предложения по реализации этого UI.
Я предполагаю, что у вас будет несколько ресторанов в качестве результата поиска, и, вероятно, вид должен быть прокручиваемым, если результатов много?
Я бы реализовал это с помощью ListView:
<ListView ItemsSource="{Binding Restaurants} HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" .... />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" ... />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" ... />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" ... />
<!-- Add implementations for Rating, Like-Button and other labels in according rows and columns -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Вам также понадобится класс модели для вашего ресторана, который будет содержать все данные, как я набросал в тегах {Binding XXX}. В вашем коде вы должны создать список (или лучше ObservableCollection ) и установить его в качестве источника элементов ListView.
Также вам, вероятно, потребуется добавить некоторые эффекты или пользовательские рендереры для визуальных штрихов, таких как тени и т. д.
Вы можете создать «CardView», используя макет «Frame», доступный в Xamarin.Forms.
Код выглядит следующим образом:
CardViewTemplate.xml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App68.CardViewTemplate">
<ContentView.Content>
<Frame IsClippedToBounds="True"
HasShadow="True"
Margin="30"
BorderColor="White"
BackgroundColor="White" >
<Frame.OutlineColor>
<OnPlatform x:TypeArguments="Color"
Android="Gray"
iOS="Gray"/>
</Frame.OutlineColor>
<Frame.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="10"
iOS="10"/>
</Frame.Margin>
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" />
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding RestaurantName}" />
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Rating}" />
<Label Grid.Row="3" Grid.Column="2" Text="{Binding Time}" />
<Label Grid.Row="3" Grid.Column="3" Text="{Binding Distance}" />
</Grid>
</StackLayout>
</Frame>
</ContentView.Content>
</ContentView>
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App68"
x:Class="App68.MainPage">
<StackLayout Orientation="Vertical">
<Label Text="CardView Demo in Xamarin Forms"
FontAttributes="Bold"
FontSize="Medium"
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="listView"
SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
HasUnevenRows="True"
ItemsSource="{Binding lstRestaurants}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:CardViewTemplate/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Ресторан.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class Restaurant
{
public String PreviewImage { get; set; }
public string RestaurantName { get; set; }
public bool IsFavorite { get; set; }
public string Address { get; set; }
public string FoodTypes { get; set; }
public Image RatingIcon { get; set; }
public double Rating { get; set; }
public Image TimeIcon { get; set; }
public double Time { get; set; }
public Image DistanceIcon { get; set; }
public double Distance { get; set; }
}
}
РесторанВиевМодел.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace App68
{
class RestaurantViewModel
{
public IList<Restaurant> lstRestaurants { get; set; }
public object SelectedItem { get; set; }
public RestaurantViewModel()
{
lstRestaurants = new List<Restaurant>();
GenerateCardModel();
}
private void GenerateCardModel()
{
var restaurant1 = new Restaurant()
{
PreviewImage = "Restaurant_1.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant1);
var restaurant2 = new Restaurant()
{
PreviewImage = "Restaurant_2.jpg",
RestaurantName = "Premera restaurant",
IsFavorite = true,
Address = "Avenue Road 256",
FoodTypes = "India Italy Chinese kitchen",
Rating = 4.3,
Time = 150,
Distance = 3
};
lstRestaurants.Add(restaurant2);
}
}
}
Эффект следующий:
Я использовал XFXCardview для этого пользовательского интерфейса. И, кажется, работает довольно хорошо. Это ссылка на GitHub. Итак, это изменения, которые я сделал в своем коде -
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,-20" Padding="-30" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,-40,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
<Image Grid.Row="3" Grid.Column="1" Margin="0,-20,30,0" Source="whitestaricon1.png" WidthRequest="10" HeightRequest="10" BackgroundColor="Blue"/>
<Label Grid.Row="3" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Center" Text="4,3"/>
</Grid>
</Grid>
</xfx:XfxCardView>
