Xamarin 表单 TabbedPage 图标很小 [英] Xamarin forms TabbedPage icons are tiny

问题描述

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

Using a TabbedPage with five tabs, though the issue is the same with only two, I see the rendered icons being very small, as shown in this image, using some placeholder graphics.

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

I have tried images at all pixel resolutions from 32x32 to 512x512 and they all render the same size. You would expect an option to set this, but when looking for solutions, it seems to always boil down to making custom renderes. I have not seen anyone complaining about tiny icons, though, but generally more complex issues, so I am still hoping for a generalized forms solution.

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

In the screenshot (android on device) I use a master detail page to give a toolbar and left menu, but the issue is the same when I have a clean TabbedPage on its own.

TabbedPage 的定义是微不足道的，所以我怀疑那里有什么问题

The definition of the TabbedPage is trivial, so I doubt there is any issue there

<?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>

推荐答案

如果想让图标变大，就得自己做一个自定义渲染器来实现.这是运行截图.

If you want to make the icon to bigger, you have to make a custom renderer to achieve it. Here is running screenshot.

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

In the Android folder. create a custom renderer 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.

Create a Custom_tab_layou.xml in layout folder.

<?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中，可以参考这个线程:

In the IOS, you can refer to this thread:

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

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

You also could make a feature request in xamarin part of github page, PG will see it.

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

这篇关于Xamarin 表单 TabbedPage 图标很小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！