标签页栏中图标和标签之间的间距答案

【问题标题】：Spacing between icon and label in tabbedpage bar标签页栏中图标和标签之间的间距
【发布时间】：2019-07-29 19:29:33
【问题描述】：

我有一个 tabbedPage，我在其中为每个选项卡分配文本和图标，如下所示：

this.Children.Add(new SignaturesTab() { Title = "Signature" , Icon 
= "sign_new@2x.png" });
this.Children.Add(new PhotosTab() { Title = "Photos", Icon = 
"image_new@2x.png" });

在我的 iPhone 上，图标出现在每个标签栏的标签顶部。

标签渲染器中的代码：

protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        TabBar.TintColor = new UIColor(red: 0.23f, green: 0.56f, blue: 0.20f, alpha: 1.0f);
        TabBar.UnselectedItemTintColor = new UIColor(red: 0.34f, green: 0.34f, blue: 0.34f, alpha: 1.0f);
    }

public override void ViewDidAppear(bool animated)
    {
        base.ViewDidAppear(animated);
        if (TabBar.Items == null) return;
        TabBar.SelectedImageTintColor = new UIColor(red: 0.23f, green: 0.56f, blue: 0.20f, alpha: 1.0f);
        foreach (var uiTabBarItem in TabBar.Items)
        {
            var fontSize = new UITextAttributes(){ Font = UIFont.SystemFontOfSize(13)};
            uiTabBarItem.SetTitleTextAttributes(fontSize, UIControlState.Normal);
        } 
    }

有没有办法在图标和标签之间以及边框之间提供间距/边距。

谢谢

【问题讨论】：

标签： xamarin.forms xamarin.ios tabbedpage

【解决方案1】：

使用UIOffset和UIEdgeInsets可以修改Title和Image在TabBarItem中的位置。

TabBarItem.TitlePositionAdjustment = new UIOffset(0, 1);
//UIOffset:Represents a position offset. UIOffset(nfloat horizontal, nfloat vertical);

TabBarItem.ImageInsets = new UIEdgeInsets(0, 0, 5, 0);
//Mean: UIEdgeInsets(nfloat top, nfloat left, nfloat bottom, nfloat right);

修改 UIOffset 和 UIEdgeInsets 中的参数以满足您的需求。

==============================更新================= ==============

更改标签栏项目图标颜色：

UITabBar.Appearance.SelectedImageTintColor = UIColor.Yellow;
//selected color ,this will change the whole tabbar item

只修改了四项：

for (int i = 0; i < 4; i++)
{
   var fontSize = new UITextAttributes(){ Font = UIFont.SystemFontOfSize(13)};
   uiTabBarItem.SetTitleTextAttributes(fontSize, UIControlState.Normal);
   uiTabBarItem.TitlePositionAdjustment = new UIOffset(0, 1);
   uiTabBarItem.ImageInsets = new UIEdgeInsets(0, 0, 5, 0);
}

【讨论】：

我会试试这个。另外，我总共有 8 个标签。在我的 iPhone 上，它显示第 5 个选项卡为“更多”。单击更多选项卡会打开一个页面，其中包含列表形式的剩余选项卡。此页面中的所有图标颜色均为蓝色，并且列表分隔线遍布整个页面。我们可以只处理这 4 个项目的列表分隔符并更改图标颜色吗？
@SaiSunkari 这似乎是另一个问题。您可以分享一些有问题的图片来解释您的需求。
能否请您检查已编辑的问题。很抱歉混淆了2个问题。 @少年
@SaiSunkari 感谢更新。我已经更新了答案，如果有帮助，感谢您提前标记。
看起来您提供了更新第一个四个标签栏项目颜色的答案。我的要求是删除列表分隔线并将颜色从蓝色更改为默认值，即；黑色的。如果我错了纠正我。 @少年

【解决方案2】：

为此，我使用 IBDesignable 做了一个技巧。对你有用吗

import UIKit

@IBDesignable
class CustomTabBarItem: UITabBarItem {

    @IBInspectable var titlePosition: CGSize = CGSize(width: 0, height: 0) {
        didSet {
            titlePositionAdjustment = UIOffset(horizontal: titlePosition.width, vertical: titlePosition.height)
        }
    }
    
    @IBInspectable var imageInset: CGRect = CGRect(x: 0, y: 0, width: 0, height: 0) {
        didSet {
            imageInsets = UIEdgeInsets(top: imageInset.origin.x, left: imageInset.origin.y, bottom: imageInset.size.width, right: imageInset.size.height)
        }
    }
}

【讨论】：