Подтвердить что ты не робот

Как показывать только нижнюю границу UITextField в Swift

Я хочу показать нижнюю границу только и скрыть другие стороны.

Вывод, который я вижу: Как вы видите, я вижу верхнюю, левую и правую границы, а также они черного цвета, я хочу их удалить. Только нужна нижняя белая толстая граница 2.0.

enter image description here

Код, который я использую (источник):

var border = CALayer()
var width = CGFloat(2.0)
border.borderColor = UIColor.whiteColor().CGColor
border.frame = CGRect(x: 0, y: tv_username.frame.size.height - width, width: tv_username.frame.size.width, height: tv_username.frame.size.height)

border.borderWidth = width
tv_username.backgroundColor = UIColor.clearColor()
tv_username.layer.addSublayer(border)
tv_username.layer.masksToBounds = true
tv_username.textColor = UIColor.whiteColor()
4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте сделать это.

var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, myTextField.frame.height - 1, myTextField.frame.width, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)

Вы должны установить для свойства borderStyle значение None

Если вы используете автозапуск, то установите идеальное ограничение, а нижняя линия не появится.

Надеюсь, что это поможет.

Ответ 2

Цель C

[txt.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[txt.layer setBorderColor: [[UIColor grayColor] CGColor]];
[txt.layer setBorderWidth: 0.0];
[txt.layer setCornerRadius:12.0f];
[txt.layer setMasksToBounds:NO];
[txt.layer setShadowRadius:2.0f];
txt.layer.shadowColor = [[UIColor blackColor] CGColor];
txt.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
txt.layer.shadowOpacity = 1.0f;
txt.layer.shadowRadius = 1.0f;

Swift

textField.layer.backgroundColor = UIColor.whiteColor().CGColor
textField.layer.borderColor = UIColor.grayColor().CGColor
textField.layer.borderWidth = 0.0
textField.layer.cornerRadius = 5
textField.layer.masksToBounds = false
textField.layer.shadowRadius = 2.0
textField.layer.shadowColor = UIColor.blackColor().CGColor
textField.layer.shadowOffset = CGSizeMake(1.0, 1.0)
textField.layer.shadowOpacity = 1.0
textField.layer.shadowRadius = 1.0

Ответ 3

Я пробовал весь этот ответ, но никто не работал у меня, кроме этого

  let borderWidth:CGFloat = 2.0 // what ever border width do you prefer 
    let bottomLine = CALayer()

    bottomLine.frame = CGRectMake(0.0, Et_textfield.height  - borderWidth, Et_textfield.width, Et_textfield.height )
    bottomLine.backgroundColor = UIColor.blueColor().CGColor
    bottomLine
    Et_textfield.layer.addSublayer(bottomLine)
    Et_textfield.layer.masksToBounds = true // the most important line of code

Ответ 4

Swift 3:

Просто подкласс ваш UITextField

class BottomBorderTF: UITextField {

var bottomBorder = UIView()
override func awakeFromNib() {

    //MARK: Setup Bottom-Border
    self.translatesAutoresizingMaskIntoConstraints = false
    bottomBorder = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
    bottomBorder.backgroundColor = UIColor.orange
    bottomBorder.translatesAutoresizingMaskIntoConstraints = false
    addSubview(bottomBorder)
    //Mark: Setup Anchors
    bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    bottomBorder.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    bottomBorder.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    bottomBorder.heightAnchor.constraint(equalToConstant: 1).isActive = true // Set Border-Strength

   }
}

Ответ 5

Мысль из ответа @Ashish, использовала тот же подход давно в Objective-C, но реализация расширения будет более полезной.

extension UITextField {
    func addBottomBorder(){
        let bottomLine = CALayer()
        bottomLine.frame = CGRect(x: 0, y: self.frame.size.height - 1, width: self.frame.size.width, height: 1)
        bottomLine.backgroundColor = UIColor.white.cgColor
        borderStyle = .none
        layer.addSublayer(bottomLine)
    }
}

В вашем контроллере:

self.textField.addBottomBorder()

Можно добавить дополнительные параметры в ваш метод, такие как добавление высоты рамки и цвета.

Ответ 6

@Mina-Fawzy Мне понравился ответ, который включал masksToBounds Мины Фоузи...

Я столкнулся с этой проблемой, когда пытался стилизовать нижнюю границу UITextField, и комментарии, использующие CGRect, помогли мне, однако я столкнулся с проблемами при использовании экранов другого размера или при изменении ориентации. на ландшафтный вид с портрета.

то есть. My Xcode Main.storyboard был разработан для iPhone XS Max, а UITextField ограничен 20 точками слева/справа от экрана. В моем viewDidLoad() я стилизовал UITextField (текстовое поле), используя подход CGRect, сделав ширину прямоangularьника равной textfield.frame.width.

При тестировании на iPhone XS Max все работало отлично, НО, когда я тестировал на iPhone 7 (меньшая ширина экрана), CGRect захватывал ширину iPhone XS Max во время viewDidLoad(), в результате чего прямоangularьник (нижняя строка) быть слишком широким, и правый край исчез с экрана. Точно так же, когда я тестировал на экранах iPad, нижняя строка была слишком короткой. А также, на любом устройстве, поворачивающемся в альбомную ориентацию, не пересчитывался размер прямоangularьника, необходимый для нижней строки.

Наилучшим решением, которое я нашел, было установить ширину CGRect больше, чем самое длинное измерение iPad (я случайно выбрал 2000), и затем добавил textfield.layer.masksToBounds = true. Это сработало идеально, потому что теперь линия достаточно длинная с самого начала, ее не нужно пересчитывать никогда, и она обрезается до правильной ширины UITextField независимо от размера экрана или ориентации.

Спасибо, Мина, и надеюсь, что это поможет другим с той же проблемой!

Ответ 7

Для нескольких текстовых полей

  override func viewDidLoad() {


    configureTextField(x: 0, y: locationField.frame.size.height-1.0, width: locationField.frame.size.width, height:1.0, textField: locationField)
    configureTextField(x: 0, y: destinationField.frame.size.height-1.0, width: destinationField.frame.size.width, height:1.0, textField: destinationField)
    configureTextField(x: 0, y: originField.frame.size.height-1.0, width: originField.frame.size.width, height:1.0, textField: originField)
    configureTextField(x: 0, y: nameField.frame.size.height-1.0, width: nameField.frame.size.width, height:1.0, textField: nameField)

    locationField.text="Hello"
    super.viewDidLoad()

    // Do any additional setup after loading the view.
}

func configureTextField(x:CGFloat,y:CGFloat,width:CGFloat,height:CGFloat,textField:UITextField)

{
    let bottomLine = CALayer()
    bottomLine.frame = CGRect(x: x, y: y, width: width, height: height)
    bottomLine.backgroundColor = UIColor.white.cgColor
    textField.borderStyle = UITextBorderStyle.none
    textField.layer.addSublayer(bottomLine)


}

Ответ 8

Установлена нижняя граница текстового поля, но есть еще некоторые проблемы для устройств. Так что нижняя граница не помещается в текстовое поле. Я обнаружил эту проблему с помощью кода, подобного этому. Отлично работает swift 4.2

let bottomLine = CALayer()
        bottomLine.frame = CGRect(x: 0.0, y: textField.frame.height - 1, width: screenSize.width - 32, height: 1.0)
        bottomLine.backgroundColor = UIColor(hex: 0xD5D5D5).cgColor
        textField.borderStyle = UITextField.BorderStyle.none
        textField.layer.addSublayer(bottomLine)

Ответ 9

Решение, в котором используется CALayer, не подходит, потому что при повороте устройства подчеркивание не меняет ширину.

class UnderlinedTextField: UITextField {

    override func awakeFromNib() {
        super.awakeFromNib()

        let bottomLine = CALayer()
        bottomLine.frame = CGRect(x: 0, y: self.frame.size.height, width: UIScreen.main.bounds.width, height: 1)
        bottomLine.bounds = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: self.frame.size.height)
        bottomLine.backgroundColor = UIColor.black.cgColor
        borderStyle = .none
        layer.addSublayer(bottomLine)
        layer.masksToBounds = true
    }
}

Лучшее решение - использовать UIView.

class UnderlinedTextField: UITextField {
    private let defaultUnderlineColor = UIColor.black
    private let bottomLine = UIView()

    override func awakeFromNib() {
        super.awakeFromNib()

        borderStyle = .none
        bottomLine.translatesAutoresizingMaskIntoConstraints = false
        bottomLine.backgroundColor = defaultUnderlineColor

        self.addSubview(bottomLine)
        bottomLine.topAnchor.constraint(equalTo: self.bottomAnchor, constant: 1).isActive = true
        bottomLine.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
        bottomLine.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
        bottomLine.heightAnchor.constraint(equalToConstant: 1).isActive = true
    }

    public func setUnderlineColor(color: UIColor = .red) {
        bottomLine.backgroundColor = color
    }

    public func setDefaultUnderlineColor() {
        bottomLine.backgroundColor = defaultUnderlineColor
    }
}