Como ajustar el Color de las Insignias en los Tabs de iOS

Este es el último artículo de la serie sobre cómo colorear tanto la Barra de Navegación (NavigationBar) y el TabBar. De hecho este artículo se centra en cómo cambiar el color por omisión (rojo) utilizado en las insignias de las pestañas en el TabBar. Como puedes imaginar, tendremos que utilizar unos cuantos Declare más para ello. Sigue leyendo y te mostraré como hacerlo.

Dado que continuaremos ampliando la funcionalidad del proyecto de ejemplo iniciado en el primer artículo de la entrega, te recomiendo encarecidamente que lo completes si no lo has hecho ya, y que continúes luego con la segunda y tercera entrega de esta serie de artículos.

Selecciona el módulo “DeclaresForiOS” y añádele un nuevo método utilizando los siguientes valores para su signatura en el Panel Inspector:

• Method Name: TabBarBadgeColor
• Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
• Scope: Global

Y escribe o pega el siguiente fragmento de código en el Editor de Código asociado:

Var tabController As Ptr = tab.ViewControllerHandle

if value = nil then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (o As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Dim colorptr As ptr = ColorGroupToUIColor(value)

Declare Function barAppearance Lib "UIKit" selector "standardAppearance" (obj as ptr) as ptr
Declare Sub setAppearance Lib "UIKit" selector "setStandardAppearance:" (obj as ptr, value as ptr)

var appearance as ptr = barAppearance(tabBar)

Declare Function stackedLayout Lib "UIKit" selector "stackedLayoutAppearance" (obj as ptr) as ptr
Declare Function inlineLayout Lib "UIKit" selector "compactInlineLayoutAppearance" (obj as ptr) as ptr
Declare Function normalState Lib "UIKit" selector "normal" (obj as ptr) as ptr

var stackLayout as ptr = stackedLayout( appearance )
var inLayout as ptr = inlineLayout( appearance )
var normalState As ptr = normalState( stackLayout )
var normalInlineState As ptr = normalState( inLayout )

Declare Sub setBadgeColor Lib "UIKit" selector "setBadgeBackgroundColor:" (obj as ptr, value as ptr)

setBadgeColor( normalState, colorptr )
setBadgeColor( normalInlineState, colorptr)

setAppearance(tabBar, appearance)

if System.Version.MajorVersion >= 15 then
  Declare Sub setScrollEdgeAppearance Lib "UIKit" selector "setScrollEdgeAppearance:" (obj as ptr, value as ptr)
  setScrollEdgeAppearance(tabBar, appearance)
end if

Definir el Color para el Texto de las Insignias

¿Qué es lo siguiente? ¡Seguro que lo has adivinado! Dado que ahora podemos personalizar el color de las insignias, muy probablemente el color utilizado por defecto para el texto (blanco) no sea el más recomendable para la mayoría de los casos.

Añadamos un nuevo método a nuestro módulo “DeclaresForiOS” usando los siguientes valores para su signatura en el Panel Inspector:

• Name: TabBarBadgeTextColor
• Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
• Scope: Global

Y escribe a continuación (o pega) el siguiente fragmento de código en el Editor de Código asociado:

Var tabController As Ptr = tab.ViewControllerHandle

if value = nil then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (o As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Dim colorptr As ptr = ColorGroupToUIColor(value)

Declare Function barAppearance Lib "UIKit" selector "standardAppearance" (obj as ptr) as ptr
Declare Sub setAppearance Lib "UIKit" selector "setStandardAppearance:" (obj as ptr, value as ptr)

var appearance as ptr = barAppearance(tabBar)

Declare Function stackedLayout Lib "UIKit" selector "stackedLayoutAppearance" (obj as ptr) as ptr
Declare Function inlineLayout Lib "UIKit" selector "compactInlineLayoutAppearance" (obj as ptr) as ptr
Declare Function normalState Lib "UIKit" selector "normal" (obj as ptr) as ptr

var stackLayout as ptr = stackedLayout( appearance )
var inLayout as ptr = inlineLayout( appearance )

var normalState As ptr = normalState( stackLayout )
var normalInlineState As ptr = normalState( inLayout )

Declare Sub setBadgeTextAttr Lib "UIKit" selector "setBadgeTextAttributes:" (obj as ptr, value as ptr)

Declare Function NSClassFromString Lib "Foundation" (name As CFStringRef) As Ptr
Declare Function dictionaryWithObjectForKey Lib "UIKit" Selector "dictionaryWithObject:forKey:" (obj as ptr, value as ptr, key as CFStringRef) as ptr

var dict as ptr = dictionaryWithObjectForKey( NSClassFromString("NSMutableDictionary") , colorptr, "NSColor")

setBadgeTextAttr( normalState, dict )
setBadgeTextAttr( normalInlineState, dict )

setAppearance(tabBar, appearance)

if System.Version.MajorVersion >= 15 then
  Declare Sub setScrollEdgeAppearance Lib "UIKit" selector "setScrollEdgeAppearance:" (obj as ptr, value as ptr)
  setScrollEdgeAppearance(tabBar, appearance)
end if

A continuación, selecciona el ítem Screen1 en el Navegador y añádele una nueva propiedad utilizando los siguientes valores en el Panel Inspector:

• Name: mTabBadgeTextColor
• Type: ColorGroup
• Scope: Protected

Luego, selecciona el manejador de evento Screen1.Opening y añade las siguientes líneas de código:

mTabBadgeTextColor = new ColorGroup( color.Black, color.Yellow )

me.ParentTabBar.BadgeAt(0) = "33"
me.ParentTabBar.BadgeAt(1) = "42"

Por último, selecciona el manejador de evento Screen1.AppearanceChanged y añade esta línea de código al final:

me.ParentTabBar.TabBarBadgeTextColor = mTabBadgeTextColor

Probando la App

¡Todo listo! Ejecuta la app en tu iPhone o en el Simulador y verás como cada pestaña del TabBar muestra ahora las insignias utilizando los colores personalizados que hemos definido en el evento Opening, tanto para el fondo de las insignias como por el texto mostrado dentro de ellas.

¡Feliz programación con Xojo!