2014-02-05 4 views
16

Я пытаюсь добавить границу для uilabel, но я хочу только иметь границу top, right, and bottom.нарисовать только верхнюю, правую и нижнюю границу вокруг uilabel

как этот

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

Я стараюсь использовать эти коды, но это добавляет все 4 стороны по умолчанию

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

Это в любом случае я могу только добавить 3-х сторон, или даже 1 или 2 стороны?

Спасибо!

+0

Честно говоря, нет ничего плохого в добавлении трех тонких черных UIView - это очень легко с автозапуском. – Fattie

ответ

24

Вы можете использовать маску. Это код, который я использовал, чтобы проверить теорию, и она хорошо работает:

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

Вы можете настроить размер и положение маски (с учетом BorderWidth), чтобы показать/скрыть границы края вы заинтересованы в . Пример выше скрывает левый край.

+0

Это выглядит здорово, спасибо. Я хотел бы проголосовать за вас, если у меня будет 15 репутации. – user3276557

+0

@ user3276557 Это лучше, чем другие решения, перечисленные ниже, поскольку это оставляет рисунок границы в структуре CoreGraphics и не загрязняет вашу иерархию представлений другими видами. Маска оптимизирована и, следовательно, будет работать лучше. (Так что не уверен, почему это уже не принятый ответ ...) – WDUK

+1

О, мне очень жаль, я очень новичок в Stackoverflow, я думал, что смогу принять как ваш ответ, так и ответ Микаэля. Ваш ответ лучше. возможно, я должен просто проголосовать, если у меня будет достаточно репутации ... – user3276557

0

Вы можете подклассифицировать UILabel и переопределить drawRect: сделать это.

Или вы можете просто сделать 3 UIView с черным фоном в качестве подзонов этой метки. Если вы правильно установите для них autooresizingMask, они приступят к изменениям в размере метки. Верхняя граница должна иметь гибкую ширину и гибкое нижнее поле, нижняя граница должна иметь гибкую ширину и гибкий верхний край, правая граница должна иметь гибкую высоту и гибкое левое поле.

+0

Возможно, некоторые коды были бы полезны. Но спасибо за ваши идеи. – user3276557

6

Вам нужно будет отрегулировать размеры, но это его суть. (возможно, некоторые опечатки)

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

Думаю, я только хочу, чтобы это было на моем лейбле, так как у меня около 6 на одном контроллере.в вашем коде, мне, возможно, придется создать еще 6 uiviews, но спасибо за вашу идею. – user3276557

+0

Просто снимите вид, это то же самое. Я просто думаю, что это опрятно. – Mika

0

Вы можете сделать это несколькими способами: 1-й самый простой, просто найдите изображение, похожее на ваши штрихи. Затем добавьте UIImageView обратно в UILabel. Второй способ переопределяет UILabel drawRect: затем нарисуйте сток в соответствии с вашими потребностями.

6

Вы можете нарисовать свои три стороны одной строкой, создав CALayer, который использует UIBezierPath. Со всеми примерами включите платформу QuartzCore как часть вашего проекта.

После исходного кода в качестве отправной точки:

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

Вот вы, ребята, идти! Надеюсь, что это помогает, Добавить это внутри 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]]; 
3

Я использую 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) 

Аналогично:

// 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) 

Где 1 ширина границы.

Смежные вопросы