Expander

English

导入

使用Carthage导入

若未安装Carthage，使用下面方法安装：

$ brew update
$ brew install carthage

创建Cartfile文件并添加以下内容.

github "yutingLei/Expander" "master"

在终端，cd到工程根目录，运行carthage update命令，将编译好的Expander.framework添加到Xcode项目中去。

手动导入

直接复制Expander文件夹到项目中去，并添加到工程中即可.

可能需要移除Info.plist文件，视情况而定。

使用

首先, 在需要的文件中导入Expander.

import Expander

初始化

只能使用类方法初始化EView实例:

/// 参数view是EView的父视图
/// 无需担心交叉强引用，该视图在EView中是weak类型
let eView = EView.serialization(in: view)
view.addSubview(eView)

配置EView

使用默认的配置可以跳过配置.

实例化配置. 注意：EViewConfig是struct类型.

var config = EViewConfig()

可设置的属性:

属性名	类型	描述	默认值
size	CGSize	EView的初始大小	80x80
expandSize	CGSize	EView扩展后的大小，其中宽度小于0时，使用默认宽度；高度同理	Optional
expandCornerRadius	CGFloat	EView展开后的边角弧度	10
distanceToTop	CGFloat	EView到父视图顶部的距离	Optional
padding	EViewPadding	EView相对父视图的边缘填充	EViewPadding(0, 8)
expandType	EViewExpandType	EView展开时的模式(或者说是方向)	.center
located	EViewLocated	决定EView位于父视图的左/右边	.left
stateFlag	Touple	控制按钮展开/收拢状态的标题	("Expand", "Fold")
isViscosity	Bool	是否具有粘性，为true时，可以移动EView，但在手指松开后会回到原来的位置	Optional

配置完成后，必须调用一次applyConfig函数.

eView.applyConfig(config)

扩展

如果我想自己控制EView的展开和收拢怎么办?

下面两个方法用于展开和收拢

/// 展开动作
/// rect: 如果设置了rect，那么展开后的frame = rect，仅限本次有效
public func expand(to rect: CGRect? = nil)
/// 收拢动作
/// rect: 如果设置了rect，那么收拢后的frame = rect，仅限本次有效
public func fold(to rect: CGRect? = nil)

为EView添加视图

当创建EView后，可以获取一个contentView的属性，此时可以向里面添加任意视图。

有快速的方法显示数据吗?

当然，可以使用默认的显示方式，而这仅需一点代码。
首先，假设有以下一个数组:

let datas = [["title": "Gemany", "image": "GM.png"],
            ["title": "India", "image": "IN.png"],
            ["title": "Japan", "image": "JP.png"],
            ["title": "Netherlands", "image": "NL.png"],
            ["title": "UK", "image": "UK.png"],
            ["title": "US", "image": "US.png"],
            ["title": "Canada", "image": "CA.png"],
            ["title": "Singapore", "image": "SP.png"]]

初始化cell配置 EViewCellConfig:

/// 初始化配置
/// 注意：传入的keys是取字典值的key,第一个必须是标题的key，第二个必须是图片的key
let cellConfig = EViewCellConfig(keys: ["title", "image"])

设置一些其它属性. 使用默认的可以跳过设置。

属性名	类型	描述	默认值
mode	EViewCellMode	cell的显示模式，.default表示上面是标题，下面是图片; .classic与之相反	.default
isMultiSelect	Bool	是否多选	false
sureTitle	String	确认按钮的标题，仅在isMultiSelect = true时有效	Sure
multiSelectedHandler	Closure	当isMultiSelect = true时，点击确认按钮的回调函数	Optional
backgroundColor	UIColor	每个cell的背景色	.white
selectedBackgroundColor	UIColor	cell在选中状态下的背景色，需isMultiSelect = false	Optional
selectedImage	UIImage	选中状态的图片，仅isMultiSelect = true有效	Optional
layout	UICollectionViewFlowLayout	cell的排列方式	Optional

调用函数来显示数据:

eView.showDatas(datas, with: config) { idx in print("Current select: \(idx)")}

我想控制多个EView,该怎么破?

别担心！你可以使用EViewGroup这个类.

假设声明了多个EView的实例： eView1, eView2, eView3...

然后我们创建EViewGroup管理组

let eGroup = EViewGroup.init(layout: .center, mode: .one, with: eView1, eView2, eView3)
eGroup.formed()

就这样!?, 如果简单使用，两行代码就可以为解决问题。

当然，还有可配置参数（使配置参数生效必须在调用formed函数之前）：

属性	类型	描述
layout	EViewGroupLayout	被管理视图的排列方式
mode	EViewGroupExpande	被管理视图同时能够展开个数
interItemSpacing	CGFloat	相邻两个EView视图间隔. 只支持layout = .start/.end/.center

案例

简单的EView使用方法和配置

使用EView显示数据

EViewGroup的使用方法

TODO

• Basic functions
• Add dynamic behaviors?
• Multiple EViews EViewGroup
• Shadow color