如何解决如何在 XAML 中将选项卡式页面选项卡图标和/或文本居中?
我在使用 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();
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。