iphone - 使用 CALayer 将对角线横幅/角标(Badge)添加到 UITableViewCell 的角

Question

我正在尝试在我的 TableView 中绘制装饰 UITableViewCell 的文本横幅，看起来像邮票，斜跨单元格的左上角。

我可能完全在错误的地方做这件事，但我重写了 -layoutSubviews 来添加图层。我尝试在 -drawRect: 中执行此操作，但随着表格呈现，横幅最终被表格 View 的 imageView 覆盖(即图层位于 ImageView 下方，因为 ImageView 是稍后添加的)。

我真的很难为这个做正确的数学计算。我已经计算出，假设横幅从距单元格顶部 40 点和距左侧 40 点开始，角度恰好为 -45º，则斜边将为 56 点。所以我制作了一个 56 点宽的 CALayer，然后将它旋转 -45º，这样就可以了。问题在于牢房内的位置……它位于牢房外，而不是靠在牢房的边缘。

不是我通过反复试验将其放在正确的位置，有人可以帮我算算吗？显然，我需要移动图层并旋转它。

感觉这里我需要的是 anchorPoint，但这似乎实际上是在四处移动图层，所以我一定是漏掉了这个点(没有双关语的意思)。

- (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];
    }
}

Answer 1

层应该去哪里？

画个图:

我们可以走得更远，做一些触发，但让我们到此为止。很明显，横幅的中间顶部点应位于 (20,20)。我们可以告诉 Core Animation 来做到这一点。

定位图层

将其分为四个独立的步骤:

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

这些对应于四个属性:bounds、anchorPoint、position 和transform。

您不想触及 frame 属性，因为它的值派生自 bounds，position、transform 和 anchorPoint。如果您尝试设置 frame，CALayer 将尝试反转 transform，将其应用于您提供的矩形，然后设置 bounds和位置。这可能不会产生您想要的结果，所以您最好完全忽略它——那样不会造成混淆。

(有关更多信息，请参阅 Core Animation Guide，特别是 Layer Objects Define Their Own Geometry 部分。)

在代码中，我们将:

1. 将 bounds 设置为矩形 0, 0, width, height。 (我故意将 width 留给你——它必须大于 56。)
2. 将 anchorPoint 设置为点 0.5, 0。换句话说，在层宽度的中间，在层的顶部。
3. 将位置设置为点20, 20。
4. 将 transform 设置为旋转 45°。

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

何时设置图层

您是正确的，-drawRect: 是创建和添加图层的错误位置。该方法应该绘制到 View 的内容(它的 CGContext)中，但什么都不做。

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;
        }
    }
}