jak ustawić pionową pozycję tekstu CATextLayer?

Question

tworzę UILabel i CATextLayer w mojej aplikacji przy użyciu następujących kodu

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

a wynik jest

Czerwony jeden jest UILabel zielona jeden jest CALayer. I want to know how to vertical align the text in pokazy CALayer , as the UILabel`.

Answer 1

Zgodnie z dokumentacją CATextLayer nie ma opcji pionowego wyrównania tekstu. Jedyną opcją jest zmiana położenia warstwy tekstowej tak, aby dobrze pasowała do etykiety. Oto kod, aby osiągnąć ten sam

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

Rezultatem jest

Answer 2

{ 
    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 3

Prawidłowa odpowiedź znajduje here w Objective-C i prace dla iOS. Działa przez podklasy CATextLayer i przesłanianie funkcji drawInContext.

Wprowadziłem jednak kilka poprawek do kodu, jak pokazano poniżej, używając kodu Davida Hoerla jako podstawy. Zmiany polegają wyłącznie na ponownym obliczeniu pozycji pionowej tekstu.

Oto kod dla użytkowników 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 4

Faktycznie, jest to, co działa dla mnie:

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 to co używam do "ramy" mojej okolicy ograniczenia. Dzięki temu tekst jest wyśrodkowany w pionie i poziomie.

Answer 5

Swift 3 wersja użytkownika @ iamktothed odpowiedź:

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