如何设置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 inCALayer , as theUILabel`显示.

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中找到了正确的答案,适用于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

@iamktothed 答案的 Swift 3 版本：

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()
    }
}

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

结果是