El sistema de estilo se refiere a algunas especificaciones refinadas de las especificaciones visuales del diseño de la interfaz de usuario. Como el color general, la fuente y el tamaño del proyecto.
El significado del sistema de estilo para el desarrollo de aplicaciones
-
Después de que el diseñador de la interfaz de usuario haya emitido la especificación visual general de la interfaz de usuario para el proyecto, desarrolla y refina el sistema de estilo para tener una mejor comprensión general de la visión general. Para los diseñadores de UI, clasifique las especificaciones visuales, defina cuáles son las reglas generales, cuáles son las reglas individuales, cuáles son las reglas básicas y cómo operar las reglas básicas; al desarrollar y proporcionar interfaces de estilo, debe poder Garantizar la escalabilidad y legibilidad. Después de tener una comprensión profunda de las especificaciones visuales, las especificaciones visuales diseñadas serán más útiles y robustas.
-
En el trabajo diario, es muy importante lograr rápidamente el efecto. Esperamos que nuestro estilo:
-
Reutilizable Si el borrador visual se implementa de acuerdo con las especificaciones originales, las páginas de los nuevos requisitos también se pueden construir rápidamente utilizando los estilos existentes, al igual que los bloques de construcción.
-
Fácil de mantener Y en el trabajo real, lo más iterativo en una página específica es probablemente la optimización visual. Si se trata del sistema de estilo utilizado: cambie de dos líneas a tres líneas, agregue un icono en la esquina superior derecha del botón, mueva todo el bloque de descripción de texto a la derecha, etc. Cuando las necesidades cambien, si puede implementarse rápidamente, en lugar de requerir un cambio estructural importante (esto es fácil Se resuelven nuevos problemas), entonces significa que la división del sistema de estilo y la interfaz de usuario está orientada a los cambios en los requisitos. Puede manejar la mayoría de ellos (adiciones y cambios en la demanda, es un componente bien diseñado.
Sistema de estilo en desarrollo iOS
El toque de cacao no proporciona la gramática del sistema de estilo. En general, puede encapsular una capa por sí mismo. La mayor parte de la encapsulación es relativamente simple. Por ejemplo, solo el botón de la aplicación encapsula la clase de fábrica; o solo se encapsula el tamaño de fuente, la fuente y el color del conjunto de etiquetas, y no se forma ningún otro sistema de estilo de encapsulación. La razón es que Cocoa Touch no consideró el uso de objetos para representar un conjunto de atributos al comienzo de su diseño, y no existía el concepto de diseñar un sistema de estilo, lo que hacía más difícil encapsular e implementar un sistema de estilo.
SwiftUI-CSS
- SwiftUI trae la experiencia de desarrollo de interfaz descriptiva a iOS, y su sintaxis funcional y métodos de objeto de atributo hacen posible usar Swift-CSS para implementar el sistema de estilo en SwiftUI.
La sintaxis de cadena en SwiftUI es la realización de llamadas a funciones funcionales. Las entidades SwiftUI se dividen en View y ContentModifier. El texto ("g_kumar") es responsable de la estructura de la vista; .font (.title) agrega estilo de atributo
Text("g_kumar")
.bold()
.font(.title)
Text("Notifications: \(self.profile.prefersNotifications ? "On": "Off" )")
Text("Seasonal Photos: \(self.profile.seasonalPhoto.rawValue)") Text("Goal Date: \(self.profile.goalDate, formatter: Self.goalFormat)")- Encapsulación de estilo. El objeto CSSStyle encapsula el objeto de estilo, y luego el estilo se inserta en la operación de la función a través del modificador addClassName, y funciona a la perfección con otros eventos, notificaciones y estilos (.frame \ .resizable).
// without SwiftUI-CSS
Image("image-swift")
.resizable()
.scaledToFit()
.frame(width:100, height:100) .cornerRadius(10) .padding(EdgeInsets(top: 10, leading: 0, bottom: 15, trailing: 0)) // with SwiftUI-CSS let languageLogo_clsName = CSSStyle([ .width(100), .height(100), .cornerRadius(10), .paddingTLBT(10, 0, 15,0) ]) Image("image-swift") .resizable() .scaledToFit() .addClassName(languageLogo_clsName)Entre ellos, languageLogo_clsName es el nombre del estilo del logotipo. Puede reutilizar este estilo directamente en otros logotipos de la página.