Xamarin Android在TabbedPage标签中的图标和文本之间添加空格

问题描述

我希望Xamarin.Forms应用程序在其选项卡中显示图标和文本。我可以使用TabbedRenderer在那里渲染FontAwesome图标，但是图标和文本彼此之间太近了。外观如下：

其他人则想在图标和文本之间添加空格。我想出了如何使用TabbedRenderer渲染选项卡内容的CustomView的方法，但是我有能力获得所需的输出。答案here不够（未处理多字文本等）。 Mayuresh Deshmukh的答案here听起来不错，但是当我尝试使用“ app：tabInlineLabel”属性创建视图时，出现错误“命名空间前缀'app'无法解析”。如果可以解决的话，我会尝试将ActionBar的CustomView设置为使用TabLayout标签，例如帖子中包含的标签。

我希望有一种方法可以查看默认情况下在代码中呈现的布局，因此我可以对其进行调整以在文本中添加一些左边界或填充，因为除了缺少空间外，它看起来很棒。

我想要的是根据需要扩展选项卡的宽度以适合全文，并在必要时进行水平滚动。只要间隔有效，一些长文本到第二行的换行（在默认情况下有时会发生）就可以了，但是是可选的-这是我能想到的最好的换行版本...切断，因此不可用：

从此查看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:id="@+id/nav_icon"
        android:contentDescription=""
        android:layout_marginBottom="5px"
        android:layout_marginTop="5px"
        android:layout_weight="3"
    />

    <TextView
        android:id="@+id/nav_label"

        android:shadowColor="@android:color/black" 
        android:paddingLeft="5px"
        android:layout_marginBottom="5px"
        android:layout_marginTop="5px"
        
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:textColor="@android:color/white"
        

    />
</LinearLayout>

这是一个文本不会自动换行的版本...但是选项卡不会展开以适合文本：

产生该代码的视图代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:gravity="center_vertical"
        android:id="@+id/nav_icon"
        android:contentDescription=""
        android:paddingBottom="5px"
        android:paddingTop="5px"
        android:layout_marginTop="15px"
    />

    <TextView
        android:id="@+id/nav_label"

        android:shadowColor="@android:color/black" 
        android:paddingLeft="15px"
        android:paddingBottom="5px"
        android:paddingTop="20px"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:textColor="@android:color/white"
        android:singleLine="true"
        android:textAllCaps="true"

    />
</LinearLayout>

这是我的Android TabbedPageRenderer（我认为它工作正常-这是我认为需要修复的布局（我已经处理过硬编码的文本，因此这里的所有屏幕截图都不相同，但是否则是截图之间保持一致）：

using System.Linq;

using Android.App;
using Android.Content;
using Android.Views;
using Android.Widget;
using Origami.MobileForms.Droid.Renderers;
using Origami.MobileForms.Droid.Utility;
using Origami.MobileForms.Pages;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;


[assembly: ExportRenderer(typeof(FormTabbedPage),typeof(ExtendedTabbedPageRenderer))]
namespace Origami.MobileForms.Droid.Renderers
{
    public static class DebugViewContents
    {

        public static void DebugLayout(this Android.Views.View self,int indent = 0)
        {
            // write info about me first
            var indents = new string('\t',indent);
            System.Diagnostics.Debug.WriteLine(indents + self.GetType().Name);

            // check if I'm a view group
            var vg = self as ViewGroup;
            if (vg == null) return;

            // enumerate my children
            var children = Enumerable.Range(0,vg.ChildCount).Select(x => vg.GetChildAt(x));

            // recurse on each child
            foreach (var child in children)
                DebugLayout(child,indent + 1);
        }
    }
    public class ExtendedTabbedPageRenderer : TabbedRenderer
    {
        public ExtendedTabbedPageRenderer(Context context) : base(context) { }

        protected override void dispatchDraw(global::Android.Graphics.Canvas canvas)
        {
            Activity activity = this.Context as Activity;
            if (activity.ActionBar.TabCount > 0)
            {
                SetTabIcons();
            }

            base.dispatchDraw(canvas);
        }

        private void SetTabIcons()
        {

            var element = this.Element;
            if (null == element)
            {
                return;
            }

            Activity activity = this.Context as Activity;
            if ((null != activity && null != activity.ActionBar && activity.ActionBar.TabCount > 0))
            {
                for (int i = 0; i < element.Children.Count; i += 1)
                {
                    Android.App.ActionBar.Tab tab = activity.ActionBar.GetTabAt(i);

                    var page = element.Children[i];
                    if ((null != tab) && (null != page) && (null != page.IconImageSource))
                    {
                        if (tab.CustomView == null)
                        {
                            var iconKey = "\uf15c";
                            int fontSize = 30;
                            string fontName = "FontAwesome.otf";
                            // IconDrawable class copied from https://github.com/winstongubantes/Xamarin.Forms/blob/master/CustomIconizefont/CustomIconizefont/CustomIconizefont.Android/Custom/Utils/IconDrawable.cs,with slight modifications to how it loads the typeface
                            var drawable = new IconDrawable(this.Context,iconKey,fontName).Color(Xamarin.Forms.Color.White.ToAndroid()).SizeDp(fontSize);
                            tab.SetIcon(drawable);
                            if (tab.Text.Contains("Child"))
                                tab.SetText("The Child Tab");
                            else
                                tab.SetText("The Parent Tab");

                            LayoutInflater layoutInflater = LayoutInflater.From(this.Context);
                            Android.Views.View view = layoutInflater.Inflate(Resource.Layout.IconAndText,null);

                            TextView tab_label = (TextView)view.FindViewById(Resource.Id.nav_label);
                            tab_label.SetText(tab.Text.tochararray(),tab.Text.tochararray().Length);
                            ImageView tab_icon = (ImageView)view.FindViewById(Resource.Id.nav_icon);
                            tab_icon.SetimageDrawable(tab.Icon);

                            tab.SetCustomView(view);
                        }

                    }
                }
            }
        }
    }


}

我已经玩了一天以上的布局，但是没有比这更好的了。知道如何查看默认布局和/或修改我的布局，使它看起来像默认布局，除了在图标和文本之间使用填充吗？

或者，完全不同的策略是在图标中添加填充。假设我正在使用FontAwesome图标，并使用this类将它们渲染为可绘制对象，那么这似乎是可行的。在该类的Draw方法中，我尝试在设置textValue时在_iconChar之后添加空格。确实在图标的右侧创建了空间，但是将图标向左移动并切去了图标的左侧。这显示了3个尾随空格。带有一个图标时，带有一些图标看起来还不错，但是与其他图标相比却很糟糕/很明显地被剪掉了。

以下任何或所有方面的帮助将非常有帮助！

使用应用程序：我视图中的选项和/或
查看默认视图的内容和/或
改变我的观点以正确工作和/或
修改IconDrawable功能以略微缩小图标，使其与Android选项卡分配给图标的空格中的尾随空格或两个空格匹配

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

android android android-custom-view tabbedpage