Diego Salazar


NavigationBar y TabBar: Colores personalizados con Swift en iOS 8

Para darle un look personalizado y una mejor UI (User Interface) a nuestras apps, universalmente creamos clases derivadas de: UINavigationController y UITabBarController y sobreescribimos la función viewDidLoad( )

    class NavigationViewController: UINavigationController {

    <span class="kr">override</span> <span class="k">func</span> <span class="n">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
        <span class="nb">super</span><span class="p">.</span><span class="n">viewDidLoad</span><span class="p">()</span>

        <span class="nb">self</span><span class="p">.</span><span class="n">navigationBar</span><span class="p">.</span><span class="n">barStyle</span> <span class="o">=</span> <span class="n">UIBarStyle</span><span class="p">.</span><span class="n">Black</span>
        <span class="nb">self</span><span class="p">.</span><span class="n">navigationBar</span><span class="p">.</span><span class="n">barTintColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">.</span><span class="n">blackColor</span><span class="p">()</span>
        <span class="nb">self</span><span class="p">.</span><span class="n">navigationBar</span><span class="p">.</span><span class="n">tintColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">.</span><span class="n">whiteColor</span><span class="p">()</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre></figure>

NavigationBar

barStyle : El estilo de la barra por defecto es trasluciente con un fondo blanco y contenido oscuro. Revisa la documentación para más valores.

barTintColor : El color de fondo de la barra de navegación. Por defecto es trasluciente y claro.

tintColor : El color que aplica a los items de la barra de navegación. Por defecto es negro

Luego hacemos lo mismo con el TabBarController

    class TabBarViewController: UITabBarController {

    <span class="kr">override</span> <span class="k">func</span> <span class="n">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
        <span class="nb">super</span><span class="p">.</span><span class="n">viewDidLoad</span><span class="p">()</span>

        <span class="nb">self</span><span class="p">.</span><span class="n">tabBar</span><span class="p">.</span><span class="n">barTintColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">.</span><span class="n">blueColor</span><span class="p">()</span>
        <span class="nb">self</span><span class="p">.</span><span class="n">tabBar</span><span class="p">.</span><span class="n">tintColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">.</span><span class="n">whiteColor</span><span class="p">()</span>
    <span class="p">}</span>

<span class="p">}</span>
</code></pre></figure>

TabBar

Colores Personalizados

Si lo que queremos es que la UI de nuestra app luzca acorde a los colores de una marca, o simplemente para mejor experiencia, debemos pasar como parametros a UIColor los canales RGB (Red, Green, Blue)

UIColor(red: 0.5, green: 1.0, blue: 0.0, alpha: 1.0)

Debemos tener en cuenta que estos parámetros van en escala del 0.0 al 1.0 y no de 0 a 255, por lo que tendríamos que hacer un ajuste si nuestro color deseado está en el último rango:

UIColor(red: (60.0/255.0), green: (55.0/255.0), blue: (65.0/255.0), alpha: 1.0)

Un último tip: Como los colores por defecto de nuestras NavigationBar o TabBar son translucidos podemos incrementar la intensidad de cada canal de color en 0.12 para lograr el color deseado, así:

UIColor(red: (60.0/255.0)-0.12, green: (55.0/255.0)-0.12, blue: (65.0/255.0)-0.12, alpha: 1.0)

Plus: Colores Hexadecimales

Sí, muchos de nosotros manejamos colores hexadecimales y no RGB. Con Swift utilizar estos colores llega a ser un poco tedioso y molesto, pero podemos utilizar unos pequeños trucos para lograrlo.

  1. Utilizar un website que convierta valores hexadecimales a RGB. Por ejemplo esta gran herramienta que nos da los valores RGB en el rango apropiado para UIColor.
  2. Usar una función que nos permita hacer la conversión:

    func UIColorFromRGB(rgbValue: UInt) -> UIColor {
        return UIColor(
            red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
    }
    view.backgroundColor = UIColorFromRGB(0x209624)
    

  1. Utilizar una grandiosa librería llamada SwiftColors con la que podremos crear colores hexadecimales así:

    // Con el #
    let color: UIColor = UIColor(hexString: "#ff8942")

<span class="c1">// Sin el #, con Alfa</span>
<span class="k">let</span> <span class="nl">segundoColor</span><span class="p">:</span> <span class="bp">UIColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">(</span><span class="nl">hexString</span><span class="p">:</span> <span class="s">&quot;ff8942&quot;</span><span class="p">,</span> <span class="nl">alpha</span><span class="p">:</span> <span class="mf">0.5</span><span class="p">)</span>

<span class="c1">// Hexadecimal de tres digitos</span>
<span class="k">let</span> <span class="nl">colorCortoConHex</span><span class="p">:</span> <span class="bp">UIColor</span> <span class="o">=</span> <span class="bp">UIColor</span><span class="p">(</span><span class="nl">hexString</span><span class="p">:</span> <span class="s">&quot;fff&quot;</span><span class="p">)</span>
</code></pre></figure>