使用 CALayer 将对角横幅/徽章添加到 UITableViewCell 的角上

我试图在我的表格视图中绘制装饰 UITableViewCell 的文本横幅，看起来像邮票，对角线穿过单元格的左上角。

我可能完全在错误的地方做这件事，但我压倒一切-layoutSubviews添加图层。我尝试这样做-drawRect:但是当表格渲染时，横幅最终被表格视图的 imageView 覆盖（即该图层位于图像视图下方，因为稍后添加图像视图）。

我真的很难正确计算这个问题。我计算过，假设横幅从距单元格顶部 40 点和距左侧 40 点开始，角度恰好为 -45°，则斜边将为 56 点。因此，我将 CALayer 设为 56 点宽，然后将其旋转 -45°，这样就可以了。问题在于细胞内的位置......它位于细胞内部，而不是紧靠细胞边缘。

有人可以帮助我进行数学计算吗？显然我需要移动图层and旋转它。

感觉锚点就是我在这里需要的，但这似乎实际上移动了图层，所以我一定错过了这一点（没有双关语的意思）。

- (void)layoutSubviews
{
    [super layoutSubviews];

    self.imageView.frame = CGRectMake(10, 10, 50, 50);

    if (self.hasBanner) {
        CALayer *banner = [CALayer layer];
        banner.backgroundColor = [UIColor colorWithRed:.5f green:.5f blue:.5f alpha:1.f].CGColor;
        banner.frame = CGRectMake(0, 40-15, 56, 15);
        banner.anchorPoint = CGPointMake(0, 1); // this just makes it worse
        banner.transform = CATransform3DMakeRotation(-45.0 / 180.0 * M_PI, 0.0, 0.0, 1.0);
        [self.layer addSublayer:banner];
    }
}

该层应该放在哪里？

我们画个图：

我们可以更进一步做一些三角函数，但我们就到此为止吧。很明显，横幅的中上点应该位于(20,20)。我们可以告诉 Core Animation 这样做。

定位图层

将其视为四个单独的步骤：

1. 设置图层大小
2. 确定图层中的哪个点是方便的参考点
3. 设置该参考点的位置
4. 围绕参考点旋转图层

这些对应于四个属性：bounds, anchorPoint, position, and transform.

你不想触碰frame属性，因为它的值是源自 the bounds, position, transform, and anchorPoint。如果您尝试设置frame, CALayer 将尝试反转transform，将其应用于您给出的矩形，然后设置bounds and position。这可能不会给出你想要的结果，所以你最好完全忽略它——这样就不会那么混乱了。

（有关更多信息，请参阅核心动画指南 http://developer.apple.com/library/ios/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514，特别是该部分图层对象定义自己的几何形状 http://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW15.)

在代码中，我们将：

1. Set bounds到直角0, 0, width, height。 （我是故意离开的width对你来说——它必须大于 56。）
2. Set anchorPoint说到点子上0.5, 0。换句话说，位于层宽度的中间、层的顶部。
3. Set position说到点子上20, 20.
4. Set transform旋转 45°。

顺便说一下，在下面的代码中，我设置了affineTransform而不是transform，只是因为它对于简单的二维转换稍微方便一些。

何时设置图层

你是对的-drawRect:是创建和添加图层的错误位置。该方法应该绘制到视图的内容中（其CGContext）但是做nothing else.

layoutSubviews会起作用，但它的调用频率会比您预期的要高，并且您不想每次都创建和添加新层。

看起来你只需要设置一次图层的几何形状，就再也不用碰它了。为什么不直接创建或销毁图层hasBanner属性改变了？

@interface MyTableViewCell ()

@property (nonatomic) BOOL hasLayer;
@property (nonatomic) CALayer* bannerLayer;

@end

- (void)setHasBanner:(BOOL)hasBanner
{
    if (hasBanner != _hasBanner) {
        _hasBanner = hasBanner;

        if (hasBanner) {
            CALayer* banner = [CALayer layer];
            banner.backgroundColor = [UIColor colorWithRed:.5f green:.5f blue:.5f alpha:1.f].CGColor;

            banner.bounds = CGRectMake(0, 0, 56, 15);
            banner.anchorPoint = CGPointMake(0.5, 0);
            banner.position = CGPointMake(20, 20);
            banner.affineTransform = CGAffineTransformMakeRotation(-45.0 / 180.0 * M_PI);

            // Add the layer to the view, and remember it for later
            [self.layer addSublayer:banner];
            self.bannerLayer = banner;
        } else {
            // Remove the layer from the view, and discard it
            [self.bannerLayer removeFromSuperlayer];
            self.bannerLayer = nil;
        }
    }
}