Colorear el TabBar en iOS

En las dos primeras entradas de esta serie vimos cuán importante es colorear la barra de navegación (NavigationBar) en las pantallas de tus apps iOS para aportarles tu propio tema o aspecto; pero eso es sólo la mitad del camino… en el caso de que tu app también utilice un TabBar. Si es el caso, entonces probablemente querrás definir el color para el propio TabBar, además del color correspondiente al texto mostrado por la pestaña seleccionada, y también el color del texto correspondiente al resto de pestañas que permanezcan sin seleccionar. Sigue leyendo y te mostraré como puedes hacerlo… ¡gracias al potente uso de los Declare!

En primer lugar, y dado a que continuaremos ampliando el proyecto de ejemplo que iniciamos en la primera entrega, te recomiendo que lo leas si no lo has hecho ya. Luego, continúa leyendo la segunda entrega, y ya tendrás el proyecto de ejemplo listo para continuar añadiendo las opciones de personalización a tus pantallas de iOS.

Color de fondo para el TabBar

Para colorear el fondo del TabBar tendremos que añadir un nuevo método al módulo “DeclaresForiOS”, utilizando para ello los siguientes valores:

• Method Name: TabBarBackgroundColor
• 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 configureWithOpaqueBackground Lib "UIKit" selector "configureWithOpaqueBackground" (obj as ptr)
Declare Sub setBackgroundColor Lib "UIKit" Selector "setBackgroundColor:" (obj as ptr, value as ptr)
Declare Sub setAppearance Lib "UIKit" selector "setStandardAppearance:" (obj as ptr, value as ptr)

var appearance as ptr = barAppearance(tabBar)
setBackgroundColor(appearance, 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

Básicamente, estamos definiendo el color en la propiedad backgroundColor en el objeto appearance asociado con el TabBar.

Ajustar el Color del Texto

Añadamos ahora el código a cargo de definir el color del texto para la pestaña seleccionada en el TabBar. Para ello, sólo hemos de ajustar la propiedad tintColor. Por tanto, añade un nuevo método al módulo “DeclaresForiOS” usando los siguientes valores:

• Method Name: TabBarTextColor
• 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 Sub setTintColor Lib "UIKit" Selector "setTintColor:" (obj As ptr, value As ptr)

setTintColor(tabBar, colorptr)

Ajustar el color del texto en las pestañas no seleccionadas

A la hora de definir el color correspondiente al texto de las pestañas no seleccionadas, hemos de utilizar unos cuantos Declare más, dado que el valor ha de asignarse al estado normal del objeto stackedLayout que cuelga del objeto appearance asociado con el TabBar, además de hacerlo también para el objeto compactInlineLayoutAppearance que se utiliza cuando el dispositivo se está usando con la orientación apaisada.

Añade un nuevo método al módulo “DeclaresForiOS” usando los siguientes valores para su signatura:

• Method Name: TabBarUnselectedTextColor
• 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)

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 appearance as ptr = barAppearance( tabBar )
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 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")

Declare Sub setTextAttributes Lib "UIKit" Selector "setTitleTextAttributes:" (obj as ptr, value as ptr)

setTextAttributes( normalState, dict )
setTextAttributes( 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

Probando el Color en el TabBar

Añade una nueva Screen (pantalla) al proyecto paa que nuestra app de ejemplo tenga, por lo menos, un par de pantallas. Puedes hacerlo seleccionando la opción Insert > Screen desde la barra de herramientas del IDE.

Para probar nuestros nuevos métodos hemos de asegurarnos de que la app de ejemplo utilice una TabBar. Para ello, selecciona el ítem iPhoneLayout en el Navegador. Luego, selecciona la opción Tabs en el menú desplegable asociado con la etiqueta Content del Panel Inspector, y elige la opción Screen1 en el menú desplegable asociado con la etiqueta “Tab 0 Content”:

A continuación, con Screen1 aun seleccionado en el Navegador, haz clic en la etiqueta “Tab 1” en el Editor de Diseño, y selecciona la opción Screen2 en el menú desplegable asociado con la etiqueta que ahora se muestra como “Tab 1 Content”:

Con Screen1 aun seleccionado en el Navegador, añade una nueva propiedad usando los siguientes valores:

• Name: mTabBarUnselectedTextColor
• Type: ColorGroup
• Scope: Protected

Selecciona ahora el manejador de evento Screen1.Opening y añade esta línea de código:

mTabBarUnselectedTextColor = new ColorGroup( color.White, color.LightGray)

Cómo paso final, selecciona el manejador de evento Screen1.AppearanceChanged y añade esta línea de código:

me.ParentTabBar.TabBarUnselectedTextColor = mTabBarUnselectedTextColor

¡Todo listo! Es el momento de ejecutar nuestro proyecto de ejemplo en el Simulador o en el iPhone. Verás cómo el color de fondo del TabBar se corresponde con el mismo color que hemos definido para la Barra de Navegación; como también será el caso para el color del texto, mientras que el color del texto correspondiente a las pestañas no seleccionadas utilizará el color blanco cuando el dispositivo o el simulador se esté usando en modo Claro, y con un color gris claro cuando el dispositivo o el simulador se use en modo Oscuro.

Como hemos visto, el uso de los Declare es realmente potente para utilizar las funciones y sub-rutinas proporcionadas por el Framework de iOS. Quizá la parte más complicada sea conocer cuáles utilizar… dado que tendrás que indagar en la documentación para desarrolladores proporcionada por Apple.

¡Feliz programación con Xojo!