动画布局UICollectionViewCell内部的更改及其具有AutoLayout约束的子视图

时间:2015-06-11 23:47:43

标签: swift uicollectionviewcell uicollectionviewlayout ios-autolayout

我在选择时增加/减少集合视图单元的大小。单元格包含子视图,包括绿色条,标签“vs”和两个数字文本字段。如下面的gif /链接所示。面临的挑战是为比例设置动画,并为单元格中包含的子视图比例设置动画,并保持给定的布局约束。视频中显示的是,目标布局跳转到它的最终目的地,而没有动画更改。在初始点击时,单元格“5vs0”可以很好地缩放,但“0”文本字段会跳转到最右边而没有任何动画。在第二次单击以最小化比例时,左侧的绿色条立即调整为等于文本字段5和0的值。这意味着自动布局约束在缩放时与容器视图(集合视图单元格)一起正常工作!唯一的问题是布局约束不会与集合视图的无效布局一起动画。

Video showing collection view cell scale but unintended subview jerky changes

我已经设置了没有自动布局警告或错误的xib文件。单元格单击时集合视图的布局无效,并且动画设置为true时调用setCollectionViewLayout。 NB之后,我调用主队列的中央调度,以针对需要更改的集合视图单元调用layoutIfNeeded。这似乎不会影响子视图上的布局动画。结构方面,如下面的代码所示,我保留了一个布局字典,我在选择单元格项之间切换。

我可以手动调用动画块来改变子视图的边界,但是对于不同的iOS屏幕尺寸等,这是相当混乱的。

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath){
    var cell = collectionView.cellForItemAtIndexPath(indexPath) as! MatchEntryCell

    if (collectionView.collectionViewLayout.isEqual(self.layouts[.Standard]!)){
        collectionView.setCollectionViewLayout(self.layouts[.Edit]!, animated: true)
        cell.homeScore!.userInteractionEnabled = true
        cell.homeScore!.becomeFirstResponder()
        picker.selectRow(cell.homeScore!.text.toInt()! , inComponent: 0, animated: true)
        picker.selectRow(cell.awayScore!.text.toInt()! , inComponent: 1, animated: true)

    } else if (collectionView.collectionViewLayout.isEqual(self.layouts[.Edit]!)) {
        collectionView.setCollectionViewLayout(self.layouts[.Standard]!, animated: true)
        cell.homeScore!.resignFirstResponder()
        cell.homeScore!.userInteractionEnabled = false
    }
    dispatch_async(dispatch_get_main_queue()) {
        UIView.animateWithDuration(0.5, animations: { () -> Void in
            cell.layoutIfNeeded()
        })
    }
}

我在UICollectionViewCell子类的子视图中添加了宽度和高度以及下面的自动调整大小的掩码。但没有快乐!这篇文章与这个解决方案有关,但我没有快乐! Autolayout is not resizing Uicollectionviewcell items when animating between layouts

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.layer.borderWidth = 1
    self.layer.cornerRadius = 10
    self.layer.borderColor = UIColor.clearColor().CGColor

    self.homeBar?.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    self.homeScore?.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    self.awayBar?.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    self.awayScore?.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    self.autoresizingMask = .FlexibleWidth | .FlexibleHeight
}

任何人有任何想法或建议吗?干杯!

1 个答案:

答案 0 :(得分:0)

我通过使用传统弹簧和支柱解决了这个问题。在使用自动布局时,对齐不会插入集合视图单元格的itemSize更改,但弹簧和支柱会进行插值。