第一个选项卡图标未调整大小 iOS TabbedRenderer答案

【问题标题】：First tab icon not resizing iOS TabbedRenderer第一个选项卡图标未调整大小 iOS TabbedRenderer
【发布时间】：2020-03-05 17:01:03
【问题描述】：

我正在使用自定义 TabbedRenderer 处理 iOS 选项卡，在渲染器页面中我正在调整大小和设置图标。但是对于第一个选项卡图标没有调整大小，其余所有选项卡设置图标都很好。

public class CustomTabRenderer_iOS : TabbedRenderer
{
  public override void ViewWillLayoutSubviews()
   {
      base.ViewWillLayoutSubviews();

      foreach (var item in TabBar.Items)
       {

        item.Image = GetTabIcon(item.Title);                                   
       }
   }

  private UIImage GetTabIcon(string title)
  {
      UITabBarItem item = null;
      switch (title)
      {
        case "Dairy":
        item = new UITabBarItem("Dairy", UIImage.FromFile("dairy"), 0);
        break;
        case "My kid":
        item = new UITabBarItem("My kid",UIImage.FromFile("kid"),0);
        break;
        case "Events":
        item = new UITabBarItem("Events", UIImage.FromFile("events"), 0);

        break;
        case "About":
        item = new UITabBarItem("About", UIImage.FromFile("about"), 0);
        break;
      }
      var img = (item != null) ? UIImage.FromImage(item.SelectedImage.CGImage, item.SelectedImage.CurrentScale, item.SelectedImage.Orientation) : new UIImage();

      var imgR = ResizeImage(img, 20, 20);
      return imgR;
  }

     public UIImage ResizeImage(UIImage sourceImage, float width, float height)
        {
           UIGraphics.BeginImageContext(new SizeF(width, height));
           sourceImage.Draw(new RectangleF(0, 0, width, height));
           var resultImage = UIGraphics.GetImageFromCurrentImageContext();
           UIGraphics.EndImageContext();
           return resultImage;
        }
}

下面是来自 PCL 项目的 TabbedPage

<Shared:MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:edTheSIS"    
    x:Class="edTheSIS.ParentDashboard"
    xmlns:Shared="clr-namespace:edTheSIS.Shared;assembly=edTheSIS">
<local:DairyTabPage Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabPage>
  <local:MykidTab   Icon="kid" ></local:MykidTab>
  <local:Events   Icon="events"></local:Events>
  <local:About  Icon="about"></local:About>
</Shared:MyTabbedPage>

看下面的截图

下面的第二张截图

【问题讨论】：

完全不相关，但我认为您的意思是：日记。磁盘上的图像可能比其他图像大吗？
是的，没错。我的英语小可怜。
一点也不。当我移动到其他选项卡时，第一个图标变小，其他图标和当前单击的图标（所有图标）再次变大。
我觉得没问题。当前标签的图标较大，表示它是当前标签。
我记得你可以为选中和未选中状态使用不同的图像。您可能只调整未选中状态的大小。试试这个：item = new UITabBarItem("About", UIImage.FromFile("about"), UIImage.FromFile("about"));

标签： c# xamarin.forms xamarin.ios

【解决方案1】：

根据iOS Human Interface Guidelines，图像的大小应如下表所示，用于标签栏。

如果您相应地调整图标大小，它们应该始终正确显示。没有理由在代码中调整大小。

当您仍想使用代码调整图标大小时，像这样更新您的ViewWillLayoutSubviews 方法，同时设置SelectedImage 属性：

public override void ViewWillLayoutSubviews()
{
   base.ViewWillLayoutSubviews();

    foreach (var item in TabBar.Items)
    {
        item.Image = GetTabIcon(item.Title);
        item.SelectedImage = GetTabIcon(item.Title);                                   
    }
}

【讨论】：

太棒了..你让我开心。第一点本身是正确的，我应该使用适当大小的图标。其次，foreach 循环中的代码也可以正常工作。
我不知道您的确切要求，您可能有充分的理由这样做。只是指出选项 :-) 祝你好运！
谢谢！需求很普遍。但是我使用可用的图标，无论推荐大小和我想要看起来不错的图标:)。

【解决方案2】：

iOS 上的标签栏图标大小可以使用自定义TabbedRenderer 中的UITabBarItem.ImageInset 设置

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace AppNameSpace.iOS.Renderers
{
    class CustomTabbedPageRenderer : TabbedRenderer
    {
        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();

            if (Element is TabbedPage)
                if (TabBar?.Items != null)
                    foreach (var item in TabBar.Items)
                        item.ImageInsets = new UIEdgeInsets(16, 16, 16, 16);
        }
    }
}

【讨论】：