ios - Centrar dos fuentes con diferentes tamaños diferentes verticalmente en un NSAttributedString

nsattributedstring swift 4

Question

Uso NSAttributedString para generar una cadena con dos tamaños diferentes. Por defecto, su alineación inferior se ve así:

Pero quiero centrarlo verticalmente, así:

Para que quede claro, esta es una única cadena atribuida, no dos o más. Este es un ejemplo simplificado para describir mi pregunta, lo que realmente me gustaría hacer es más complejo.

Answer 1

Aquí hay un ejemplo de trabajo para alinear verticalmente texto más pequeño usando NSBaselineOffsetAttributeName .

NSString *bigString   = @"BIG";
NSString *smallString = @"Small String";
NSString *fullString = [NSString stringWithFormat:@"%@ %@", bigString, smallString];

NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:fullString];

NSRange bigStringRange = NSMakeRange(0, bigString.length);
NSRange smallStringRange = NSMakeRange(bigStringRange.length, smallString.length);

[string beginEditing];


//Set big string font and size
[string addAttribute:NSFontAttributeName
               value:[UIFont systemFontOfSize:28.0]
               range:bigStringRange];

//set small string font and size
[string addAttribute:NSFontAttributeName
               value:[UIFont systemFontOfSize:18.0]
               range:smallStringRange];

//Set small string baseline offset
[string addAttribute:NSBaselineOffsetAttributeName
               value:[NSNumber numberWithFloat:3.0]  //adjust this number till text appears to be centered
               range:smallStringRange];

[string endEditing];

Answer 2

Una mejor solución es calcular NSBaselineOffsetAttributeName a partir de la tipografía de fuentes (artículo breve https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/ )

Establecer atributo para la segunda parte de la cadena atribuida.

secondPartAttributes[NSBaselineOffsetAttributeName] = @((firstFont.xHeight - secondFont.xHeight)/2);

Answer 3

Yo diría que lo más fácil es manipular el atributo NSBaselineOffsetAttributeName para el texto en cuestión:

NSBaselineOffsetAttributeName

El valor de este atributo es un objeto NSNumber que contiene un valor de coma flotante que indica el desplazamiento del personaje desde la línea base, en puntos. El valor predeterminado es 0.

Para centrar, tomaría la diferencia entre la altura del texto grande y la altura del texto más pequeño y lo dividiría a la mitad, luego lo usaría como el ajuste de la línea base.

Answer 4

La respuesta de YasT en Swift:

Swift 3

let bigString = "BIG"
let smallString = "Small String"
let fullString = "/(bigString) /(smallString)"
let string = NSMutableAttributedString(string: fullString)

let bigStringRange = NSRange(location: 0, length: bigString.utf16.count)
let smallStringRange = NSRange(location: bigStringRange.length, length: smallString.utf16.count)

let bigStringFontSize: CGFloat = 28
let smallStringFontSize: CGFloat = 18

string.beginEditing()

string.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: bigStringFontSize), range: bigStringRange)
string.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: smallStringFontSize), range: smallStringRange)
string.addAttribute(NSBaselineOffsetAttributeName, value: (bigStringFontSize - smallStringFontSize) / 2, range: smallStringRange)

string.endEditing()

Swift 4

let bigString = "BIG"
let smallString = "Small String"
let fullString = "/(bigString) /(smallString)"
let string = NSMutableAttributedString(string: fullString)

let bigStringRange = NSRange(location: 0, length: bigString.count)
let smallStringRange = NSRange(location: bigStringRange.length, length: smallString.count)

let bigStringFontSize: CGFloat = 28
let smallStringFontSize: CGFloat = 18

string.beginEditing()

string.addAttribute(.font, value: UIFont.systemFont(ofSize: bigStringFontSize), range: bigStringRange)
string.addAttribute(.font, value: UIFont.systemFont(ofSize: smallStringFontSize), range: smallStringRange)
string.addAttribute(.baselineOffset, value: (bigStringFontSize - smallStringFontSize) / 2, range: smallStringRange)

string.endEditing()