Xamarin.Forms：如何更改TabbedPage选项卡中的图标和文本大小

Question

Xamarin.Forms：如何更改TabbedPage选项卡中的图标和文本大小

6

我正在使用 xaml 中的 TabbedPage 开发选项卡。默认的选项卡图标和文本大小都很大，因此我需要缩小图标和文本的大小。下面是我的 main.xaml 代码，我在其中设置了图标。

<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              
             xmlns:local="clr-namespace:TabbedApp">
    <local:DairyTabs Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabs>
    <local:Mykid Icon="kid" ></local:Mykid>
    <local:Event Icon="about"></local:Event>    
</TabbedPage>

这是标签页的第一页，我将选项卡的标题设置为Title="Dairy"

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              
             Title="Dairy"> 
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="btnDemo" Text="Go for 2nd page"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

请查看下面的截图，您可以看到图标和选项卡文本。

- R15

请看此处的答案 https://stackoverflow.com/questions/57194140/is-there-a-way-to-stop-longer-xamarin-shell-tab-titles-being-truncated/62656858#62656858 - Philip

3个回答

4

经过一些努力，我使用TabbedPageRenderer使其在Android上工作。创建了一个自定义布局，其中包含ImageView和TetxtView，位于Custom_tab_layou.xaml下方。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="41dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp" />
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="hello"
        android:gravity="center"
        android:textSize="11dp"
        android:textColor="#00FF6F" />
</LinearLayout>

创建了MyTabbedPageRenderer类。

    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        private Dictionary<Int32, Int32> icons = new Dictionary<Int32, Int32>();
        bool setup;
        ViewPager pager;
        TabLayout layout;
        public MyTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
        {
            base.SetTabIcon(tab, icon);
            tab.SetCustomView(Resource.Layout.Custom_tab_layou);

            var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
            var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);

            tv.SetText(tab.Text, TextView.BufferType.Normal);
            imageview.SetBackgroundDrawable(tab.Icon);

            ColorStateList colors2 = null;

            if ((int)Build.VERSION.SdkInt >= 23)
                colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
            else
                colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
            tv.SetTextColor(colors2);
        }

        //this is for changing text color of select tab
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (setup)
                return;
            if (e.PropertyName == "Renderer")
            {
                pager = (ViewPager)ViewGroup.GetChildAt(0);
                layout = (TabLayout)ViewGroup.GetChildAt(1);
                setup = true;
                ColorStateList colors = null;

                if ((int)Build.VERSION.SdkInt >= 23)
                    colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
                else
                    colors = Resources.GetColorStateList(Resource.Color.icon_tab);

                for (int i = 0; i < layout.TabCount; i++)
                {
                    var tab = layout.GetTabAt(i);
                    var icon = tab.Icon;

                    Android.Views.View view = GetChildAt(i);
                    if (view is TabLayout) layout = (TabLayout)view;

                    if (icon != null)
                    {
                        icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
                        Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
                    }
                }
            }
        }
  }

- R15

当使用ToolbarPlacement.Bottom时，SetTabIcon从未被调用。 - lucidbrot

2

在我的情况下，我真的想跳过所有自定义渲染器...许多实现似乎比必要的工作还要多。我还在实现Font Awesome图标，这似乎非常简单，但我找到的所有示例都将图标应用于标签，并未涉及选项卡页面。经过一些摆弄，我终于编译出了这个很好的解决方案，可以消除渲染器的需求。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:IBMobile.Views"
         xmlns:local2="clr-namespace:FontAwesome"
         x:Class="IBMobile.Views.HomePage"
         Visual="Material">
<ContentPage.IconImageSource>
    <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static local2:IconFont.Home}" />
</ContentPage.IconImageSource>...

回答设置字体大小的问题： 字体图标是一种字体，因此可以像其他字体一样进行设置。例如：

<Button x:Name="btnEmail" Clicked="BtnEmail_Clicked" CommandParameter="{Binding email}" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="Large" Text="{x:Static local2:IconFont.Envelope}"  Grid.Column="3" Grid.Row="1" BackgroundColor="#007d5d" Margin="10" />

- Anthony Griggs

你如何设置像这样的图标大小？ - Marco Rebsamen

在寻找IconImageSource中FA的实现....谢谢....顺便问一下，有没有办法在<OnPlatform>中实现这个？ - Thush-Fdo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sme · Accepted Answer

在你的Android项目的Resources/values/style.xml文件中，你可以创建一个样式：

<style name="MyTabTextStyle" parent="Base.Widget.Design.TabLayout">
    <item name="android:textSize">8sp</item>
</style>

然后在您的Resources/layout/tabs.axml文件中，您可以使用以下样式：

<android.support.design.widget.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ... other attributes ...
    app:tabTextAppearance="@style/MyTabTextStyle" />

至于图标，您可以尝试这个链接：https://dev59.com/FFsX5IYBdhLWcg3wFsTV#46465233

另外，我认为您的应用中“Dairy”应该是“Diary”。