Question

我想在iOS的Xamarin.Forms中的TabbedPage上使用SVG图像作为图标。

TabbedPage类的documentation提供了以下提示：

iOS的TabbedRenderer具有可重写的GetIcon方法，该方法可用于从指定来源加载标签图标。通过此覆盖，可以将SVG图像用作TabbedPage上的图标。此外，还可以提供图标的选定和未选定版本。

我创建了以下类来执行覆盖：

[assembly: ExportRenderer(typeof(TabsRoot), typeof(TabbedPageCustomRenderer))]
namespace MyProject.iOS.Renderers
{
    public class TabbedPageCustomRenderer : TabbedRenderer
    {
        protected override Task<Tuple<UIImage, UIImage>> GetIcon(Page page)
        {
            var image = UIImage.FromFile(@"home-black-18dp.svg");
            return Task.FromResult(new Tuple<UIImage, UIImage>(image, image));
        }
    }
}

在this线程中接受的答案建议通过执行以下操作从SVG文件创建UIImage：var myImage = UIImage.FromFile(<<file name>>)其中<<filename>>是SVG。该other thread与上一个线程矛盾，说UIImages不能由SVG文件制成。果然，当我提供SVG文件时，UIImage.FromFile()返回null并且根本不显示任何图标，正如后面的线程所预测的那样。当我提供PNG文件时，替代文件将按预期工作。

我尝试对这个圆进行平方的另一种方法是使用SvgCachedImage提供的FFImageLoading.Svg.Forms，但是我还没有弄清楚如何将UIImage包裹在SvgCachedImage还是在这种情况下是否合适。

谢谢您的帮助！

Answer 1

将 Xamarin.FFImageLoading.Svg nuget包添加到ios项目中。

然后在您的UImage方法中创建GetIcon，如下所示：

UIImage img = await ImageService.Instance
    .LoadFile("timer.svg")
    .WithCustomDataResolver(new SvgDataResolver((int)(TabBar?.Bounds.Height / 2 ?? 30), (int)(TabBar?.Bounds.Height / 2 ?? 30), false))
    .AsUIImageAsync();
UIImage newImg = img.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);

Xamarin.Forms：将SVG图像用作TabbedPage上的图标

1 个答案: