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>

Leon Lu - MSFT · Answer 1 · 29 мая 2020

Если вы хотите увеличить значок, вы должны создать собственный рендерер для этого. Вот запущенный снимок экрана.

В папке 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

Вы также можете сделать запрос функции в xamarin части страницы github, PG его увидит.

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