Author: Sid, iOS developer, former “experienced front-end development engineer”, working at Netease Yanxuan. Working on a book called Thinkable SwiftUI (in heavy draft)

The Session 10185: developer.apple.com/videos/play…

preface

SwiftUI’s ability to build descriptive interfaces has paved the way for Xcode to introduce many visual tools. Visual interface construction, in the early stage of web development, once popular, the most famous representative Dreamweaver. If the HTML source code is the cause, then the browser-rendered interface is the cause. The process of making changes from the final interface to the source code is very intuitive and efficient (thanks to the timely rendering of HTML). Everyone wants to visually build blocks coding, and Apple has had layouts for visual programming from the beginning — xiB, Storyboard, and still iterating. Admittedly, the Storyboard programming paradigm is not mainstream in iOS. If what you see is what you get (WYSIWYG) editors, as represented by Dreamweaver, fall because the resulting code is not of high quality, from cause to effect. One of the main reasons xiB and Storyboard are not mainstream is the complexity of the introduction of the middle tier — the XML middle tier.

If I were to rate visualization implementations: SwiftUI 8; Xib, Storyboard 3 分

SwiftUI inherits HTML’s interface description capabilities with the ability to run directly.

Visualization tools for SwiftUI

In summary, there are four main categories:

  1. SwiftUI source
  2. Canvas
  3. Inspector
  4. Library (contains custom Library objects)

Hold Command + Click callout Actions Float layer can be combined with 1, 2 appear.

SwiftUI source

The SwiftUI source code describes the hierarchy of the interface. In Xcode, we know from the code that the entry to our application is an App object, combined with a combination of View objects in SwiftUI, and finally a tree, This tree is the same as the view hierarchy for Debug in Xcode (it is not the same as the layer for internal App rendering).

.

In the Editor, in addition to manually editing the SwiftUI source code to modify the view hierarchy, you can also visually assist in generating SwiftUI source code by using the Actions float layer with Hold Command + Click. This includes changes to the Attribute Inspector for the View and Modifier, which are described in more detail later.

SwiftUI source code is all visual editing of The Source of Truth. All of these functions can be implemented in SwiftUI. Compared with it, the function of Canvas is more intuitive, but the function is limited, such as you can not delete the Modifier in the Canvas

At the same time, SwiftUI source receives imported Views, Modifiers, images and other resources from the Library by dragging or double-clicking to quickly introduce Views and bulk style changes.

Note: All changes are synchronized in the source codeCanvas 和 InspectorAnd vice versa

Canvas

Canvas is called Preview in the early beta version of Xcode 11 and, as the name suggests, is a hot Reload display of the actual SwiftUI source code. In addition to acting as a full-screen container for all preview views to render, Xcode 12 introduces the various Preview -centric capabilities, In Xcode 11, some of the environment variable modifiers we used in Preview (mainly Color Scheme, Dynamic Type), which we can implement manually in the code, are now moved to the Canvas. Add to Inspect Preview and Duplicate Preview as shortcuts.

Tip: I’ve tried using SwiftUI to Hot Reload Objective-C code, and it works on small projects.

On Canvas, you can use the Library to introduce new view elements, or you can delete them; Use Library to introduce modifiers, but cannot remove them.

Tip: Imported image resources always default to the actual image size

Select it by double-clicking on the Canvas element and modify it in Inspect on the right. If text is selected, you can modify the text content directly in the Editor. Command + D quickly copies view objects.

Also, you can use the Hold Command, Click call actions to help visually generate and modify views.

Currently, the supported actions include;

  1. Wrapped in an HStack container
  2. Wrapped in a VStack container
  3. Wrapped in a List container
  4. Wrapped in a Group (non-container)
  5. The introduction of conditions
  6. Loop n times (default 5 times)
  7. Call the Inspector for this view element (this hides the rightmost Attribute Inspector to maximize screen utilization)

Tip: There are more actions and more extract methods in the SwiftUI source Editor.

The normal display rule for Canvas is to always show the file that can be previewed in the current editor. Using Pin Preview in the lower left corner allows you to switch between different files and keep the Preview screen when it is pinned.

Tip: Quickly refresh the Canvas shortcut key Option + Command + P

There is a problem with the frame setting in Inspect Preview. There is not enough space to display the numbers. As a result, when you enter a three digit number like 300, it will be misunderstood because it will be cleared to 0.

In daily use, you may encounter problems such as Canvas not working

You need to generate a crash report, then check the.crash file, mostly runtime errors, compile errors, nowhere to throw to the developer.

Application Specific Information:
Fatal error: Unexpectedly found nil while unwrapping an Optional value: file /Users/hite/workshop/WWDC20/WWDC20/RowItem.swift, line 50
Copy the code

Attribute Inspector

The Attribute Inspector acts as a context-sensitive entry point to modify the source code and the display on the Canvas, just like the properties of other visual editors.

The default attribute displays four objects, view type, Padding, Frame, and Add Modifier. Which Add Modifier contains the most rich content, when do not know what methods of the current selected object, Add Modifier popover is a very good query entry. Xcode automatically divides the Modifier into:

  1. Control (mostly elements that respond to user events)
  2. Layout, background, size information
  3. Effect (color contrast, gradient, deformation, etc.)
  4. Event (show hiding, notification arrival, etc.)
  5. Style (default Style configuration for system components)

The obvious thing you can customize is Control, Layout, Effect, which is also an enumeration of custom Library objects that can be set as a category. For details on customizing Library objects, see Session 10649-Add Custom Views and Modifiers to the Xcode Library.

In the Inspector’s top View property, something strange is displayed. These are the parameters of the View initialization method displayed by SwiftUI by default, and some of the parameters can be changed.

In the Inspector, you can remove unwanted properties by unchecking the constraint. You can also change the view’s default style to the floating layer in the Canvas by clicking the blue X behind the option.

conclusion

In Xcode, master the Hold Command + Click(call actions), Command + Shift + L (open Library float), Command + Shift + P (re-render) Canvas) and actions, add Modifier search entry, let you write code, get twice the result with half the effort, play the maximum effectiveness of WYSIWYG visual tools.

Recommended reading

✨ explain the major changes and core strengths of WWDC 20 SwiftUI

WWDC20 10041 – What’s new in SwiftUI

WWDC20 10048 – Create complex features in SwiftUI

WWDC20 10039 – How to write a standalone App with SwiftUI?

WWDC20 10033 – Build SwiftUI views for widgets

WWDC20 10037 – SwiftUI App Essentials

Limited welfare

The content of this article is from WWDC20 Internal Reference. I recommend this column here.

The WWDC Internal Reference series was created by senior Driver Weekly, Knowledge Collection, and SwiftGG, several technology organizations. I’ve been doing it for a couple of years. It’s been good. Mainly for the annual WWDC content, do a selection, and call on a group of top Internet iOS developers, combined with their own actual development experience, Apple documents and video content to do the second creation.

There are 213 sessions this year. WWDC20 Internal Reference selected 135 of these sessions, and the column has produced more than 100 articles. It’s on sale now. It only costs 29.9 yuan. It’s a great deal.

See article also not enough friends, to subscribe to the WWDC20 inside ~ https://xiaozhuanlan.com/wwdc20 to continue reading

Pay attention to our

We opened an official account “Senior Driver Technology Weekly”, which will push news when each issue is released. Welcome to follow.