可扩展的 UICollectionViewCell [英] Expandable UICollectionViewCell
问题描述
我正在尝试编写一个可扩展的 UICollectionViewCell.如果用户按下顶部按钮，单元格应展开到不同的高度并显示底层内容.
我的第一个实现具有自定义 UICollectionViewCell，可以通过单击顶部按钮展开，但集合视图也不会展开.自动取款机.该单元格是集合视图中的最后一个单元格，只需向下滑动足够多的时间，您就可以看到展开的内容.如果您停止触摸，则滚动视图会向上跳跃，并且无法看到展开的单元格.
这是我的代码:
导入基础导入 UIKit类 ExpandableCell: UICollectionViewCell {@IBOutlet 弱 var topButton:图标按钮！公共变量扩展:布尔=假私有变量扩展高度:CGFloat = 200私有变量 notExpandedHeight : CGFloat = 50@IBAction func topButtonTouched(_ sender: AnyObject) {如果(扩展==真){self.deExpand()} 别的 {self.expand()}}公共函数展开(){UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, 动画: {self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.expandedHeight)}，完成:{成功self.expanded = true})}公共函数 deExpand() {UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, 动画: {self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.notExpandedHeight)}，完成:{成功self.expanded = false})}}我在正确实现以下方法时也遇到了问题，因为我没有直接引用单元格:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) ->CGS尺寸基本上所有东西都应该是动画的.
屏幕截图显示了一个展开而不是展开的单元格.希望对您有所帮助！
谢谢！
如果你有多个单元格需要在集合视图单元格内触摸按钮时扩展到不同的高度，那么，这里是代码.
我已经使用委托模式让控制器知道，使用 indexPath 触摸了哪个单元格的按钮.创建cell时需要将cell的indexpath传递给cell.
当按钮被触摸时，单元格调用委托(ViewController)，它会相应地更新 isExpandedArray 并重新加载特定的单元格.
<块引用>CollectionViewCell
协议 ExpandedCellDelegate:NSObjectProtocol{func topButtonTouched(indexPath:IndexPath)}类 ExpandableCell: UICollectionViewCell {@IBOutlet 弱 var topButton:UIButton！弱 var 委托:ExpandedCellDelegate?公共变量索引路径:索引路径！@IBAction func topButtonTouched(_ sender: UIButton) {如果让委托 = self.delegate{delegate.topButtonTouched(indexPath: indexPath)}}}<块引用>
查看控制器类
类 ViewController: UIViewController {@IBOutlet 弱 var collectionView:UICollectionView！var expandCellIdentifier = "ExpandableCell"var cellWidth:CGFloat{返回 collectionView.frame.size.width}var expandHeight : CGFloat = 200var notExpandedHeight : CGFloat = 50var dataSource = ["data0","data1","data2","data3","data4"]var isExpanded = [布尔]()覆盖 func viewDidLoad() {super.viewDidLoad()isExpanded = Array(repeating: false, count: dataSource.count)}}扩展视图控制器:UICollectionViewDataSource{func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) ->诠释{返回数据源.count}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) ->UICollectionViewCell {让 cell = collectionView.dequeueReusableCell(withReuseIdentifier: expandCellIdentifier, for: indexPath) as！可扩展单元格cell.indexPath = indexPathcell.delegate = 自我//配置单元格返回单元格}}扩展视图控制器:UICollectionViewDelegateFlowLayout{func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) ->CGS 大小 {如果 isExpanded[indexPath.row] == true{返回CGSize(宽度:cellWidth，高度:expandedHeight)}别的{返回CGSize(宽度:cellWidth，高度:notExpandedHeight)}}}扩展 ViewController:ExpandedCellDelegate{func topButtonTouched(indexPath: IndexPath) {isExpanded[indexPath.row] = !isExpanded[indexPath.row]UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, 动画: {self.collectionView.reloadItems(在:[indexPath])}，完成:{成功打印(成功")})}}I'm trying to program an expandable UICollectionViewCell. If the user presses the topbutton, the cell should expand to a different height and reveal the underlying content.
My first implementation features a custom UICollectionViewCell, which can be expanded by clicking the topbutton, but the collectionview does not expand too. Atm. the cell is the last one in the collectionview and just by swiping down enough, you can see the expanded content. If you stop touching, the scrollview jumps up and nothing of the expanded cell could be seen.
Here's my code:
import Foundation
import UIKit
class ExpandableCell: UICollectionViewCell {
@IBOutlet weak var topButton: IconButton!
public var expanded : Bool = false
private var expandedHeight : CGFloat = 200
private var notExpandedHeight : CGFloat = 50
@IBAction func topButtonTouched(_ sender: AnyObject) {
if (expanded == true) {
self.deExpand()
} else {
self.expand()
}
}
public func expand() {
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.expandedHeight)
}, completion: { success in
self.expanded = true
})
}
public func deExpand() {
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.notExpandedHeight)
}, completion: { success in
self.expanded = false
})
}
}
I also have problems implementing the following method correctly, because I haven't got a direct reference to the cell:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
Basicly everything should be animated.
The screenshot shows an expanded and not expanded cell. Hope that helps!
Thanks!
If you have more than cell that needs to be expanded to different height when a button is touched inside the collection view cell, then, here is the code.
I have used the delegate pattern to let the controller know, button of which cell was touched using the indexPath. You need to pass the indexpath of the cell to the cell when creating the cell.
when the button is touched the cell calls the delegate(ViewController), which updates the isExpandedArray accordingly and reloads the particular cell.
CollectionViewCell
protocol ExpandedCellDelegate:NSObjectProtocol{
func topButtonTouched(indexPath:IndexPath)
}
class ExpandableCell: UICollectionViewCell {
@IBOutlet weak var topButton: UIButton!
weak var delegate:ExpandedCellDelegate?
public var indexPath:IndexPath!
@IBAction func topButtonTouched(_ sender: UIButton) {
if let delegate = self.delegate{
delegate.topButtonTouched(indexPath: indexPath)
}
}
}
View Controller Class
class ViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
var expandedCellIdentifier = "ExpandableCell"
var cellWidth:CGFloat{
return collectionView.frame.size.width
}
var expandedHeight : CGFloat = 200
var notExpandedHeight : CGFloat = 50
var dataSource = ["data0","data1","data2","data3","data4"]
var isExpanded = [Bool]()
override func viewDidLoad() {
super.viewDidLoad()
isExpanded = Array(repeating: false, count: dataSource.count)
}
}
extension ViewController:UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dataSource.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: expandedCellIdentifier, for: indexPath) as! ExpandableCell
cell.indexPath = indexPath
cell.delegate = self
//configure Cell
return cell
}
}
extension ViewController:UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if isExpanded[indexPath.row] == true{
return CGSize(width: cellWidth, height: expandedHeight)
}else{
return CGSize(width: cellWidth, height: notExpandedHeight)
}
}
}
extension ViewController:ExpandedCellDelegate{
func topButtonTouched(indexPath: IndexPath) {
isExpanded[indexPath.row] = !isExpanded[indexPath.row]
UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.collectionView.reloadItems(at: [indexPath])
}, completion: { success in
print("success")
})
}
}
这篇关于可扩展的 UICollectionViewCell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
