WWDC20 10149 打造更容易 Preview 的 SwiftUI 应用

首发自 https://xiaozhuanlan.com/topic/4718293506,重新创作于 Structure your app for SwiftUI previews

简介

在开发中使用 SwiftUI Preview 功能,帮助我们开发更灵活、可维护、易懂的 Apps。 本文将介绍一些小技巧,改进提升项目工程的 Preview 体验。如,如何一次性 Preview 多个文件;如何管理数据流;如何使用样例代码提升 Preview 效率。 本文将介绍一些方法,分析数据模型,帮助你定义视图的输入,让这些视图更易可视化编辑、更具有可测性。阅读本文需要你已经熟悉 SwiftUI和 SwiftUI Preview(可参考阅读 “Visually Edit SwiftUI Views” from WWDC20

WWDC20 10185 SwiftUI 的可视化编辑工具

首发自小专栏, 重新创作自 Session,Visually edit SwiftUI views

前言

SwiftUI 带来的描述性构建界面能力,为 Xcode 引入诸多的可视化工具奠定了基础。可视化界面搭建,早期在网页开发中,曾经流行过,最著名的代表 Dreamweaver。如果把 html 源码视为因,那么浏览器渲染的界面则为果。从最后的界面上修改,反馈到源代码,这个过程非常直观,也高效(得益于 html 可以及时渲染)。人人都想可视化搭积木式编码, Apple 在可视化编程上从一开始就有布局—— xib、Storyboard ,至今还在迭代。但不得不承认,Storyboard 编程范式在 iOS 领域并不是主流。如果 Dreamweaver 为代表的所见即所得(WYSIWYG )编辑器没落是因为从因到果逆方向,生成的代码质量不高。而 xib、Storyboard 无法成为主流的一大原因是中间层——xml 中间层的引入的复杂度。

WWDC20 10649 为 Xcode Library 添加自定义 views 和 modifiers

首发于 小专栏 https://xiaozhuanlan.com/topic/6920751348

前言

Xcode Library 最早是作为 Storyboard (xib)的配套功能引入。在制作 Storyboard 时,开发者打开右下角的 Object Library,从中选择合适的组件,通过拖拽快速引入组件对象。它和所有可视化搭建系统一样,是组件展示区,方便开发者快速浏览引入。后面的 Xcode 版本慢慢引入了色盘、图片资源等功能,到 Xcode10 时, Object Library 的重要性进一步提高,位置从右下角可能被隐藏的位置提升到 Xcode 右上角功能 toolbar 按钮区,常驻界面。到了 Xcode11, Object Library 升级为 Library,成为添加某些对象等的总入口,包括代码片段、文档。

曲折的“修改 AttributeText 的文字”尝试

需求

在商品列表的设计中,很多商品卡片的商品名称需要换行。效果如,商品图 如“耐穿又耐看, 男式基础休闲牛津纺衬衫”, 用 UILabel 实现。但样式不能用以下代码来实现,

这个春天的口罩故事 策划稿

主题

严选利用自身的资源,紧急上线口罩,支持全国人民的抗击疫情

故事框架

自1月22日疫情大爆发,技术部门和兄弟部门同事,放弃春节假期重新回到工作岗位,协调资源,加班加点为全国(包括湖北专供)第一时间提供珍贵的口罩的故事。

如何 HotReload Objective C 代码——用 SwiftUI

原文发表于:2020.01.07 @ 简书

SwiftUI 和 Xcode 11

自从 SwiftUI 推出之后,它带来左边代码右边实时预览的特性,让一直苦于 Objective-C 耗时、低效、繁琐的开发流程的我很羡慕。但是 SwiftUI 需要 Swift 工程运行在 iOS 13 的 target 上才能使用。目前国内大部分的 App 基本都是 Objective-C,最低支持 iOS 9 版本的现状,阻止进一步将 SwiftUI 引入到实际工程里。

直到最近重温 WWDC2019 Mastering Xcode Previews,其中有一句

Finally, you have seen how to use previews not just with SwiftUI and not just with Swift, but with all of the source files that Xcode understands written against UIKit, AppKit, and WatchKit.

让我有了个想法——既然 Xcode 认识 Objective-c,那是不是也支持 Objective-c 的预览?接下来,我在使用Xcode Preview for Objective-C等关键字 Google 了一番,居然没找到类似的方案,有点怀疑是不是搜索姿势不对?

在经过一些尝试,有一些初步的成果,B 站视频演示 使用 Xcode Preview 实现普通的 UIView 的 HotReload。 下面以复盘的方式来介绍下实现的过程。

iOS 13 darkmode 适配的动态颜色 cheatsheet

深色模式,作为 iOS 13 最大的新特性,从设计者角度,带来设计体系、颜色、材质、系统控件、SF Symbols 等若干方面的新的变化;对于开发者来讲,我们熟知的适配;
– 屏幕尺寸
– 屏幕方向
– View 渲染阶段(指 viewDidLoad 和 viewDidAppear 两个阶段,view 的尺寸是变化的)
– iOS SDK 适配

等适配维度,而后又多了一个维度,
– 外观模式(dark or light)

SwiftUI: 苹果的一次天才尝试

时间回到一个月前的 WWDC 19 现场,当苹果宣布推出 SwiftUI 时,所有观众为其优雅的语法、 强大的实时预览 preview特性而欢呼雀跃,在发布之后几天,各路人马推入巨大的热情,研究 SwiftUI DSL 语言设计、Swift5.1 的新特性、 Combine 库的使用方法,产出了很多的文章。熟悉 Swift 语言的会从 Swift 演进的角度对新特性的来由、场景用法等深度解析;熟稔动画的作者,则用 SwiftUI 用极简的代码玩出酷炫的效果;以前玩 reactive-cocoa 类型开发模式的大佬,则对 Combine 库做了深入的探讨。

作者对 Swift 语言是新手、水平有限,这篇文章不会深入的讨论 Swift 语法特性和 Combine 的使用及实现原理。而是分享在这几星期期间,一边学习其他人的文章,一遍使用 SwiftUI 构建网易严选的 iPad 版本 —— YanxuanHD(源码见参考链接)过程中思考和感悟。从最初的惊喜到迷茫、再到困惑直到若有所得,拙作在这里抛砖引玉。