WWCollapsibleForm 0.1.0

WWCollapsibleForm 0.1.0

×

由 Enrique Ricalde 维护。

WWCollapsibleForm 0.1.0

  • 作者：
  • Enrique Ricalde

WWCollapsibleForm

Version License Platform

基于 jquery ui 的可折叠面板的想法，并仅为此目的创建，用于构建步骤向导，可折叠表单有助于用户进入一步流程，直到完成向导并获得所有选项选择。

示例

要运行示例项目，首先克隆仓库，然后从根目录运行 pod install。该示例项目也很有趣，因为它使用了 VIPER 和 MVP 来展示如何在同一项目中设置架构模式。

安装

WWCollapsibleForm 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile 中：

pod "WWCollapsibleForm"

屏幕截图

基本用法

该部件可以通过更改视图中子类的类和模块来在故事板/用户界面中使用。只需选择一个视图中，转到身份检查器，然后在自定义类中添加WWCollapsibleForm作为类和模块属性。

接下来，应该从WWSection类创建对象以添加部分。对象需要一个模板作为标题、条目和选中标题，当选中条目时。

所有模版都将是从WWViewRepresentation实例化。

示例

let section : WWSection = WWSection(header: WWViewRepresentation(headerView: Header()),
                                            template: WWViewRepresentation(view: CellView()),
                                            selectedHeader: WWViewRepresentation(headerView: SelectedHeader()))

条目视图需要继承自WWItemView，头部视图应该继承自WWHeaderView。最后，选中的头部继承自WWSelectedHeaderView。注意：这些类都不继承自UITableViewCell或UICollectionViewCell。它们是纯UIView

接下来，该部分将期望类型为WWDataObject的数据对象来显示条目。有三种数据对象类型

对象需要在视图加载时加载。

WWTemplateDataObject

此对象将简单地使用节点的模板进行渲染。

section.appendData(data: WWTemplateDataObject())

WWNonTemplateDataObject

此对象将从视图获取自己的模板。

section.appendData(data: WWNonTemplateDataObject(view: AlternateCell()))

视图需要继承自WWItemView。

WWSubGroupDataObject

此对象将在一个部分或另一个子组内部创建一个子组，并且需要一个标题和项目模板。它的功能类似于部分，但它没有相同的操作能力，并且选定的选项将与部分相关。

let subGroup : WWSubGroupDataObject =  WWSubGroupDataObject(template: WWViewRepresentation(view: CellView()), headerTemplate : WWViewRepresentation(view: CellView()))
subGroup.appendData(object: WWTemplateDataObject())
subGroup.appendData(object: WWTemplateDataObject())
section.appendData(data: subGroup)

视图需要继承自 WWItemView。

添加选项

如果这些对象中的任何一个具有从左向右或从右向左滑动时显示的选项，则WWDataObject对象具有appendOptions函数，并期望对象为WWOptionViewItem类型。

dataObject.appendOptions(option: WWOptionViewItem(title: "Edit", backgroundColor: UIColor.blue, image: nil, padding: 10))

选项可以设置他们的

  • 标题
  • 背景颜色
  • 图片
  • 内边距或填充
  • 它将位于的侧面
  • 宽度
  • 着色色
  • 图标是否在文本上方居中。

选项视图类似于栏按钮，它们不是视图，而是表示视图的对象。

删除项的选项。

删除选项是特殊的，因此表单不允许自行创建一个，但它提供了创建一个的特殊方法。

data.appendOptions(option: data.createDeleteOption())

它可以像其他任何选项一样修改每个属性，但它不会在删除发生时引发事件。

委托

有两种重要的委托，表单会使用它们将事件发送到容器或委托类。

  • WWCollapsibleFormCollapseDelegate：它允许在折叠/展开即将发生或已经发生时通知。
  • WWCollapsibleFormDelegate：它发送标题和要由真实数据修改的项目，将UI与模型分离。它不返回项目索引，而是返回与之相关的数据对象。数据对象作为索引工作。此委托中的函数有
    • 修改标题：当一个标题需要将模型与视图关联时。获取标题视图和部分索引。
    • 修改项：当一个项目需要将模型与视图关联时。获取项视图、数据对象索引和部分索引。
    • 项目被选中：当项目被按下时发生。获取数据对象索引和部分索引。
    • 选项被选中：当项目的选项被按下时，此函数将返回被按下的选项。获取数据对象索引、选项对象索引和部分索引。

页脚

在所有部分选择一个项目后，页脚会从底部出现，表示流程结束。为了添加页脚，需要调用表单的 setFooter 函数。

do {
	try self.form.setFooter(newFooter:UIView())
} catch {
        
}

如果视图的高度为 0，则会抛出错误。

下一步

小部件仍需进行几个更改。以下是即将发生的下一步骤

  1. 在加载时间后添加并动画化对象。这些对象包括
    1. 部分
    2. 项
    3. 组内项
    4. 选项
  2. 在选择上一个部分后，滚动到下一个部分。
  3. 错误修正
    1. 如果滚动隐藏项并再次显示它，则选项会关闭。
    2. 页脚显示了，但最终滚动滑得太远了。
  4. 对于下一个版本，内部容器（UE）将被 UIViews 和 UIStackViews 替换。有一个名为 WWCollapsibleFormV2 的游乐场具有此想法。

修订版

  • 0.1.0 第一次提交，具有初始功能。