在 iOS 中倾斜 table 视图单元格

Question

我该如何实施？带有倾斜单元格的 table 视图。我想首先让细胞重叠并切出一块，但我做不到。

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

我很感激任何建议，谢谢！

Answer 1

我做过类似的事情，但我没有使用 UITableView 或 UICollectionView。

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

但由于它们不是 UITableView 中的单元格，因此您不能向用户提供 "pulling" 行为，这对您的应用来说是 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
}

希望对遇到同样问题的人有用。谢谢并致以最良好的祝愿！

在 iOS 中倾斜 table 视图单元格

Oblique table view cells in iOS

uitableview

ios

uicollectionviewcell