The style system refers to some specifications refined from the visual specifications of UI design. Such as the overall color, font and size of the project
The meaning of style system for App development
-
After the UI designer has issued the overall UI visual specification for the project, it develops and refines the style system to have a better overall grasp of the overall vision. For UI designers, sort out the visual specifications, define which are the general rules, which are the individual rules, which are the basic rules, and how to operate the basic rules; when developing and providing style interfaces, you need to be able to Ensure scalability and legibility. After having an in-depth understanding of the visual specifications, the designed visual specifications will be more useful and robust.
-
In daily work, it is very important to quickly achieve the effect. Hope our style:
-
Reusable. If the visual draft is implemented according to the original specifications, the pages in the new requirements can also be quickly built using the existing styles, just like building blocks.
-
Easy to maintain. And in actual work, the most iterative on a specific page is probably visual optimization. If the style system used is dealing with: change from two lines to three lines, add an icon in the upper right corner of the button, move the entire text description block to the right, etc. When the needs change, if it can be implemented quickly, rather than requiring a major structural change (this is easy New problems are solved), then it means that the division of style system and UI interface is oriented to changes in requirements. Can handle most of them (additions and changes in demand, is a well-designed component.
Style system in iOS development
Cocoa touch does not provide the grammar of the style system. Generally, it may encapsulate one layer by itself. Most of the encapsulation is relatively simple. For example, only the button in the App encapsulates the factory class; or only the Label set font size, font, and color are encapsulated, and no further encapsulation style system is formed. The reason is that Cocoa touch did not consider using objects to represent a set of attributes at the beginning of its design, and there was no concept of designing a style system, which made it more difficult to encapsulate and implement a style system.
SwiftUI-CSS
- SwiftUI brings the descriptive interface development experience to iOS, and its functional syntax and attribute object methods make it possible to use Swift-CSS to implement the style system in SwiftUI.
The chain syntax in SwiftUI is the embodiment of functional function calls. SwiftUI entities are divided into View and ContentModifier. Text ("g_kumar") is responsible for the view structure; .font (.title) adds attribute style
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)")- Style encapsulation. The CSSStyle object encapsulates the style object, and then the style is inserted into the function operation through the addClassName modifier, and it works seamlessly with other events, notifications, and styles (.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)Among them, languageLogo_clsName is the style name of the logo. You can reuse this style directly in other logos on the page.