EXPANDING COLLECTION
一个动画材质设计 UI 卡 peek/pop 控制器
我们专注于为移动应用和网站设计并编写自定义 UI。
关注最新更新
为您的项目获取免费Mockup →
要求
- iOS 9.0+
- Xcode 9.0+
安装
只需将源文件夹添加到您的项目中。
或者使用CocoaPods和Podfile
pod 'expanding-collection'或者Carthage用户只需将其添加到其Cartfile
github "Ramotion/expanding-collection"
用法
import expanding_collection创建CollectionViewCell
-
创建UICollectionViewCell从
BasePageCollectionCell继承（推荐使用xib文件创建cell） -
添加FrontView
- 在YOURCELL.xib中添加一个视图并将其连接到
@IBOutlet weak var frontContainerView: UIView! - 添加宽度、高度、中心X和中心Y约束（宽度和高度约束必须等于cellSize）
- 将中心Y约束连接到
@IBOutlet weak var frontConstraintY: NSLayoutConstraint! - 在frontView中添加任何所需的UIView
- 添加BackView
- 重复步骤2（将导出连接到
@IBOutlet weak var backContainerView: UIView!，@IBOutlet weak var backConstraintY: NSLayoutConstraint!）
- Cell示例 DemoCell
如果为任何 FrontView.subviews 设置 tag = 101，则该视图将在过渡动画期间被隐藏
创建 CollectionViewController
-
创建一个继承自
ExpandingViewController的 UIViewController -
注册 Cell 并设置 Cell 大小
override func viewDidLoad() {
itemSize = CGSize(width: 214, height: 460) //IMPORTANT!!! Height of open state cell
super.viewDidLoad()
// register cell
let nib = UINib(nibName: "NibName", bundle: nil)
collectionView?.registerNib(nib, forCellWithReuseIdentifier: "CellIdentifier")
}- 添加 UICollectionViewDataSource 方法
extension YourViewController {
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items.count
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CellIdentifier"), forIndexPath: indexPath)
// configure cell
return cell
}
}- 打开 Cell 动画
override func viewDidLoad() {
itemSize = CGSize(width: 214, height: 264)
super.viewDidLoad()
// register cell
let nib = UINib(nibName: "CellIdentifier", bundle: nil)
collectionView?.registerNib(nib, forCellWithReuseIdentifier: String(DemoCollectionViewCell))
}func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
cell.cellIsOpen(!cell.isOpened)
}如果你使用此代理方法
func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)
func scrollViewDidEndDecelerating(scrollView: UIScrollView)必须调用 super 方法
func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
super.collectionView(collectionView: collectionView, willDisplayCell cell: cell, forItemAtIndexPath indexPath: indexPath)
// code
}
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
super.scrollViewDidEndDecelerating(scrollView: scrollView)
// code
}过渡动画
-
创建一个继承自
ExpandingTableViewController的 UITableViewController -
设置头部高度默认为 236
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
headerHeight = ***
}或者
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
headerHeight = ***
}- 在 YourViewController 中调用 push 方法到 YourTableViewController
if cell.isOpened == true {
let vc: YourTableViewController = // ... create view controller
pushToViewController(vc)
}- 对于返回过渡使用
popTransitionAnimation()
🗂 在其他语言中查看此库
📄 许可证
Expanding Collection 根据 MIT 许可协议发布。详细信息请参见 LICENSE
此库是我们 精选的最佳 UI 开源项目的集合。
如果你在项目中使用开源库，请确保引用并回链到 www.ramotion.com
📱 下载 iOS Showroom 应用以进行尝试
在我们的 iOS 应用中尝试此 UI 组件以及更多类此的组件。如果您有兴趣，请联系我们。
