icon select

This commit is contained in:
Tsanie Lily 2022-03-02 10:45:40 +08:00
parent 2179c6a981
commit aa38e186c7
24 changed files with 288 additions and 35 deletions

View File

@ -51,6 +51,10 @@
<Compile Include="$(MSBuildThisFileDirectory)Views\BillPage.xaml.cs">
<DependentUpon>BillPage.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Views\IconSelectPage.xaml.cs">
<DependentUpon>IconSelectPage.xaml</DependentUpon>
<SubType>Code</SubType>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Views\SettingPage.xaml.cs">
<DependentUpon>SettingPage.xaml</DependentUpon>
</Compile>
@ -86,4 +90,9 @@
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="$(MSBuildThisFileDirectory)Views\IconSelectPage.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
</ItemGroup>
</Project>

View File

@ -31,4 +31,5 @@
<CreditCard>Credit Card</CreditCard>
<DebitCard>Debit Card</DebitCard>
<ElecAccount>Electronic Account</ElecAccount>
<IconSelector>Icon Selection</IconSelector>
</root>

View File

@ -31,4 +31,5 @@
<CreditCard>信用卡</CreditCard>
<DebitCard>储蓄卡</DebitCard>
<ElecAccount>电子账户</ElecAccount>
<IconSelector>图标选择</IconSelector>
</root>

View File

@ -9,6 +9,7 @@ namespace Billing.Themes
public const string CascadiaFontBold = nameof(CascadiaFontBold);
public const string RobotoCondensedFontRegular = nameof(RobotoCondensedFontRegular);
public const string RobotoCondensedFontBold = nameof(RobotoCondensedFontBold);
public const string BrandsFontRegular = nameof(BrandsFontRegular);
public const string WindowBackgroundColor = nameof(WindowBackgroundColor);
public const string OptionTintColor = nameof(OptionTintColor);
@ -33,6 +34,7 @@ namespace Billing.Themes
Add(CascadiaFontBold, Definition.GetCascadiaBoldFontFamily());
Add(RobotoCondensedFontRegular, Definition.GetRobotoCondensedRegularFontFamily());
Add(RobotoCondensedFontBold, Definition.GetRobotoCondensedBoldFontFamily());
Add(BrandsFontRegular, Definition.GetBrandsFontFamily());
Add(PrimaryColor, PrimaryMauiColor);
Add(SecondaryColor, SecondaryMauiColor);

View File

@ -1,6 +1,7 @@
using Billing.Languages;
using Billing.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using Xamarin.Forms;
@ -95,4 +96,62 @@ namespace Billing.UI
return value;
}
}
public class IconConverter : IValueConverter
{
public static readonly Dictionary<string, string> IconPreset = new()
{
{ "alipay", "\uf642" },
{ "appstore", "\uf370" },
{ "apple-pay", "\uf416" },
{ "btc", "\uf15a" },
{ "jcb", "\uf24b" },
{ "master-card", "\uf1f1" },
{ "visa", "\uf1f0" },
{ "g-pay", "\ue079" },
{ "paypal", "\uf1ed" },
{ "qq", "\uf1d6" },
{ "steam", "\uf1b6" },
{ "uber", "\uf402" },
{ "weixin", "\uf1d7" },
{ "youtube", "\uf167" }
};
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is ImageSource source)
{
return source;
}
if (value is string name)
{
if (name.StartsWith("#brand#"))
{
var key = name[7..];
if (!IconPreset.TryGetValue(key, out var glyph))
{
if (!int.TryParse(key, NumberStyles.HexNumber, CultureInfo.InvariantCulture, out int i))
{
return ImageSource.FromFile(BaseModel.ICON_DEFAULT);
}
glyph = char.ConvertFromUtf32(i);
}
return new FontImageSource
{
FontFamily = Definition.GetBrandsFontFamily(),
Size = 20,
Glyph = glyph,
Color = Color.Black
};
}
return ImageSource.FromFile(name);
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
}

View File

@ -9,6 +9,7 @@ namespace Billing.UI
public static partial string GetCascadiaBoldFontFamily();
public static partial string GetRobotoCondensedRegularFontFamily();
public static partial string GetRobotoCondensedBoldFontFamily();
public static partial string GetBrandsFontFamily();
}
public static class ExtensionHelper

View File

@ -12,6 +12,8 @@ namespace Billing.UI
public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(GroupStackLayout));
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(GroupStackLayout), propertyChanged: OnItemsSourcePropertyChanged);
public static readonly BindableProperty SpacingProperty = BindableProperty.Create(nameof(Spacing), typeof(double), typeof(GroupStackLayout), defaultValue: 4d);
public static readonly BindableProperty RowHeightProperty = BindableProperty.Create(nameof(RowHeight), typeof(double), typeof(GroupStackLayout), defaultValue: 32d);
public static readonly BindableProperty GroupHeightProperty = BindableProperty.Create(nameof(GroupHeight), typeof(double), typeof(GroupStackLayout), defaultValue: 24d);
public DataTemplate GroupHeaderTemplate
{
@ -33,6 +35,16 @@ namespace Billing.UI
get => (double)GetValue(SpacingProperty);
set => SetValue(SpacingProperty, value);
}
public double RowHeight
{
get => (double)GetValue(RowHeightProperty);
set => SetValue(RowHeightProperty, value);
}
public double GroupHeight
{
get => (double)GetValue(GroupHeightProperty);
set => SetValue(GroupHeightProperty, value);
}
private static void OnItemsSourcePropertyChanged(BindableObject obj, object old, object @new)
{
@ -40,14 +52,14 @@ namespace Billing.UI
stack.lastWidth = -1;
if (@new == null)
{
stack.cachedLayout.Clear();
//stack.cachedLayout.Clear();
stack.Children.Clear();
stack.InvalidateLayout();
}
else if (@new is IList list)
{
stack.freezed = true;
stack.cachedLayout.Clear();
//stack.cachedLayout.Clear();
stack.Children.Clear();
var groupTemplate = stack.GroupHeaderTemplate;
var itemTemplate = stack.ItemTemplate;
@ -91,7 +103,7 @@ namespace Billing.UI
}
}
private readonly Dictionary<View, Rectangle> cachedLayout = new();
//private readonly Dictionary<View, Rectangle> cachedLayout = new();
private bool freezed;
private double lastWidth = -1;
@ -114,27 +126,40 @@ namespace Billing.UI
return;
}
var spacing = Spacing;
var lastHeight = 0.0;
var lastHeight = 0d;
var rowHeight = RowHeight;
var groupHeight = GroupHeight;
foreach (var item in Children)
{
var measured = item.Measure(width, height, MeasureFlags.IncludeMargins);
var rect = new Rectangle(
0, lastHeight, width,
measured.Request.Height);
if (cachedLayout.TryGetValue(item, out var v))
//var measured = item.Measure(width, height, MeasureFlags.IncludeMargins);
//var rect = new Rectangle(
// 0, lastHeight, width,
// measured.Request.Height);
//if (cachedLayout.TryGetValue(item, out var v))
//{
// if (v != rect)
// {
// cachedLayout[item] = rect;
// item.Layout(rect);
// }
//}
//else
//{
// cachedLayout.Add(item, rect);
// item.Layout(rect);
//}
double itemHeight;
if (item.BindingContext is IList)
{
if (v != rect)
{
cachedLayout[item] = rect;
item.Layout(rect);
}
itemHeight = groupHeight;
}
else
{
cachedLayout.Add(item, rect);
item.Layout(rect);
itemHeight = rowHeight;
}
lastHeight += rect.Height + spacing;
var rect = new Rectangle(0, lastHeight, width, itemHeight);
item.Layout(rect);
lastHeight += itemHeight + spacing;
}
}
@ -146,11 +171,21 @@ namespace Billing.UI
}
lastWidth = widthConstraint;
var spacing = Spacing;
var lastHeight = 0.0;
var lastHeight = 0d;
var rowHeight = RowHeight;
var groupHeight = GroupHeight;
foreach (var item in Children)
{
var measured = item.Measure(widthConstraint, heightConstraint, MeasureFlags.IncludeMargins);
lastHeight += measured.Request.Height + spacing;
//var measured = item.Measure(widthConstraint, heightConstraint, MeasureFlags.IncludeMargins);
//lastHeight += measured.Request.Height + spacing;
if (item.BindingContext is IList)
{
lastHeight += groupHeight + spacing;
}
else
{
lastHeight = rowHeight + spacing;
}
}
lastSizeRequest = new SizeRequest(new Size(widthConstraint, lastHeight));
return lastSizeRequest;

View File

@ -1,6 +1,5 @@
using Billing.Themes;
using System;
using System.Collections;
using System.Collections.Generic;
using Xamarin.Forms;
@ -24,7 +23,7 @@ namespace Billing.UI
Spacing = 10,
Children =
{
new Image
new TintImage
{
WidthRequest = 22,
HeightRequest = 22,

View File

@ -203,8 +203,9 @@ namespace Billing.UI
HorizontalOptions = LayoutOptions.End,
Children =
{
new Image
new TintImage
{
WidthRequest = 26,
HeightRequest = 20,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,

View File

@ -8,8 +8,8 @@ namespace Billing.UI
public class WrapLayout : Layout<View>
{
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(WrapLayout), propertyChanged: OnItemsSourcePropertyChanged);
public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(nameof(ColumnSpacing), typeof(double), typeof(WrapLayout), defaultValue: 5.0, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(nameof(RowSpacing), typeof(double), typeof(WrapLayout), defaultValue: 5.0, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(nameof(ColumnSpacing), typeof(double), typeof(WrapLayout), defaultValue: 4d, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(nameof(RowSpacing), typeof(double), typeof(WrapLayout), defaultValue: 4d, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
private static void OnItemsSourcePropertyChanged(BindableObject obj, object old, object @new)
{
@ -177,14 +177,14 @@ namespace Billing.UI
{
cellSize.Width = (width - columnSpacing * (columns - 1)) / columns;
}
if (double.IsPositiveInfinity(height))
//if (double.IsPositiveInfinity(height))
{
cellSize.Height = maxChildSize.Height;
}
else
{
cellSize.Height = (height - RowSpacing * (rows - 1)) / rows;
}
//else
//{
// cellSize.Height = (height - RowSpacing * (rows - 1)) / rows;
//}
layoutData = new LayoutData(visibleChildrenCount, cellSize, rows, columns);
}
else

View File

@ -14,6 +14,7 @@
<ContentPage.Resources>
<ui:MoneyConverter x:Key="moneyConverter"/>
<ui:MoneyConverter x:Key="money2Converter" MarkVisible="False"/>
<ui:IconConverter x:Key="iconConverter"/>
</ContentPage.Resources>
<ContentPage.ToolbarItems>
@ -55,7 +56,8 @@
<ui:GroupStackLayout.ItemTemplate>
<DataTemplate x:DataType="m:Account">
<StackLayout Orientation="Horizontal" Padding="20, 0, 10, 0" HeightRequest="44" Spacing="10">
<Image Source="{Binding Icon}" HeightRequest="20" VerticalOptions="Center"/>
<ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
<Label Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
HorizontalOptions="FillAndExpand" VerticalOptions="Center"
FontSize="Default" FontAttributes="Bold"/>

View File

@ -13,6 +13,7 @@
<ContentPage.Resources>
<ui:AccountCategoryConverter x:Key="categoryConverter"/>
<ui:IconConverter x:Key="iconConverter"/>
</ContentPage.Resources>
<ContentPage.ToolbarItems>
@ -28,7 +29,7 @@
Placeholder="{r:Text AccountNamePlaceholder}"/>
<ui:OptionImageCell Height="44" Icon="face.png"
Title="{r:Text Icon}"
ImageSource="{Binding AccountIcon}"
ImageSource="{Binding AccountIcon, Converter={StaticResource iconConverter}}"
Command="{Binding SelectIcon}"/>
<ui:OptionSelectCell Height="44" Icon="project.png"
Title="{r:Text Category}"

View File

@ -95,9 +95,23 @@ namespace Billing.Views
}
}
private void OnSelectIcon()
private async void OnSelectIcon()
{
if (Tap.IsBusy)
{
return;
}
using (Tap.Start())
{
var page = new IconSelectPage(AccountIcon);
page.IconChecked += Account_IconChecked;
await Navigation.PushAsync(page);
}
}
private void Account_IconChecked(object sender, string icon)
{
AccountIcon = icon;
}
private async void OnSelectCategory()

View File

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8" ?>
<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:ui="clr-namespace:Billing.UI"
xmlns:v="clr-namespace:Billing.Views"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Billing.Views.AddBillPage"
x:DataType="v:AddBillPage"

View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8" ?>
<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:r="clr-namespace:Billing.Languages"
xmlns:ui="clr-namespace:Billing.UI"
xmlns:v="clr-namespace:Billing.Views"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Billing.Views.IconSelectPage"
x:Name="iconSelectPage"
x:DataType="v:IconSelectPage"
Title="{r:Text IconSelector}"
BindingContext="{x:Reference iconSelectPage}">
<ContentPage.Resources>
<ui:IconConverter x:Key="iconConverter"/>
</ContentPage.Resources>
<Grid RowDefinitions="*, Auto">
<ScrollView>
<ui:WrapLayout ItemsSource="{Binding IconsSource}" Margin="10">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="v:BillingIcon">
<Grid WidthRequest="60" HeightRequest="60">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding IconCheck, Source={x:Reference iconSelectPage}}"
CommandParameter="{Binding Icon}"/>
</Grid.GestureRecognizers>
<Grid BackgroundColor="{DynamicResource PromptBackgroundColor}"
IsVisible="{Binding IsChecked}"/>
<ui:TintImage WidthRequest="20" HeightRequest="20" Aspect="AspectFit"
HorizontalOptions="Center" VerticalOptions="Center"
Source="{Binding Icon, Converter={StaticResource iconConverter}}"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</ui:WrapLayout>
</ScrollView>
</Grid>
</ui:BillingPage>

View File

@ -0,0 +1,80 @@
using Billing.Models;
using Billing.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using Xamarin.Forms;
namespace Billing.Views
{
public partial class IconSelectPage : BillingPage
{
public static readonly BindableProperty IconsSourceProperty = BindableProperty.Create(nameof(IconsSource), typeof(IList<BillingIcon>), typeof(IconSelectPage));
public IList<BillingIcon> IconsSource
{
get => (IList<BillingIcon>)GetValue(IconsSourceProperty);
set => SetValue(IconsSourceProperty, value);
}
public Command IconCheck { get; }
public event EventHandler<string> IconChecked;
private string iconChecked;
public IconSelectPage(string icon)
{
iconChecked = icon;
IconCheck = new Command(OnIconCheck);
InitializeComponent();
InitIcons();
}
private void InitIcons()
{
var source = new List<BillingIcon>
{
new() { Icon = BaseModel.ICON_DEFAULT },
new() { Icon = "wallet" }
};
source.AddRange(IconConverter.IconPreset.Select(icon => new BillingIcon { Icon = $"#brand#{icon.Key}" }));
foreach (var icon in source)
{
if (icon.Icon == iconChecked)
{
icon.IsChecked = true;
}
}
IconsSource = source;
}
private async void OnIconCheck(object o)
{
if (o is string icon)
{
foreach (var ic in IconsSource)
{
ic.IsChecked = ic.Icon == icon;
}
iconChecked = icon;
IconChecked?.Invoke(this, icon);
await Navigation.PopAsync();
}
}
}
public class BillingIcon : BindableObject
{
public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(BillingIcon));
public bool IsChecked
{
get => (bool)GetValue(IsCheckedProperty);
set => SetValue(IsCheckedProperty, value);
}
public string Icon { get; set; }
}
}

Binary file not shown.

View File

@ -86,6 +86,7 @@
<AndroidAsset Include="Assets\CascadiaCode-Regular.ttf" />
<AndroidAsset Include="Assets\RobotoCondensed-Regular.ttf" />
<AndroidAsset Include="Assets\RobotoCondensed-Bold.ttf" />
<AndroidAsset Include="Assets\fa-brands-400.ttf" />
<None Include="Resources\AboutResources.txt" />
<None Include="Assets\AboutAssets.txt" />
<None Include="Properties\AndroidManifest.xml" />

View File

@ -6,5 +6,6 @@
public static partial string GetCascadiaBoldFontFamily() => "CascadiaCode-Bold.ttf#CascadiaCode-Bold";
public static partial string GetRobotoCondensedRegularFontFamily() => "RobotoCondensed-Regular.ttf#RobotoCondensed-Regular";
public static partial string GetRobotoCondensedBoldFontFamily() => "RobotoCondensed-Bold.ttf#RobotoCondensed-Bold";
public static partial string GetBrandsFontFamily() => "fa-brands-400.ttf#FontAwesome6Brands-Regular";
}
}

View File

@ -18,9 +18,13 @@ namespace Billing.Droid.Renderers
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == nameof(TintImage.PrimaryColor) && Control?.Drawable != null && Element is TintImage image)
if (e.PropertyName == nameof(TintImage.PrimaryColor) ||
e.PropertyName == nameof(Image.Source))
{
Control.Drawable.SetTint(image.PrimaryColor?.ToAndroid() ?? 0);
if (Control?.Drawable != null && Element is TintImage image)
{
Control.Drawable.SetTint(image.PrimaryColor?.ToAndroid() ?? 0);
}
}
}

View File

@ -79,6 +79,7 @@
<BundleResource Include="Resources\RobotoCondensed-Bold.ttf" />
<BundleResource Include="Resources\CascadiaCode-Bold.ttf" />
<BundleResource Include="Resources\CascadiaCode-Regular.ttf" />
<BundleResource Include="Resources\fa-brands-400.ttf" />
</ItemGroup>
<ItemGroup>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">

View File

@ -6,5 +6,6 @@
public static partial string GetCascadiaBoldFontFamily() => "CascadiaCode-Bold";
public static partial string GetRobotoCondensedRegularFontFamily() => "RobotoCondensed-Regular";
public static partial string GetRobotoCondensedBoldFontFamily() => "RobotoCondensed-Bold";
public static partial string GetBrandsFontFamily() => "FontAwesome6Brands-Regular";
}
}

View File

@ -44,6 +44,7 @@
<string>RobotoCondensed-Bold.ttf</string>
<string>CascadiaCode-Bold.ttf</string>
<string>CascadiaCode-Regular.ttf</string>
<string>fa-brands-400.ttf</string>
</array>
<key>UIFileSharingEnabled</key>
<true/>

Binary file not shown.