如何設置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. I want to know how to vertical align the text in CALayer中CALayer. I want to know how to vertical align the text in , 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中找到了正確的答案， 適用於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()
    }
}