使用 Xamarin 表单图标化（在 Android 上）

Question

我根本无法让 Iconize 工作。我根据这个线程（以及其他地方）中的代码创建了一个小型测试项目：

How to change icon color in Xamarin.Forms xaml page?

在 App.xaml.cs 中：

public App()
{
    InitializeComponent();

    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.MaterialDesignIconsModule());
    MainPage = new MainPage();
}

在 MainActivity.cs 中：

protected override void OnCreate(Bundle savedInstanceState)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    Plugin.Iconize.Iconize.Init(Resource.Id.toolbar, Resource.Id.sliding_tabs);

    LoadApplication(new App());
}

和 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:IconizeTest"
             xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
             x:Class="IconizeTest.MainPage">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="mdi-bus-double-decker" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="mdi-bus-double-decker" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="mdi-bus-double-decker" VerticalTextAlignment="Center" />
        </StackLayout>
    </StackLayout>
</ContentPage>

这是输出在模拟器中的样子的图片（在我的测试设备上看起来一样...）：

我喜欢使用 iconize 的想法，它会极大地减少我花在使用图标上的时间。我只是无法让它工作。谁能告诉我我做错了什么？

谢谢！ -凯伦

Answer 1

字体图标可以直接在Label中使用。

Image 和ImageButton 支持在FontImageSource 中定义font icons，参见下面使用Iconize Material Design Icons 的示例：

<ContentPage ...
             xmlns:fonts="clr-namespace:Fonts" 
             ...
             >
<ContentPage.Resources>
  <ResourceDictionary>
    <OnPlatform x:Key="MaterialDesignIcons" x:TypeArguments="x:String">
        <On Platform="iOS" Value="Material Design Icons" />
        <On Platform="Android" Value="iconize-materialdesignicons.ttf#Material Design Icons" />
        <On Platform="UWP" Value="Assets/Fonts/iconize-materialdesignicons.ttf#Material Design Icons" />
    </OnPlatform>
  </ResourceDictionary>
</ContentPage.Resources>
...
<Image BackgroundColor="LightGray">
    <Image.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.access_point}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Blue" Size="10" />
    </Image.Source>
</Image>
<ImageButton BackgroundColor="LightGray">
    <ImageButton.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.bus_double_decker}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Red" Size="20" />
    </ImageButton.Source>
</ImageButton>
<Label Text="{x:Static fonts:MaterialDesign.lock}" 
       FontFamily="{StaticResource MaterialDesignIcons}" 
       TextColor="Green" FontSize="20" BackgroundColor="LightGray" VerticalTextAlignment="Center" />

字体图标可以定义如下，例如Iconize/src/Fonts/Plugin.Iconize.MaterialDesignIcons/MaterialDesignIconsCollection.cs中的Iconize字体；

Icons.Add("mdi-access-point", '\uf002');
...
Icons.Add("mdi-bus-double-decker", '\uf79d');
...
Icons.Add("mdi-lock", '\uf33e');
...

所以下面的类MaterialDesign 与ContentPage 放在同一个程序集中：

namespace Fonts
{
    public static class MaterialDesign
    {
#pragma warning disable IDE1006 // Naming Styles
        public static string access_point => "\uf002";
        ...
        public static string bus_double_decker => "\uf79d";
        ...
        //lock is a keyword in c#, so add "@" to use it as name of property
        public static string @lock => "\uf33e";
        ...
#pragma warning restore IDE1006 // Naming Styles
    }
}

Iconize MaterialDesignIconsCollection 类的键、值条目可以转换为 MaterialDesign 类的自动属性语法，例如使用在文本编辑器中搜索/替换（此处未显示）。

在此示例中，iconize-materialdesignicons.ttf 字体文件放置在 Android 上的 Assets 文件夹（构建操作 AndroidAsset）、iOS 上的 Resources 文件夹（构建操作 BundleResource）和 UWP 上的 Assets/Fonts （构建操作Content）。

在 iOS 上，将字体添加到 <app>.iOS 项目中的 Info.plist：

<key>UIAppFonts</key>
<array>
    <string>iconize-materialdesignicons.ttf</string>
</array>