/Expander

An interesting view that can be expanded and folded

Primary LanguageSwift

Expander

Carthage compatible Platform Swift

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

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

实例化配置. 注意:EViewConfigstruct类型.

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