什么是 Panda

Panda 是一个异步渲染和布局框架，可用于实现高性能表格视图。

Panda 由 3 个不同组件组合而成

1. Cassowary：约束求解的核心算法
2. Layoutable：类似于 'AutoLayout' 的 API
3. Panda：异步显示节点

为什么使用 Panda

谈到异步渲染，许多开发者会考虑 Texture，实际上，Panda 从 Texture 中学习了很多东西，Panda 的渲染过程可以看作是 Texture 的简化版。但 Panda 也有自己的优势。Panda 使用 'AutoLayout' 进行框架计算，与 Texture 的 Flexbox 相比，学习起来更为简单。Panda 更轻量级，使用方法更接近系统 API，集成成本更低。所以，如果您喜欢 Swift，喜欢 AutoLayout，想要一个高帧率的表格视图且不想花费太多，Panda 就是您的选择。

特性

• 异步渲染视图
• 具有背景线程使用能力的类似于 AutoLayout 的 API
• 类似于现有的 UIView 子类
• 纯 Swift 实现

要求

• iOS 8.0+
• Swift 4.2
• xcode 10.0

安装

Carthage

Carthage 是 Cocoa 应用程序的集中式依赖管理器。要安装 Carthage 工具，可以使用 Homebrew。

$ brew update
$ brew install carthage

要使用 Carthage 将 Panda 集成到您的 Xcode 项目中，请在其 Cartfile 中指定。

github "https://github.com/nangege/Panda" "master"

然后，运行以下命令构建 Panda 框架

$ carthage update

最后，您需要手动设置您的 Xcode 项目以添加 Panda、Layoutable 和 Cassowary 框架。

在您的应用程序目标的“常规”设置选项卡中，在“链接框架和库”部分，从磁盘上的 Carthage/Build 文件夹拖放您想要使用的每个框架。

在您的应用程序目标的“构建阶段”设置选项卡中，点击“+”图标，选择“新建运行脚本阶段”。创建一个包含以下内容的运行脚本

/usr/local/bin/carthage copy-frameworks

并在“输入文件”下添加您想要使用的框架的路径

$(SRCROOT)/Carthage/Build/iOS/Panda.framework
$(SRCROOT)/Carthage/Build/iOS/Layoutable.framework
$(SRCROOT)/Carthage/Build/iOS/Cassowary.framework

有关如何使用 Carthage 的更多信息，请参阅其 项目页面。

用法

1. 基础

导入 Panda 和 Layoutable，然后像 UIKit 一样编写代码

import Panda
import Layoutable

// initiallize 
let node = ViewNode()
let textNode = TextNode()

// addSubnode
node.addSubnode(textNode)

// update properties
textNode.text = "test"
node.backgroundColor = .red


// Layout
node.size = (100,100)
textNode.center = node

view.addSubview(node.view)

与 UIKit 的比较

做一些区别以便 Panda 更易于使用。例如，ControlNode 提供了一个 hitTestSlop 来扩展点击测试区域。ButtonNode 提供了 space、layoutAxis、textFirst 以便于控制按钮、图片和文本的布局。

2. 后台线程使用

如果代码在主线程中运行，节点的内容和外观将自动更新。但是，如果您想从后台进行布局并缓存框架，请调用 layoutIfNeeded()，然后 var layoutValues: LayoutValues 将是您所希望的内容，如果您的节点层次结构没有发生变化，那么只需将它作为参数传递给主线程中 apply(_ layout: LayoutValues)。

3. 集成现有的 UIView 子类

使用 LayoutNode 作为占位符，您可以使用自己的 UIView 并利用节点布局。

示例

  // XXVideoView will be initialized in main thread when first visit
  let videoNode = LayoutNode<XXVideoView> {
    let view = XXVideoView()
    return view
  }
  let node2 = ViewNode()
  node.left == node2.left

4. 布局

   访问 Layoutable 了解更多Layout API信息
   访问 PandaDemo 查看完整演示

了解问题

• 触摸处理存在问题
• 暂时不支持移除节点，可尝试使用隐藏作为替代

待做事项

• 单元测试
• 节点可移除
• 文本渲染缓存控制