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 鈥淏lack鈥 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: 鈥淕reenColor鈥)
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") 鈥淕reenColor鈥 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?