问题描述
我在使用 Xamarin Forms for Android 时遇到问题。我已经用 ContentPages 创建了一个 TabbedPage
来显示不同的内容。在底部,有一个导航标签栏,它应该显示图标。有什么方法可以使标签栏图标居中或对齐显示的内容,使图标居中?目前,文本位于单个标签栏项目的水平中心线下方,而图标位于其上方:
此项目仅适用于 Android
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
x:Class="RandomMovie.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.Windowsspecific;assembly=Xamarin.Forms.Core">
<ContentPage Padding="0,-15,0" IconImageSource="@drawable/search_icon.png">
<CollectionView ItemsSource="{Binding Watchlist}" Margin="0" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0" Padding="5,5,0">
<Grid.RowDeFinitions>
<RowDeFinition Height="auto" />
</Grid.RowDeFinitions>
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width="auto" />
</Grid.ColumnDeFinitions>
<Image Margin="0"
HeightRequest="300"
WidthRequest="170" Aspect="AspectFit"
VerticalOptions="End">
<Image.source >
<UriImageSource
Uri="{Binding poster_path}"
CacheValidity="14"
CachingEnabled="true"
>
</UriImageSource>
</Image.source>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
<ContentPage Title="Search">
<ScrollView>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width="*"/>
<ColumnDeFinition Width="*"/>
</Grid.ColumnDeFinitions>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</ContentPage>
<ContentPage Title="ratings">
</ContentPage>
解决方法
仅通过 XAML 代码无法做到这一点。
要在 Android 上实现这一点,您需要访问本机 BottomNavigationView 并将 LabelVisibilityMode
更改为 LabelVisibilityMode.LabelVisibilityUnlabeled
以下是我在我的一个应用中使用 TabbedPage
的自定义渲染器的方法:
using System.Collections.Generic;
using System.Linq;
using Android.Content;
using Android.Views;
using SampleApp.Droid.Renderers;
using Google.Android.Material.BottomNavigation;
using Plugin.Badge.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using static Google.Android.Material.BottomNavigation.BottomNavigationView;
using View = Android.Views.View;
[assembly: ExportRenderer(typeof(TabbedPage),typeof(CustomTabbedPageRenderer))]
namespace SampleApp.Droid.Renderers
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
public CustomTabbedPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
IEnumerable<View> children = GetAllChildViews(ViewGroup);
BottomNavigationView bottomNavBar = (BottomNavigationView)children.SingleOrDefault(view => view is BottomNavigationView);
if (bottomNavBar != null)
bottomNavBar.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
}
}
private IEnumerable<View> GetAllChildViews(View view)
{
if (!(view is ViewGroup group))
return new List<View> { view };
List<View> result = new List<View>();
int childCount = group.ChildCount;
for (int i = 0; i < childCount; i++)
{
View child = group.GetChildAt(i);
List<View> childList = new List<View> { child };
childList.AddRange(GetAllChildViews(child));
result.AddRange(childList);
}
return result.Distinct();
}
}
}