Skip to content
angcyo edited this page Jul 22, 2022 · 4 revisions

默认角标属于关闭状态.

可以通过tab_draw_badge属性激活角标.

<attr name="tab_draw_badge" format="boolean" />

设置角标

简单的设置角标可以通过以下2个方法:

fun updateTabBadge(index: Int, badgeText: String?)

fun updateTabBadge(index: Int, badgeConfig: TabBadgeConfig)  //1.4.0 之后已移除此方法
# 1.4.0新增
fun updateTabBadge(index: Int, config: TabBadgeConfig.() -> Unit)

角标重要配置项 TabBadgeConfig

/**角标绘制参数配置*/
data class TabBadgeConfig(
    /**角标的文本(默认居中绘制文本,暂不支持修改), 空字符串会绘制成小圆点
     * null 不绘制角标
     * ""   空字符绘制圆点
     * 其他  正常绘制
     * */
    var badgeText: String? = null,
    var badgeGravity: Int = Gravity.CENTER,
    /**角标背景颜色*/
    var badgeSolidColor: Int = Color.RED,
    /**角标文本颜色*/
    var badgeTextColor: Int = Color.WHITE
)

角标高级配置

为了降低使用难度, 只提供了简单的角标配置api, 如果想要更多控制项, 可以重写onTabBadgeConfig属性.

将可以控制所有角标属性.

/**重力*/
var badgeGravity: Int = Gravity.CENTER //Gravity.TOP or Gravity.RIGHT

/**角标文本颜色*/
var badgeTextColor = Color.WHITE

/**角标的文本, 空字符串会绘制成小圆点, null表示不绘制*/
var badgeText: String? = "99+"

/**圆点状态时的半径大小*/
var badgeCircleRadius = 4 * dpi

/**额外偏移距离, 会根据[Gravity]自动取负值*/
var badgeOffsetX: Int = 0
var badgeOffsetY: Int = 0

/**圆点状态时无效*/
var badgePaddingLeft = 0
var badgePaddingRight = 0
var badgePaddingTop = 0
var badgePaddingBottom = 0

示例代码

onTabBadgeConfig = { child, tabBadge, index ->
    tabBadge.badgeOffsetX = 10 * dpi
    tabBadge.badgeOffsetY = 4 * dpi
    when (index) {
        1 -> {
            tabBadge.badgeGravity = Gravity.LEFT or Gravity.TOP
            tabBadge.badgeText = "9"
            tabBadge.badgeOffsetX = 10 * dpi
            tabBadge.badgeOffsetY = 4 * dpi
        }
        2 -> {
            tabBadge.badgeGravity = Gravity.RIGHT or Gravity.TOP
            tabBadge.badgeText = "99"
        }
        3 -> {
            tabBadge.badgeGravity = Gravity.RIGHT or Gravity.BOTTOM
            tabBadge.badgeText = "99+"
        }
        4 -> {
            tabBadge.badgeGravity = Gravity.LEFT or Gravity.BOTTOM
            tabBadge.badgeText = "999+"
        }
        else -> {
            tabBadge.badgeGravity = Gravity.CENTER
            tabBadge.badgeText = ""
            tabBadge.badgeOffsetX = child.measuredWidth / 2 - 20 * dpi
            tabBadge.badgeOffsetY = -child.measuredHeight / 2 + 12 * dpi
        }
    }

    tabBadge.gradientSolidColor = when (index) {
        1 -> Color.BLUE
        2 -> Color.GREEN
        3 -> Color.RED
        4 -> Color.RED
        else -> if (tabBadge.gradientSolidColor == -1) randomColor() else tabBadge.gradientSolidColor
    }
    tabBadge.updateOriginDrawable()
}

1.4.0之后

updateTabBadge(0) {
    badgeText = ""
    badgeSolidColor = randomColor()
    badgeGravity = Gravity.RIGHT or Gravity.TOP
    badgeOffsetX = 10 * dpi
    badgeOffsetY = 2 * dpi
}
updateTabBadge(1) {
    badgeText = "9"
    badgeSolidColor = randomColor()
    badgeGravity = Gravity.CENTER
    badgeOffsetX = 20 * dpi
    badgeOffsetY = -6 * dpi
}
updateTabBadge(2) {
    badgeText = "99+"
    badgeSolidColor = randomColor()
    badgeGravity = Gravity.CENTER
    badgeOffsetX = 10 * dpi
    badgeOffsetY = -8 * dpi
    badgeTextSize = 9 * dp
}

更多示例, 请查看源码.