iphone - left - top align label swift

Cómo dibujar texto vertical en UILabel

Question

Actualmente estoy trabajando en el dibujo de texto vertical chino en una etiqueta. Esto es lo que estoy tratando de lograr, aunque con caracteres chinos:

He estado planeando dibujar cada personaje, rotarlo 90 grados hacia la izquierda, luego rotar toda la etiqueta mediante transformaciones afines para obtener el resultado final. Sin embargo, se siente terriblemente complicado. ¿Hay una forma más fácil de dibujar el texto sin la complicada magia de CoreGraphics que me estoy perdiendo?

Answer 1

Bueno, puedes hacer lo siguiente:

labelObject.numberOfLines = 0;
labelObject.lineBreakMode = NSLineBreakByCharWrapping;

y setFrame con - altura: 100, ancho: 20 Funcionará bien ..

Answer 2

Esta es otra forma de dibujar texto vertical, subclasificando UILabel . Pero es algo diferente de lo que quiere la pregunta.

C objetivo

@implementation MyVerticalLabel

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);
    CGContextConcatCTM(context, transform);
    CGContextTranslateCTM(context, -rect.size.height, 0);

    CGRect newRect = CGRectApplyAffineTransform(rect, transform);
    newRect.origin = CGPointZero;

    NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
    textStyle.lineBreakMode = self.lineBreakMode;
    textStyle.alignment = self.textAlignment;

    NSDictionary *attributeDict =
    @{
      NSFontAttributeName : self.font,
      NSForegroundColorAttributeName : self.textColor,
      NSParagraphStyleAttributeName : textStyle,
      };
    [self.text drawInRect:newRect withAttributes:attributeDict];
}
@end

Una imagen de muestra es la siguiente:

Rápido

Se puede poner en el guión gráfico, y ver el resultado directamente. Al igual que la imagen, su marco contendrá el texto vertical. Y los atributos de texto, como textAlignment , font , también funcionan bien.

@IBDesignable
class MyVerticalLabel: UILabel {

    override func drawRect(rect: CGRect) {
        guard let text = self.text else {
            return
        }

        // Drawing code
        let context = UIGraphicsGetCurrentContext()

        let transform = CGAffineTransformMakeRotation( CGFloat(-M_PI_2))
        CGContextConcatCTM(context, transform)
        CGContextTranslateCTM(context, -rect.size.height, 0)

        var newRect = CGRectApplyAffineTransform(rect, transform)
        newRect.origin = CGPointZero

        let textStyle = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle
        textStyle.lineBreakMode = self.lineBreakMode
        textStyle.alignment = self.textAlignment

        let attributeDict: [String:AnyObject] = [
            NSFontAttributeName: self.font,
            NSForegroundColorAttributeName: self.textColor,
            NSParagraphStyleAttributeName: textStyle,
        ]

        let nsStr = text as NSString
        nsStr.drawInRect(newRect, withAttributes: attributeDict)
    }

}

Swift 4

override func draw(_ rect: CGRect) {
    guard let text = self.text else {
        return
    }

    // Drawing code
    if let context = UIGraphicsGetCurrentContext() {
        let transform = CGAffineTransform( rotationAngle: CGFloat(-Double.pi/2))
        context.concatenate(transform)
        context.translateBy(x: -rect.size.height, y: 0)
        var newRect = rect.applying(transform)
        newRect.origin = CGPoint.zero

        let textStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
        textStyle.lineBreakMode = self.lineBreakMode
        textStyle.alignment = self.textAlignment

        let attributeDict: [NSAttributedStringKey: AnyObject] = [NSAttributedStringKey.font: self.font, NSAttributedStringKey.foregroundColor: self.textColor, NSAttributedStringKey.paragraphStyle: textStyle]

        let nsStr = text as NSString
        nsStr.draw(in: newRect, withAttributes: attributeDict)
    }
}

Answer 3

Funciona

UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 30, 100)];
lbl.transform = CGAffineTransformMakeRotation((M_PI)/2);

Answer 4

Probé el método ofrecido por Simha.IC pero no funcionó bien para mí. Algunos personajes son más delgados que otros y se colocan dos en una línea. P.ej

W
ai
ti
n
g

La solución para mí fue crear un método que transforme la cadena en un texto de varias /n agregando /n después de cada carácter. Aquí está el método:

- (NSString *)transformStringToVertical:(NSString *)originalString
{
    NSMutableString *mutableString = [NSMutableString stringWithString:originalString];
    NSRange stringRange = [mutableString rangeOfString:mutableString];

    for (int i = 1; i < stringRange.length*2 - 2; i+=2)
    {
        [mutableString insertString:@"/n" atIndex:i];
    }

    return mutableString;
}

Entonces simplemente configura la etiqueta de esta manera:

label.text = [self transformStringToVertical:myString];
CGRect labelFrame = label.frame;
labelFrame.size.width  = label.font.pointSize;
labelFrame.size.height = label.font.lineHeight * myString.length;
label.frame = labelFrame;

¡Disfrutar!

Answer 5

Si desea rotar la etiqueta completa (incluidos los caracteres), puede hacerlo de la siguiente manera:

1. Primero agregue la biblioteca QuartzCore a su proyecto.

2. Crear una etiqueta:

   UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 300.0, 30.0)];
   [label setText:@"Label Text"];

3. Gire la etiqueta:

   [label setTransform:CGAffineTransformMakeRotation(-M_PI / 2)];

Dependiendo de cómo desee ubicar la etiqueta, es posible que deba establecer el punto de anclaje. Esto establece el punto alrededor del cual se produce una rotación. P.ej:

    [label.layer setAnchorPoint:CGPointMake(0.0, 1.0)];