问题描述
我没有标题，我更喜欢只使用图标，但是图标没有居中，因为标题的空间和填充仍然出现，任何解决方法？Picture of the problem
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WebViewSample"
mc:Ignorable="d"
x:Class="WebViewSample.MainPage"
Shell.NavBarIsVisible="False"
>
<TabBar>
<Tab Icon="home.png">
<ShellContent>
<local:HomePage/>
</ShellContent>
</Tab>
<Tab Icon="user.png">
<ShellContent>
<local:MyAccount/>
</ShellContent>
</Tab>
<Tab Icon="cart.png">
<ShellContent>
<local:OrderPage/>
</ShellContent>
</Tab>
<Tab Icon="search.png" Title="" >
<ShellContent >
<local:BarCodeScanner/>
</ShellContent>
</Tab>
</TabBar>
</Shell>
解决方法
我们可以使用 Custom Renderer
来实现它在iOS中
AppShell 这是我项目中的Shell。您需要根据需要对其进行修改（示例中似乎是MainPage）
using xxx;
using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AppShell),typeof(MyShellRenderer))]
namespace xxx.iOS
{
public class MyShellRenderer : ShellRenderer
{
protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
{
var renderer = base.CreateShellSectionRenderer(shellSection);
if (renderer != null)
{
}
return renderer;
}
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new CustomTabbarAppearance();
}
}
public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(UITabBarController controller)
{
}
public void SetAppearance(UITabBarController controller,ShellAppearance appearance)
{
UITabBar myTabBar = controller.TabBar;
if (myTabBar.Items != null)
{
foreach (UITabBarItem item in myTabBar.Items)
{
item.Title = null;
item.ImageInsets = new UIEdgeInsets(10,0);
}
//The same logic if you have itemThree,itemFour....
}
}
public void UpdateLayout(UITabBarController controller)
{
}
}
}
在Android中
using Android.App;
using Android.Content;
using Android.Support.Design.BottomNavigation;
using Android.Support.Design.Widget;
using Android.Views;
using Android.Widget;
using App13;
using App13.Droid;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(AppShell),typeof(ShellCustomRenderer))]
namespace App13.Droid
{
public class ShellCustomRenderer : ShellRenderer
{
public ShellCustomRenderer(Context context) : base(context)
{
}
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new MarginedTabBarAppearance();
}
}
public class ToolbarAppearance : IShellToolbarAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar,IShellToolbarTracker toolbarTracker)
{
throw new NotImplementedException();
}
public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar,IShellToolbarTracker toolbarTracker,ShellAppearance appearance)
{
throw new NotImplementedException();
}
}
public class MarginedTabBarAppearance : IShellBottomNavViewAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(BottomNavigationView bottomView)
{
}
public void SetAppearance(BottomNavigationView bottomView,IShellAppearanceElement appearance)
{
bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
}
}
}
现在图标位于选项卡的中心。
