ios ui 开发
在本文中，我将讨论： (In this article I will talk about:)
- Problems we’re trying to solve concerning UI development 我们正在尝试解决的有关UI开发的问题
- Playground Driven Development Approach 游乐场驱动的开发方法
- Gallery Application Approach 画廊申请方法
- Xcode 11 + Canvas Xcode 11 +画布
找出问题 (Identifying the problem)
In order to improve UI development experience, specifically testability and maintainability, we decided to isolate UI from business/presentation logic, collect all UI representations at the same place, ensure that we don’t create UI duplications, break components down into smaller parts as they can be reused while building other elements of the app, and of course fix the biggest inconvenience which lies in the compiling part, and takes the most time.
为了改善UI开发体验，特别是可测试性和可维护性，我们决定将UI与业务/表示逻辑隔离，在同一位置收集所有UI表示，确保我们不创建UI重复项，将组件分解为较小的部分，它们可以在构建应用程序的其他元素时被重用，并且当然可以解决最大的不便之处，那就是在编译部分，并且花费了最多的时间。
Below I provide an overview — highlights and challenges of approaches we have tried.
下面，我提供了一个概述-我们尝试过的方法的重点和挑战。
斯威夫特游乐场 (Swift Playgrounds)
Swift playgrounds were introduced several years ago, and it was a huge step forward for iOS development, it does provide a lot of benefits.
Swift游乐场是在几年前推出的，这对iOS开发是一个巨大的进步，它确实提供了很多好处。
Advantages (in context of UI development):
优点 (在UI开发方面)：
- Playgrounds give quick feedback! 游乐场给您快速反馈！
In Swift Playgrounds you can create small programs called “playgrounds” on the left side of the screen and instantly see the results on the right.
在Swift Playgrounds中，您可以在屏幕左侧创建名为“ playgrounds”的小程序，并在右侧立即查看结果。
- Playgrounds save you time! 游乐场可以节省您的时间！
As playgrounds are completely synchronous by default you don’t need to build the whole app. In order to get this you just need to build the framework, it’s unnecessary to execute thousands of iterations through the application in order to find actual result.
由于默认情况下游乐场是完全同步的，因此您无需构建整个应用程序。 为了做到这一点，您只需要构建框架，就不必通过应用程序执行数千次迭代来查找实际结果。
- Playgrounds have useful hooks! 操场上有有用的钩子！
Test locale (if you want to test how values change for different regions). You can find an example here.
测试语言环境(如果要测试不同区域的值如何变化)。 您可以在此处找到示例。
Trait Collection (in order to test the traits, such as horizontal and vertical size class, display scale and user interface idiom, that describe the current environment of the object. In order to simulate those behaviours you need to use setOverrideTraitCollection(collection:childViewController:)
特质收集 (为了测试描述对象当前环境的特征，例如水平和垂直大小类，显示比例和用户界面习惯用法。为了模拟这些行为，您需要使用setOverrideTraitCollection(collection：childViewController :)
Disadvantages:
缺点：
- There is no Debugger! Meaning you can not add breakpoints to inspect the state of execution; 没有调试器！ 这意味着您不能添加断点来检查执行状态；
Stack trace is not available if something went wrong;
如果出现问题，堆栈跟踪将不可用。
- You can not inspect the 3D view model of currently selected window what is very useful when you’re working on new UI or when you need to find/understand/fix UI inconsistency; 您无法检查当前所选窗口的3D视图模型，这在您使用新UI或需要查找/理解/修复UI不一致时非常有用。
- You can not check if playgrounds build succeeded on CI (as you need to run them manually); 您无法检查Playground是否在CI上成功建立(因为您需要手动运行它们)。
- You need to compile the module every time you make changes in any file it’s uses, otherwise the changes won’t be reflected in your Playground. 每次在其使用的任何文件中进行更改时，您都需要编译该模块，否则更改将不会反映在您的Playground中。
With all the above we have decided that even though there are few advantages to Swift Playgrounds we often found ourselves in need to run the app to be able to debug or inspect view hierarchy.
综上所述，我们已经决定，尽管Swift Playgrounds的优势不多，但我们经常发现自己需要运行该应用程序才能调试或检查视图层次结构。
That’s why we decided to have something in between. And look into the Gallery Application approach.
这就是为什么我们决定在两者之间做些什么。 并研究Gallery应用程序方法。
The Gallery Application is a small app that does not have any business logic of the main app, in fact it does not import anything more then our UI module, and it contains the examples of all UI elements that we have in the main app.
Gallery应用程序是一个小型应用程序，它没有主应用程序的任何业务逻辑，实际上，它不导入比我们的UI模块更多的内容，并且包含主应用程序中所有UI元素的示例。
画廊应用优势 (Gallery Application Advantages)
- Less time for build (because now you build just UI module); 更少的构建时间(因为现在只构建UI模块)；
- Available Xcode Debugger (helps you understand the source of crash and provides valuable reports when they occur); 可用的Xcode调试器(可帮助您了解崩溃的原因并在崩溃发生时提供有价值的报告)；
- You can distribute the application to developers/designers for them to see how components and animations look in action. Now it’s very quick and simple to find what components already exist and how to use them, what is very useful for new starter or for large teams; 您可以将应用程序分发给开发人员/设计人员，让他们查看组件和动画的实际效果。 现在，可以快速，轻松地找到已经存在的组件以及如何使用它们，这对于新手或大型团队非常有用；
- CI can check if Gallery Application is not broken; CI可以检查Gallery Application是否未损坏；
- If you work with components that have multiple states, you can collect and display them on the same screen, for example: loading, loaded, error (see screenshot below). 如果使用具有多种状态的组件，则可以收集它们并将其显示在同一屏幕上，例如：加载，加载，错误(请参见下面的屏幕截图)。
To iterate quickly on Gallery Application we use Badoo Gallery it provides us with a small abstraction to reduce the amount of boilerplate code that we need to write to add a new item to the gallery.
为了快速浏览Gallery应用程序，我们使用Badoo Galler，它为我们提供了一个小的抽象，以减少为将新项目添加到Gallery所需编写的样板代码。
Xcode 11 + Canvas —交互式界面编辑器 (Xcode 11 + Canvas — an interactive interface editor)
- Xcode now supports two-way design, that means that everything you edit on canvas is completely in sync with the code. Code is instantly visible as a preview as you type, and any change you make to that preview immediately appears in your code; Xcode现在支持双向设计，这意味着您在画布上编辑的所有内容都与代码完全同步。 键入时，代码将立即显示为预览，并且您对该预览所做的任何更改都会立即显示在您的代码中；
- You don’t need to build an application in order to get the results. (If you make changes in the same file where a preview is defined); 您无需构建应用程序即可获得结果。 (如果您在定义预览的同一文件中进行更改)；
You can use debugger with previews;
您可以将调试器与预览一起使用；
- The extension below helps you preview designs in multiple screen sizes at the same time. 以下扩展名可帮助您同时预览多种屏幕尺寸的设计。
Let me give you an example:
让我举一个例子：
There are some issue we encountered with Xcode Previews:
Xcode Previews遇到一些问题 ：
- Sometimes it doesn’t display font correctly; 有时，它无法正确显示字体。
- Issues with CocoaPods. CocoaPods的问题。
If you’re using CocoaPods as a dependency manager you might run into the same issues that we are, there is a thread on the Github to make Xcode previews work with CocoaPods.
如果您将CocoaPods用作依赖项管理器，则可能会遇到与我们同样的问题，Github上有一个线程可以使Xcode预览与CocoaPods一起使用。
TLDR you would need to add this script to your Podfile.
TLDR，您需要将此脚本添加到Podfile。
Of course Canvas and SwiftUI are not perfect now, but I believe it will become better overtime, that’s why we continue using Gallery App in order to make sure all components match design.
当然，Canvas和SwiftUI现在还不完美，但是我相信随着时间的推移它将变得更好，这就是为什么我们继续使用Gallery App来确保所有组件与设计匹配的原因。
有用的链接： (Useful links:)
iOS at Kickstarter: Playground-Driven Development
Swift playgrounds tips and tricks
关于我自己： (About Myself:)
I am iOS Developer at @Moonpig with over 3 years of experience, I am very passionate about writing highly readable, clean, maintainable source code same as implementing new technologies to maximize development efficiency.
我是@Moonpig的 iOS开发人员，拥有超过3年的经验，我非常热衷于编写高度可读，干净，可维护的源代码，与实施新技术相同，以最大程度地提高开发效率。
翻译自: https://medium.com/moonpigtech/modern-approaches-to-ui-development-in-ios-7a76426a8a17
ios ui 开发
扫一扫
1950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
