如何设置CATextLayer文本的垂直位置？

Question

我使用以下代码在我的应用中创建UILabel和CATextLayer

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.textLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 90, 20, 20)];
    self.textLabel.text = @"1";
    self.textLabel.font = [UIFont systemFontOfSize:12];
    self.textLabel.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.textLabel];

    self.textLayer = [CATextLayer layer];
    [self.textLayer setString:@"1"];
    [self.textLayer setFont:(__bridge CFTypeRef)([UIFont systemFontOfSize:12])];
    self.textLayer.backgroundColor = [UIColor greenColor].CGColor;
    self.textLayer.frame = CGRectMake(70, 90, 50, 20);
    [self.view.layer addSublayer:self.textLayer];
}

，结果是

红色的是UILabel，绿色的是CALayer. I want to know how to vertical align the text in CALayer , as the UILabel`显示。

Answer 1

实际上，这对我有用：

self.layer.addSublayer(textLayer)
textLayer.font = font
textLayer.fontSize = font.pointSize
textLayer.frame = CGRectMake(self.layer.bounds.origin.x, ((self.layer.bounds.height - textLayer.fontSize) / 2) - lineWidth, self.layer.bounds.width, self.layer.bounds.height)
textLayer.alignmentMode - kCAAlignmentCenter
textLayer.contentsScale = UIScreen.mainScreen().scale

LineWidth是我用来“框架”我的边界区域的东西。这使我的文本垂直和水平居中。

Answer 2

在Objective-C中找到了正确的答案here，而适用于iOS 。它通过子类化CATextLayer并覆盖drawInContext函数来工作。

但是，我已经使用David Hoerl的代码作为基础对代码进行了一些改进，如下所示。这些变化仅仅是重新计算文本的垂直位置。

以下是Swift用户的代码：

class LCTextLayer : CATextLayer {

// REF: http://lists.apple.com/archives/quartz-dev/2008/Aug/msg00016.html
// CREDIT: David Hoerl - https://github.com/dhoerl 
// USAGE: To fix the vertical alignment issue that currently exists within the CATextLayer class. Change made to the yDiff calculation.

override init!() {
    super.init()
}

override init!(layer: AnyObject!) {
    super.init(layer: layer)
}

required init(coder aDecoder: NSCoder) {
    super.init(layer: aDecoder)
}

override func drawInContext(ctx: CGContext!) {
    let height = self.bounds.size.height
    let fontSize = self.fontSize
    let yDiff = (height-fontSize)/2 - fontSize/10

    CGContextSaveGState(ctx)
    CGContextTranslateCTM(ctx, 0.0, yDiff)
    super.drawInContext(ctx)
    CGContextRestoreGState(ctx)
}
}

Answer 3

{
    CATextLayer *label = [[CATextLayer alloc] init];
    [label setFont:@"Helvetica-Bold"];
    [label setFontSize:16];
    [label setFrame:NSMakeRect(0, 0, NSWidth(self.frame) / 2., NSHeight(self.frame))];
    [label setString:@"ON"];
    [label setAlignmentMode:kCAAlignmentCenter];

    [label setForegroundColor:[[NSColor whiteColor] CGColor]];

    _rootLayer.layoutManager = [CAConstraintLayoutManager layoutManager];
    [label addConstraint:[CAConstraint
                          constraintWithAttribute:kCAConstraintMidY
                          relativeTo:@"superlayer"
                          attribute:kCAConstraintMidY]];
    [label addConstraint:[CAConstraint
                          constraintWithAttribute:kCAConstraintMidX relativeTo:@"superlayer" attribute:kCAConstraintMidX]];
    [_rootLayer addSublayer:label];

}

Answer 4

根据CATextLayer的文档，没有垂直对齐文本的选项。唯一的选择是重新定位文本图层，以便与标签很好地对齐。这是实现相同的代码

CGFloat offsetY = 0;
UIFont *textFont = [UIFont systemFontOfSize:14.0f];
//if system version is grater than 6
if(([[[UIDevice currentDevice] systemVersion] compare:@"6" options:NSNumericSearch] == NSOrderedDescending)){
    offsetY = (textFont.capHeight - textFont.xHeight);
}

self.textLayer = [CATextLayer layer];
self.textLayer.backgroundColor = [UIColor greenColor].CGColor;
self.textLayer.frame = CGRectMake(70, 90+offsetY, 50, 20);
[self.view.layer addSublayer:self.textLayer];
[self.textLayer setContentsScale:[UIScreen mainScreen].scale];
[self.textLayer setForegroundColor: [UIColor blackColor].CGColor];
[self.textLayer setString:@"1"];
[self.textLayer setFont:(__bridge CFTypeRef)(textFont)];
[self.textLayer setFontSize:14.0f];

结果是

Answer 5

Swift 3版@ iamktothed的答案：

class VerticallyCenteredTextLayer : CATextLayer {

    // REF: http://lists.apple.com/archives/quartz-dev/2008/Aug/msg00016.html
    // CREDIT: David Hoerl - https://github.com/dhoerl
    // USAGE: To fix the vertical alignment issue that currently exists within the CATextLayer class.

    override func draw(in ctx: CGContext) {
        let fontSize = self.fontSize
        let height = self.bounds.size.height
        let deltaY = (height-fontSize)/2 - fontSize/10

        ctx.saveGState()
        ctx.translateBy(x: 0.0, y: deltaY)
        super.draw(in: ctx)
        ctx.restoreGState()
    }
}