ios - usar - dibuje solo el borde superior, derecho e inferior alrededor de una uilabel

sacarle provecho al apple pencil

Question

Intento agregar borde para un uilabel, pero solo quiero tener borde top, right, and bottom .

Me gusta esto

           ----------------
                          |
            I am a label  |
                          |
           ----------------

Intento usar estos códigos, pero agrega los 4 lados por defecto

    myLabel.layer.borderWidth = 1;
    myLabel.layer.borderColor = [UIColor blackColor];

¿Es que de todos modos solo puedo agregar 3 lados, o incluso 1 o 2 lados?

¡Gracias!

Answer 1

¡Aquí van chicos! Espero que esto ayude, agregue esto dentro de la clase de reemplazo de UItextfield

UIView *view = [[UIView alloc] init];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.layer.borderWidth = 1;
view.backgroundColor = [UIColor blackColor];
[self addSubview:view];

[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:1.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:1.0]];

Answer 2

Estoy usando Swift 3.

// myLabel is a UILabel
let frame = myLabel.frame //Frame of label

// Bottom Layer
let bottomLayer = CALayer()
bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
bottomLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(bottomLayer)

// Top Layer
let topLayer = CALayer()
topLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: 1)
topLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(topLayer)

Similar:

// Right Layer
let rightLayer = CALayer()
rightLayer.frame = CGRect(x: frame.width - 1, y: 0, width: 1, height: frame.height)
rightLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(rightLayer)

Donde 1 es el ancho del borde.

Answer 3

Gracias @jaiswal, usé tu código y creé una función, porque tenía más de 10 UILabels. Lo he puesto aquí como referencia.

 func buttomBoarder(label: UILabel) -> UILabel {
    let frame = label.frame

    let bottomLayer = CALayer()
    bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
    bottomLayer.backgroundColor = UIColor.black.cgColor
    label.layer.addSublayer(bottomLayer)

    return label

}

Llamado usando

labelName = buttomBoarder(label: labelName)

Answer 4

Puede dibujar sus tres lados con una línea creando un CALayer que use un UIBezierPath. Con todos los ejemplos, incluya el marco QuartzCore como parte de su proyecto.

Siguiendo tu código original como punto de partida:

// at the top of the file with this code, include:
#import <QuartzCore/QuartzCore.h>

CGRect rect = myLabel.frame;

UIBezierPath * linePath = [UIBezierPath bezierPath];

// start at top left corner
[linePath moveToPoint:CGPointMake(0,0);
// draw top line across
[linePath addLineToPoint:CGPointMake(rect.size.width, 0);
// draw right vertical side
[linePath addLineToPoint:CGPointMake(rect.size.width, rect.size.height);
// draw left vertical side
[linePath addLineToPoint:CGPointMake(0, rect.size.height);

// draw from bottom right corner back to bottom left corner
[linePath addLineToPoint:CGPointMake(0, rect.size.height);

// create a layer that uses your defined path
CAShapeLayer * lineLayer = [CAShapeLayer layer];
lineLayer.lineWidth = 1.0;
lineLayer.strokeColor = [UIColor blackColor].CGColor;

lineLayer.fillColor = nil;
lineLayer.path = linePath.CGPath;

[myLabel.layer addSublayer:lineLayer];

Answer 5

Puede hacerlo de varias maneras: la primera es la más fácil, simplemente busque una imagen que se parezca a sus trazos de borde. Luego, agréguelo una parte posterior de UIImageView de su UILabel. La segunda forma es anular UILabel drawRect: luego dibuja el stoke según tus necesidades.

Answer 6

Puede subclase UILabel y anular drawRect: para hacer eso.

O simplemente puedes hacer 3 UIView con fondo negro como subvistas de esta etiqueta. Si establece la función de autorizingMask correctamente, se ajustarán a los cambios en el tamaño de la etiqueta. El borde superior debe tener un ancho flexible y un margen inferior flexible, el borde inferior debe tener un ancho flexible y un margen superior flexible, el borde derecho debe tener una altura flexible y un margen izquierdo flexible.

Answer 7

Puedes usar una máscara. Este es el código que utilicé para probar la teoría y funciona bien:

// Define the border width in a variable, we''ll be using it elsewhere
CGFloat borderWidth = 1.0;

// This creates a testing view to test the theory, in your case this will be your UILabel
UIView* view = [[UIView alloc] initWithFrame:CGRectMake(20, 60, 250, 100)];
view.layer.borderColor = [UIColor blackColor].CGColor;
view.layer.borderWidth = borderWidth;
[self.view addSubview:view];

// Create the mask to cover the area of the view you want to **show**
// Here, we create a mask that covers most of the view, except the left edge
// The mask needs to be coloured in black, as black acts as transparent, whereas white is opaque in mask parlance
UIView* mask = [[UIView alloc] initWithFrame:CGRectMake(borderWidth, 0, view.frame.size.width - borderWidth, view.frame.size.height)];
mask.backgroundColor = [UIColor blackColor];
view.layer.mask = mask.layer;

Puede ajustar el tamaño y la posición de la máscara (dado el borde Ancho del borde) para mostrar / ocultar los bordes del borde que le interesan. El ejemplo anterior oculta el borde izquierdo.

Answer 8

Tendrás que ajustar los tamaños, pero esto es lo esencial. (podrían ser algunos errores tipográficos)

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 35)];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 15, 320, 20)];

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0, 40, 320, .5);

CALayer *rightBorder = [CALayer layer];
rightBorder.frame = CGRectMake(320, 0, 40, .5);

CALayer *topBorder = [CALayer layer];
topBorder.frame = CGRectMake(0, 0, 320, .5);

[view.layer addSublayer:bottomBorder];
[view.layer addSublayer:topBorder];
[view.layer addSublayer:rightBorder];
[view.layer addSublayer:label];