2016-10-09 2 views
0

У меня вопрос о создании подчеркивания на UITextField. Я пытаюсь сделать подчеркивание с баром на каждом конце, как показано ниже.UITextField пользовательский подчеркивание в Swift

enter image description here

Я попытался следующие, и получил это. На правом конце нет бара.

enter image description here

extension UITextField { 
func underline() { 
    let borderWidth = CGFloat(1.0) 
    let endBorderHeight = CGFloat(10.0) 

    let bottom = CALayer() 
    bottom.frame = CGRect(
     x: 1, 
     y: self.frame.height - borderWidth, 
     width: self.frame.width - 2, 
     height: borderWidth) 

    bottom.borderWidth = borderWidth 
    bottom.borderColor = UIColor.lightGrayColor().CGColor 

    let leftEndBorder = CALayer() 
    leftEndBorder.frame = CGRect(
     x: 0, 
     y: self.frame.height - endBorderHeight, 
     width: borderWidth, 
     height: endBorderHeight) 
    leftEndBorder.borderWidth = borderWidth 
    leftEndBorder.borderColor = UIColor.lightGrayColor().CGColor 

    print(bottom.frame.width) 
    let rightEndBorder = CALayer() 
    rightEndBorder.frame = CGRect(
     x: self.frame.width - 1, 
     y: self.frame.height - endBorderHeight, 
     width: borderWidth, 
     height: endBorderHeight) 

    rightEndBorder.borderWidth = borderWidth 
    rightEndBorder.borderColor = UIColor.lightGrayColor().CGColor 

    self.layer.addSublayer(leftEndBorder) 
    self.layer.addSublayer(bottom) 
    self.layer.addSublayer(rightEndBorder) 
    self.layer.masksToBounds = true 
    } 
} 

Я мог бы сделать бар на левой стороне, но возникают проблемы, делая правую сторону из-за неправильные х позициями rightEndBorder вероятно?

Может ли кто-нибудь сказать мне, что я делаю неправильно?

----- редактировать

Я попытался установить рентгеновское положение rightEndBorder до 200, и он дал мне следующее.

enter image description here

Но если бы я попытался установить его на 300, я не вижу его больше.

----- редактировать

Проверено, если весь TextField был показан на экране.

enter image description here

----- редактировать

Это было то, что начальные и конечные ограничения, которые изменили ширину TextField наверное.

enter image description here

----- Решение

Проблема заключалась в том, что я начальные и конечные ограничения на TextField и эти ограничения изменили ширину после того, как был вставлен unline. После поиска google я решил, что должен был сделать подчеркивание после того, как были применены ограничения, которые находятся в функции viewDidLayoutSubviews().

+0

Вы меняете ширину textField после запуска этого кода? –

+0

@IanMoses Я думаю, что если ограничения, установленные на раскадровке, не меняют своей ширины.Я сделал текстовое поле на раскадровке и просто добавил подчеркивание в viewDidLoad(). – eChung00

+0

Можете ли вы напечатать текстовое поле и текстовое поле rightEndBorder x-originins после инициализации. Каковы эти ценности? –

ответ

1

Перепечатывание из раздела комментариев в качестве ответа.

Проблема заключается в том, что вид отключается (таким образом, вы не увидите правую границу), либо правая граница границы будет смещена дальше сразу после настройки. Причина для подозрения в этом заключается в вашей картине, где правая граница помещается в x = 200, потому что она находится уже на половину вдоль нижней границы, но должна быть только 40% пути вдоль линии.

Update:

Правильный ответ на этот вопрос ограничения, накладываемые причиной ширина TextField изменить.

+0

Большое спасибо Яну. – eChung00

+0

Без проблем, рад помочь. –

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