Adaptación de vistas según dispositivo en Xcode y SwiftUI

Curso de SwiftUI: Porteo y Ciclo de Vida de Aplicaciones

Contenido del curso

Introducción

1
Desarrollo de Apps para iPadOS con Subi UI y SWIFT
00:57 min

Proceso de porteo de una app iOS a iPadOS

Proceso de mejora como desarrollador de apps con SwiftUI

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:07

Adaptación de vistas según dispositivo en Xcode y SwiftUI

Curso de SwiftUI: Porteo y Ciclo de Vida de Aplicaciones

Clase 7 de 11

Clase 7 / 11

Recursos

¿Cómo adaptar las vistas de tu aplicación según el dispositivo en Swift?

Adaptar nuestras aplicaciones para que se vean correctamente en distintos dispositivos es una habilidad esencial en el desarrollo de software. Cada dispositivo, ya sea un iPad o un iPhone, tiene diferentes tamaños y resoluciones de pantalla. En esta clase, aprenderás a ajustar los componentes visuales de tu app para optimizar la experiencia del usuario, independientemente del dispositivo que estén utilizando.

¿Cómo identificar el dispositivo en uso en Swift?

El primer paso en este proceso es identificar el dispositivo en el que la aplicación se está ejecutando. Para esto, haremos uso del UIDevice en Swift:

var device = UIDevice.current.model

Este fragmento de código devolverá un string indicando el modelo del dispositivo. Por ejemplo, si el dispositivo es un iPad, devolverá "iPad". Esta información nos será útil para tomar decisiones sobre cómo mostrar las vistas o elementos de la interfaz de usuario.

¿Cómo configurar las vistas según el dispositivo?

Una vez que hemos identificado el dispositivo, podemos usar una estructura de control como if-else para decidir cómo presentar los elementos visuales. A continuación, se muestra cómo se podría ajustar una serie de botones en un HStack dependiendo de si el dispositivo es un iPad:

if device == "iPad" {
    // Configuración para iPad
    Button(action: {}) {
        Text("First Person Shooter")
            .frame(width: 320, height: 180)
    }
    .padding()
    // Continúa con la configuración específica para iPad...
} else {
    // Configuración estándar para otros dispositivos
    Button(action: {}) {
        Text("First Person Shooter")
            .frame(width: 160, height: 90)
    }
    .padding()
    // Configuración estándar para otros botones...
}

¿Qué consideraciones tener al utilizar UI Device?

Cuando utilizamos UIDevice para ajustar nuestra app a diferentes dispositivos, es importante considerar:

Consistencia visual: Asegúrate de que los cambios realizados no afecten negativamente la consistencia del diseño de la aplicación.
Pruebas extensivas: Comprueba cómo se ven las vistas en todos los dispositivos posibles usando simuladores o dispositivos físicos.
Escalabilidad: Diseñar interfaces que respondan bien a una amplia gama de tamaños de pantalla sin necesidad de ajustes excesivos.

Consejos para mejorar tu implementación

Utiliza diseños responsivos: Intenta usar Auto Layout o SwiftUI para crear interfaces que se adapten automáticamente a diferentes tamaños de pantalla.
Experimenta y ajusta: Usa el simulador de Xcode para ver rápidamente el impacto de tus cambios en distintos dispositivos.
Explora el uso de Switch: Aunque en este ejemplo se usa if-else, también puedes considerar utilizar una estructura switch para manejar múltiples modelos específicos o casos únicos.

El uso de UIDevice abre posibilidades para personalizar y optimizar la usabilidad de tus aplicaciones. ¡Te animo a implementar estos conceptos y compartir tus resultados! Recuerda, la práctica hace al maestro, y ajustar estas vistas puede hacer una gran diferencia en la experiencia del usuario. Mantente motivado y sigue aprendiendo a adaptar tus aplicaciones para cada tamaño de pantalla.

Joaquin Segovia

Hace 5 años

Dejo mi aporte para mejor resolución y no repetir código::

En la primer vista que llame su app, por ejemplo el ContentView.swift, crear la variable al inicio y fuera de todo struct

var dispositivo = UIDevice.current.model

Con esta variable se puede saber el dispositivo desde cualquier punto de la app, ya que es una var global.

Luego en el inicio del modulo agregar

    @State var medidaCategoriaBoxWidth:CGFloat=160
    @State var medidaCategoriaBoxHeight:CGFloat=120
    @State var medidaCategoriaCornerRadious:CGFloat=8
    @State var medidaCategoriaImageWidth:CGFloat=30
    @State var medidaCategoriaImageHeight:CGFloat=30
    @State var medidaCategoriaFontSizeType:Font=Font.body

Luego en un nuevo onAppear en el HStack de Categorías agregar

.onAppear(perform: {
                    if(dispositivo=="iPad"){
                        medidaCategoriaBoxWidth=300
                        medidaCategoriaBoxHeight=220
                        medidaCategoriaCornerRadious=18
                        medidaCategoriaImageWidth=70
                        medidaCategoriaImageHeight=70
                        medidaCategoriaFontSizeType=Font.title
                    }else{//iPhone
                        medidaCategoriaBoxWidth=160
                        medidaCategoriaBoxHeight=120
                        medidaCategoriaCornerRadious=8
                        medidaCategoriaImageWidth=30
                        medidaCategoriaImageHeight=30
                        medidaCategoriaFontSizeType=Font.body
                    }
                })

Luego, en cada botón o card de categoría

Button(action: {}, label: {
                        ZStack {
                            RoundedRectangle(cornerRadius:medidaCategoriaCornerRadious).fill(Color("blue-grey")).frame(width: medidaCategoriaBoxWidth, height: medidaCategoriaBoxHeight, alignment: .center
                            )
                            
                            VStack(alignment: .center){
                                Image("open-world-icon").resizable().frame(width: medidaCategoriaImageWidth, height: medidaCategoriaImageHeight, alignment: .center).padding(.top, 10)
                                Text("OPEN WORLD")
                                    .font(medidaCategoriaFontSizeType)
                                    .fontWeight(.heavy)
                                    .foregroundColor(Color("cian"))
                                    .frame(maxWidth: .infinity, alignment: .center).padding(.bottom,10)
                            }.padding(EdgeInsets(top: 11, leading: 11, bottom: 11, trailing: 11))
                        }
                    })

Listo, con eso queda dinamico.

Tulio Junior Rangel Nuñez

Hace 4 años

Está excelente

Introducción

Desarrollo de Apps para iPadOS con Subi UI y SWIFT

Proceso de porteo de una app iOS a iPadOS

Adaptación de Aplicaciones iOS a iPadOS con SwiftUI

Sistema de Puntos vs. Píxeles en Desarrollo iOS

Adaptación de Assets en iOS para Diferentes Resoluciones

Modificadores de Offset y Position en SwiftUI

Uso de Geometry Reader para Interfaces Responsivas

Adaptación de vistas según dispositivo en Xcode y SwiftUI

Proceso de mejora como desarrollador de apps con SwiftUI

Ciclo de Vida de Aplicaciones Móviles en SwiftUI

Ciclo de Vida de una Aplicación en SwiftUI: Estados y Manejo

Ciclo de Vida de Vistas en SwiftUI: onAppear, onChange y onDisappear

Recomendaciones para Desarrolladores iOS: UIKit y SwiftUI

Adaptación de vistas según dispositivo en Xcode y SwiftUI

Progreso del curso

Introducción

Proceso de porteo de una app iOS a iPadOS

Proceso de mejora como desarrollador de apps con SwiftUI

Recursos

Recursos