iOS中的倾斜表视图单元格

Question

我该如何实施？ 带有倾斜单元格的表格视图。 我首先想到的是使细胞重叠并切出一块，但是我无法使其起作用。

现在，我能想到的唯一解决方案是在第一个单元格中下载第二个图像，并切出顶部三角形，然后添加到第一个单元格中。 但是，如果用户在列表中滚动，那么在内存和处理方面都不会是最佳选择。

我感谢任何建议，谢谢！

Answer 1

我已经做了类似的事情，但是我没有使用UITableView或UICollectionView 。

我使用的是在视图层次结构中将一个UIImageView （AView）置于另一个UIImageView （BView）之上。 所以我将UISwipeGestureRecognizer添加到BView。在BView的顶部，我添加了一个分隔符视图（当VC加载用户看不到它时）。 而且我基本上可以为BView设置动画。

但是，由于它们不是UITableView中的单元格，因此您无法为用户提供“拉动”行为，这对您的应用程序来说是UX的缺点。

Answer 2

我通过以下方式解决了它。 最后，我使用了UICollectionView ，因为我无法找到一种方法来很好地重叠UITableView中的单元格。 因此，首先我制作了一个自定义布局，如下所示：

CustomCollectionViewFlowLayout.swift

import UIKit

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout {

    override func collectionViewContentSize() -> CGSize {
        let xSize = self.itemSize.width
        let ySize = CGFloat(self.collectionView!.numberOfItemsInSection(0)) * self.itemSize.height

        var size = CGSizeMake(xSize, ySize)
        if self.collectionView!.bounds.size.width > size.width {
            size.width = self.collectionView!.bounds.size.width
        }
        if self.collectionView!.bounds.size.height > size.height {
            size.height = self.collectionView!.bounds.size.height
        }
        return size
    }

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
        let attributesArray = super.layoutAttributesForElementsInRect(rect) as! [UICollectionViewLayoutAttributes]
        let numberOfItems = self.collectionView?.numberOfItemsInSection(0)

        for attribute in attributesArray {
            let xPosition = attribute.center.x
            var yPosition = attribute.center.y

            if attribute.indexPath.row == 0 {
                attribute.zIndex = Int(INT_MAX)
            } else {
                yPosition -= CGFloat(60 * attribute.indexPath.row)
                attribute.zIndex = numberOfItems! - attribute.indexPath.row
            }

            attribute.center = CGPointMake(xPosition, yPosition)
        }

        return attributesArray
    }

    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
        return UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
    }

}

然后，我使用路径和形状切出该部分，并绘制了一个白色矩形。 所以看起来像这样：

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("ChallengeCollectionViewCell", forIndexPath: indexPath) as! ChallengeCollectionViewCell

    cell.challengeImage.sd_setImageWithURL(NSURL(string: STATIC_IMAGE_URL), completed: nil)

    let trianglePath = CGPathCreateMutable()
    CGPathMoveToPoint(trianglePath, nil, 0, 0)
    CGPathAddLineToPoint(trianglePath, nil, 0, cell.challengeImage!.frame.size.height)
    CGPathAddLineToPoint(trianglePath, nil, cell.challengeImage!.frame.size.width, cell.challengeImage!.frame.size.height - 50)
    CGPathAddLineToPoint(trianglePath, nil, cell.challengeImage!.frame.width, 0)
    CGPathAddLineToPoint(trianglePath, nil, 0, 0)
    CGPathCloseSubpath(trianglePath)

    let shapeLayer = CAShapeLayer()
    shapeLayer.frame = cell.challengeImage!.frame
    shapeLayer.path = trianglePath

    cell.challengeImage.layer.mask = shapeLayer
    cell.challengeImage.layer.masksToBounds = true

    let linePath = CGPathCreateMutable()
    CGPathMoveToPoint(linePath, nil, 0, cell.challengeImage!.frame.size.height)
    CGPathAddLineToPoint(linePath, nil, cell.challengeImage!.frame.size.width, cell.challengeImage!.frame.size.height - 50)
    CGPathCloseSubpath(linePath)

    let lineShape = CAShapeLayer()
    lineShape.path = linePath
    lineShape.lineWidth = 10
    lineShape.strokeColor = UIColor.whiteColor().CGColor

    cell.challengeImage.layer.addSublayer(lineShape)

    return cell
}

我希望这对遇到相同问题的人有用。 谢谢，祝你好运！