Pantalla home: logo y barra de búsqueda

¿Cómo se implementa la interfaz de usuario de la pantalla principal?

Para desarrollar la interfaz de usuario de una pantalla principal, es fundamental partir desde la parte superior del diseño que incluye un logotipo, una barra de búsqueda y el fondo de pantalla. Aquí exploramos cómo implementar estos elementos en el código utilizando SwiftUI, prestando particular atención a la barra de búsqueda, que cambia de color al intentar escribir.

¿Cómo estructurar el logotipo y la barra de búsqueda?

• Elemento del logotipo: La imagen del logotipo ya está creada en el ContentView, por lo que simplemente se añade a la vista principal como una imagen dentro del VStack.

Image("nombreDelLogo")
    .resizable()
    .scaledToFit()

• Barra de búsqueda: La barra está compuesta por una imagen de lupa y un campo de texto (TextField) dentro de un HStack. Además, utiliza un modificador que cambia el color del ícono de lupa con base en si el campo de texto está vacío o no.

HStack {
    Button(action: {
        // Acción a implementarse para la búsqueda
    }) {
        Image(systemName: "magnifyingglass")
    }
    .foregroundColor(textoBusqueda.isEmpty ? .yellow : .customDarkCyan)
    
    TextField("Buscar un video", text: $textoBusqueda)
        .foregroundColor(.white)
}
.padding([.top, .leading, .bottom], 11)
.background(Color.blueGray)
.clipShape(Capsule())

¿Cómo gestionar el color dinámico del ícono de búsqueda?

Para cambiar el color del ícono basado en la entrada del usuario:

1. Define una variable usando @State para guardar el texto introducido por el usuario.

@State private var textoBusqueda: String = ""

2. Implementa un modificador foregroundColor para la imagen que cambia de color según el contenido del TextField.

3. Define los colores en Swift:

extension Color {
    static let customDarkCyan = Color("DarkCyan")
    static let blueGray = Color("BlueGray")
}

¿Qué lógica desarrollar para la acción de búsqueda?

La función de búsqueda se encarga de realizar una determinada acción cuando el usuario presiona el botón de búsqueda. Aquí se propone simplemente imprimir el término en consola, un buen punto de partida para luego integrar funcionalidades más completas:

func buscar() {
    print("El usuario está buscando \(textoBusqueda)")
}

¿Cuál es el siguiente paso tras construir la barra de búsqueda?

Una vez que la barra de búsqueda está completamente funcional, el siguiente paso implica expandir el proyecto hacia abajo creando vistas para las imágenes y desarrollando una estructura que permita al usuario interactuar con cada una de ellas. Esto abrirá la oportunidad para llevar la navegación a pantallas de reproducción de video específicas. Se fomenta a los desarrolladores a seguir avanzando en esta línea, ya que las pequeñas funcionalidades suman valor al proyecto y enriquecen la experiencia del usuario.