Xamarin iOS中如何在TabbedPage徽章内加文本或设置UILabel圆角

方案一：在UIView徽章内添加文本 #

基于你已实现的UIView红色圆点，只需新增UILabel作为其子视图，配置文本样式后嵌入徽章视图即可：

public static void addItemBadge(this UITabBar tabbar, int index, string badgeText = "1")
{
    if (tabbar.Items != null && tabbar.Items.Length == 0) return;
    if (index >= tabbar.Items.Length) return;

    removeItemBadge(tabbar, index);

    // 创建徽章背景视图
    var badgeView = new UIView();
    badgeView.Tag = tabBarItemTag + index;
    badgeView.Layer.CornerRadius = 7;
    badgeView.BackgroundColor = UIColor.Red;
    badgeView.ClipsToBounds = true; // 确保子视图不超出圆角范围

    var tabFrame = tabbar.Frame;
    var percentX = (index + 0.56) / tabbar.Items.Length;
    var x = percentX * tabFrame.Width;
    var y = tabFrame.Height * 0.05;
    // 根据文本长度动态调整徽章宽度
    var badgeWidth = badgeText.Length > 1 ? 20 : 13;
    badgeView.Frame = new CoreGraphics.CGRect(x, y, badgeWidth, 13);

    // 创建文本标签
    var badgeLabel = new UILabel();
    badgeLabel.Text = badgeText;
    badgeLabel.TextAlignment = UITextAlignment.Center;
    badgeLabel.TextColor = UIColor.White;
    badgeLabel.Font = UIFont.SystemFontOfSize(10);
    // 让标签填充整个徽章视图
    badgeLabel.Frame = badgeView.Bounds;

    badgeView.AddSubview(badgeLabel);
    tabbar.AddSubview(badgeView);
}

关键说明 #

• 新增badgeText参数支持自定义徽章内容
• 根据文本长度动态调整徽章宽度，避免文本溢出
• badgeView.ClipsToBounds = true保证文本不会超出圆角区域

方案二：为UILabel设置CornerRadius实现徽章 #

UILabel本身支持通过Layer设置圆角，你之前的问题是缺少裁剪生效配置，完整实现如下：

public static void addItemBadge(this UITabBar tabbar, int index, string badgeText = "1")
{
    if (tabbar.Items != null && tabbar.Items.Length == 0) return;
    if (index >= tabbar.Items.Length) return;

    removeItemBadge(tabbar, index);

    var badgeLabel = new UILabel();
    badgeLabel.Tag = tabBarItemTag + index;
    badgeLabel.BackgroundColor = UIColor.Red;
    badgeLabel.Text = badgeText;
    badgeLabel.TextAlignment = UITextAlignment.Center;
    badgeLabel.TextColor = UIColor.White;
    badgeLabel.Font = UIFont.SystemFontOfSize(10);
    // 核心配置：开启圆角裁剪
    badgeLabel.Layer.CornerRadius = 7;
    badgeLabel.Layer.MasksToBounds = true; // 等价于 badgeLabel.ClipsToBounds = true

    var tabFrame = tabbar.Frame;
    var percentX = (index + 0.56) / tabbar.Items.Length;
    var x = percentX * tabFrame.Width;
    var y = tabFrame.Height * 0.05;
    // 根据文本长度调整标签尺寸
    var labelWidth = badgeText.Length > 1 ? 20 : 13;
    badgeLabel.Frame = new CoreGraphics.CGRect(x, y, labelWidth, 13);

    tabbar.AddSubview(badgeLabel);
}

关键说明 #

• Layer.MasksToBounds = true是圆角生效的核心，它会裁剪超出圆角范围的内容
• 无需嵌套额外UIView，直接用UILabel即可实现带文本的圆角徽章
• 动态调整标签宽度适配不同长度的文本内容

内容的提问来源于stack exchange，提问作者Chim Di Tru