Xamarin 表单 TabbedPage 图标很小

Question

使用带有五个选项卡的 TabbedPage，虽然问题与只有两个选项卡相同，但我看到呈现的图标非常小，如此图所示，使用了一些占位符图形。

我已经尝试过从 32x32 到 512x512 的所有像素分辨率的图像，它们都呈现相同的尺寸。您可能希望有一个选项来设置它，但是在寻找解决方案时，它似乎总是归结为制作自定义渲染图。不过，我还没有看到有人抱怨小图标，但通常是更复杂的问题，所以我仍然希望有一个通用的表单解决方案。

在屏幕截图中（android 在设备上）我使用主详细信息页面提供工具栏和左侧菜单，但是当我有一个干净的 TabbedPage 时问题是一样的。

TabbedPage 的定义很简单，所以我怀疑那里有什么问题

<?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:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            xmlns:views="clr-namespace:CloudDash.Views"
            x:Class="CloudDash.Views.TabPage">

    <TabbedPage.Children>
        <views:ThermalingPage IconImageSource="fly.png"/>
        <views:DataPage IconImageSource="fly.png"/>
        <views:FlightPage IconImageSource="fly.png"/>
        <views:RoutePage IconImageSource="fly.png"/>
        <views:AwarenessPage IconImageSource="fly.png"/>
    </TabbedPage.Children>

</TabbedPage>

Answer 1

如果你想让图标变大，你必须制作一个自定义渲染器来实现它。这是运行屏幕截图。

在 Android 文件夹中。创建自定义渲染器 MyTabbedPageRenderer.cs.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Android.Views;
using Android.Widget;
using App22.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]
namespace App22.Droid
{
     public class MyTabbedPageRenderer:TabbedPageRenderer
    {
        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);

            imageview.SetBackgroundDrawable(tab.Icon);

        }
    }
}

在布局文件夹中创建 Custom_tab_layou.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="61dp">
     <ImageView
        android:id="@+id/icon"
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp" />

</LinearLayout>

在IOS中，你可以参考这个帖子：

https://forums.xamarin.com/discussion/44069/tab-bar-icon-sizing

您也可以在 github 页面的 xamarin 部分提出功能请求，PG 会看到它。

https://github.com/xamarin/Xamarin.Forms/issues

Answer 2

在这种情况下建议使用Sharpnado.Presentation.Forms nuget，您可以随意自定义标签：

https://github.com/roubachof/Sharpnado.Presentation.Forms

Xamarin 表单 TabbedPage 图标很小

Xamarin forms TabbedPage icons are tiny

xamarin.forms

tabbedpage