如何禁用Shell TabBar标签切换时的点击阴影动画

前置说明 #

你遇到的动画是各平台原生Tab项自带的点击涟漪/高亮瞬态效果，直接在对应平台的自定义Shell Renderer中修改原生控件属性即可禁用。

Android 端修改步骤 #

• 找到你项目中继承自ShellRenderer的自定义渲染类，重写CreateBottomNavViewAppearanceTracker方法，返回自定义的ShellBottomNavViewAppearanceTracker实例
• 在自定义ShellBottomNavViewAppearanceTracker的SetAppearance方法中添加如下代码：

// 禁用涟漪效果
bottomNavView.ItemRippleColor = Android.Content.Res.ColorStateList.ValueOf(Android.Graphics.Color.Transparent);
// 移除点击背景
bottomNavView.ItemBackground = null;
// 禁用选中指示器动画
bottomNavView.ItemActiveIndicatorEnabled = false;

• 若使用的是Xamarin.Forms旧版本，可额外在Android项目的Resources/values/styles.xml中给底部导航主题添加属性：

<item name="selectableItemBackground">@android:color/transparent</item>
<item name="selectableItemBackgroundBorderless">@android:color/transparent</item>

iOS 端修改步骤 #

• 找到项目中继承自ShellRenderer的自定义渲染类，重写CreateTabBarAppearanceTracker方法，返回自定义的ShellTabBarAppearanceTracker实例
• 在自定义ShellTabBarAppearanceTracker的SetAppearance方法中添加如下代码：

// iOS13及以上版本适配
if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
    var tabBarAppearance = new UITabBarAppearance();
    // 取消所有状态下的阴影效果
    tabBarAppearance.StackedLayoutAppearance.Normal.HighlightedShadowColor = UIColor.Clear;
    tabBarAppearance.StackedLayoutAppearance.Selected.HighlightedShadowColor = UIColor.Clear;
    tabBarAppearance.StackedLayoutAppearance.Normal.FocusedShadowColor = UIColor.Clear;
    tabBarAppearance.StackedLayoutAppearance.Selected.FocusedShadowColor = UIColor.Clear;
    // 应用配置到TabBar
    tabBar.StandardAppearance = tabBarAppearance;
    if (UIDevice.CurrentDevice.CheckSystemVersion(15, 0))
    {
        tabBar.ScrollEdgeAppearance = tabBarAppearance;
    }
}
// 遍历TabItem移除点击高亮属性
foreach (var tabItem in tabBar.Items)
{
    // 移除文字点击阴影
    tabItem.SetTitleTextAttributes(new UIStringAttributes { Shadow = null }, UIControlState.Highlighted);
    tabItem.SetTitleTextAttributes(new UIStringAttributes { Shadow = null }, UIControlState.Selected | UIControlState.Highlighted);
    // 禁用图标点击变色
    tabItem.Image = tabItem.Image?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
    tabItem.SelectedImage = tabItem.SelectedImage?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}

• 如需同时禁用Tab切换的过渡动画，可添加如下代码：

UIView.AnimationsEnabled = false;
tabBar.SelectedItem = targetItem;
UIView.AnimationsEnabled = true;

内容的提问来源于stack exchange，提问作者Km0209