Introducción

1

Lo que aprenderás sobre el desarrollo de interfaces con iOS

2

Instalacion de Xcode desde 0

Introducción a Xcode

3

Primer Proyecto

4

Navigation Area

5

Editor, Util Area y Tool Bar

6

Targets y Target Tabs

Formas de crear vistas

7

Organizacion de Carpetas

8

Storyboards vs Xibs vs Codigo

9

Splash Screen

10

Completando nuestro Splash Screen

UIView Components

11

TabBar Controller y Mejores Prácticas

12

Storyboard Reference

13

Explicación breve de algunos elementos gráficos

14

Crear nuestra primera interfaz gráfica

15

Diferentes componentes y formas de autolayout

16

Agregando el resto de nuestros componentes usando constraints

Agregando Estilo a UIView Components

17

Agregando un icono a nuestra app

18

Custom colors

19

Agregando iconos a nuestros botones

20

Key paths de redondeo y sombra

21

Custom fonts

22

Scroll view controller

Tipos de vistas y manejo

23

OnBoarding View

24

Container ViewController

25

Container ViewController con código

26

ContainerViews

Adaptación de vistas

27

Tablas

28

Diseño de celdas

Completando nuestras vistas

29

Código para las tablas

30

Tamaños dinamicos para las celdas

31

EmptyState usando código

32

Agregar estilos a nuestro navigation view

33

Agregando estilos a nuestro Tab bar

34

Custom Tab bar button

35

Budget view

36

Iniciando el header de animacion

37

Animación de barra superior en las tablas usando constraints

38

Stats

Conclusiones

39

Reto final

40

Conclusiones

Bonus: Lottie

41

Gestión de dependencias

42

Instalación dependencias con Cocoapods

43

Instalación dependencias con Carthage

44

Cocoapods vs Carthage

45

Crear nuestro lottie file

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregar estilos a nuestro navigation view

32/45
Recursos

En la clase anterior agregamos nuestro EmptyState, pero nuestro navigation view aun no está del color que tiene el diseño. Nuestra barra de elementos debe ser blanca y para lograr esto, elegimos la opción “Black” en el campo Style.

Reto: Agrega el mismo estilo al resto de barras de navegación.

Aportes 9

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

UN pequeño aporte

Como pueden notar, tenia este inconveniente a la hora de personalizar el color de la barra de navegación.
Indagando un poco entiendo que eso pasa solo en iOS 13+ y Xcode11.4+ ahora en varios foros de Apple. Encontré una solución (No es hecha por mi):

if #available(iOS 13.0, *) {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.backgroundColor = UIColor.init(named: “GreenColor”)
navigationController?.navigationBar.standardAppearance = navBarAppearance
navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
}

Ahora analizando el código se puede entender:

  • Realizo un if para comprobar si la version de iOS es la 13,
  • Luego genero una instancia de la clase UINavigationBarAppearance() **(aquí mas sobre la documentación de la clase )
    **
  • Con ese objeto declaro que el fondo sea opaco
  • Agrego el color blanco al título en sus dos versiones _(large y normal) _
  • Aplico el color que definimos conUIColor.init(named: "GreenColor") “GreenColor” es el nombre del set que creamos en el curso
  • Y aqui lo mas importante a nuestro navigationController mediante la propiedad standardAppearance y scrollEdgeAppearance le asignamos el objeto que recien creamos y configuramos

Y eso seria, con eso queda corregido para las personas que tienen Xcode 11.4+ y iOS 13+

Este es mi aporte espero les sirva.

En nuestro proyecto nos sale la siguiente advertencia (You can add an LSSupportsOpeningDocumentsInPlace entry or an UISupportsDocumentBrowser entry to your Info.plist to declare support), esto derivado de usar **fileprivate(set) ** y para que ya no nos salga lo único que hay que hacer es agregar a nuestro Info.plist la siguiente llave Supports opening documents in place de tipo Boolean y valor YES

Coloquen este codigo en su App Delegate, todas las bar ya sean comprimidas o con titulos largos van a tomar el mismo color en la app, este ejemplo aplica.

    let coloredAppearance = UINavigationBarAppearance()
    coloredAppearance.configureWithOpaqueBackground()
    coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
    coloredAppearance.backgroundColor =  UIColor.init(named: "Green Platzi")
    UINavigationBar.appearance().standardAppearance = coloredAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance

Pueden agregar código que paso otro compañero aca en el AppDelegate

//
//  AppDelegate.swift
//  PlatziFinanzas
//
//  Created by Joaquin Segovia on 13/4/22.
//

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
//        for i in 1...9999 {
//            print("\(i)")
//        }
        
        let coloredAppearance = UINavigationBarAppearance()
            coloredAppearance.configureWithOpaqueBackground()
            coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
            coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
            coloredAppearance.backgroundColor =  UIColor.init(named: "GreenColor")
            UINavigationBar.appearance().standardAppearance = coloredAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        
        
        return true
    }

    // MARK: UISceneSession Lifecycle

    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        
        
        
        
        
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
        
        
    }


}


Pueden configurar el appbar desde el storyboard marcando los checkboxes de Standard y Scroll Edge appearances y configurando el background y los estilos del title como en el video de la clase

Le tuve que dejar el color a ambos view, se mostraba mostraba la barra en blanco

Bueno otro error mas.
Se resuelve poniéndole color al View

En iOS 13 no me funcionó lo del tint color en el largetitle, lo solucioné con esta extensión:
https://stackoverflow.com/a/58361310

guard let green = UIColor(named: "Green") else {
    return
}
configureNavigationBar(largeTitleColor: .white, backgoundColor: green, tintColor: green, title: "Transactions", preferredLargeTitle: true)

¿Cómo puedo colocar un botón a un costado del titulo?