问题描述
我正在开发基于 Shell 的 Xamarin.Forms 应用,并且我正在使用字体图标作为{ {1}}:
TabBar
我只想为活动标签指定颜色,但仅为图标指定颜色,而不是为文本指定颜色,就像我们在Airbnb上看到的那样:
我在Shell设置中没有找到任何选项:
<TabBar>
<ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}">
<ShellContent.Icon>
<FontimageSource Glyph="{StaticResource FasIconHome}" FontFamily="FontAwesomeSolid" />
</ShellContent.Icon>
</ShellContent>
</TabBar>
有可能吗?
解决方法
在您的情况下,您使用 FontImageSource 设置标签项的图标。但是,如果要设置特定项目图标的颜色,则需要预先下载其他颜色的图标,然后将其放入本机平台(iOS中的 Asset 和 Android中的Drawable )。并使用“自定义渲染器”进行设置
在iOS中
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using xxx;
using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AppShell),typeof(ShellCustomRenderer))]
namespace xxx.iOS
{
public class ShellCustomRenderer : ShellRenderer
{
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new TabBarAppearance();
}
}
public class TabBarAppearance : IShellTabBarAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(UITabBarController controller)
{
}
public void SetAppearance(UITabBarController controller,ShellAppearance appearance)
{
UITabBar myTabBar = controller.TabBar;
if (myTabBar.Items != null)
{
var item = myTabBar.Items[0];
//default icon
item.Image = UIImage.FromBundle("xxx.png").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
//selected icon
item.SelectedImage = UIImage.FromBundle("xxx.png").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}
}
public void UpdateLayout(UITabBarController controller)
{
}
}
}
在Android中
[assembly: ExportRenderer(typeof(AppShell),typeof(ShellCustomRenderer ))]
namespace xxx.Droid
{
public class ShellCustomRenderer : ShellRenderer
{
public MyShellRenderer(Context context) : base(context)
{
}
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new CustomBottomNavAppearance();
}
}
public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(BottomNavigationView bottomView)
{
}
public void SetAppearance(BottomNavigationView bottomView,ShellAppearance appearance)
{
bottomView.ItemIconTintList = null;
IMenu myMenu = bottomView.Menu;
IMenuItem myItemOne = myMenu.GetItem(0);
if (myItemOne.IsChecked)
{
myItemOne.SetIcon(Resource.Drawable.xxx); // selected icon
}
else
{
myItemOne.SetIcon(Resource.Drawable.xxx); //default icon
}
}
}
}