UITextField border-bottom 不会完全显示

Question

我是 Swift 的新手，我想将边框底部添加到 UITextField（UITextField's 宽度的完整边框）。我在互联网上搜索并找到了很多代码，但它们并不像我想要的那样起作用。

我的需求：我希望将 border-bottom 设置为 UITextField 的全宽。

输出图像link：Chopped Image link

let border = CALayer()
let width = CGFloat(0.5)
border.borderColor = UIColor.darkGray.withAlphaComponent(1).cgColor
border.frame = CGRect(x: 0, y: firstName.frame.size.height - width, width:  firstName.frame.size.width, height: firstName.frame.size.height)

border.borderWidth = width
firstName.layer.addSublayer(border)
firstName.layer.masksToBounds = true

Answer 1

这应该可以解决问题。

self.borderStyle = .none
self.layer.backgroundColor = UIColor.white.cgColor

self.layer.masksToBounds = false
self.layer.shadowColor = UIColor.gray.cgColor
self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
self.layer.shadowOpacity = 1.0
self.layer.shadowRadius = 0.0

可以将其添加为 UIView 的扩展。

extension UIView {
    func addBorder() {
        self.borderStyle = .none
        self.layer.backgroundColor = UIColor.white.cgColor

        self.layer.masksToBounds = false
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
        self.layer.shadowOpacity = 1.0
       self.layer.shadowRadius = 0.0
   }
}

你可以这样称呼它

firstName.addBorder()

另一种没有阴影的方法是在 TextField

中添加 1px 的 UIView

extension UIView {
    func addBorder() {
        let border = UIView.init()
        border.backgroundColor = UIColor.black
        border.translatesAutoresizingMaskIntoConstraints = true
        addSubview(border)
        NSLayoutConstraint.activate
                          (NSLayoutConstraint.constraints
                          (withVisualFormat: "H:|-0-[V]-0-|", 
                          options: [], 
                          metrics: nil, views: ["V" :border]))

        NSLayoutConstraint.activate
                          (NSLayoutConstraint.constraints
                          (withVisualFormat: "V:[V]-0-|", 
                          options: [], 
                          metrics: nil, views: ["V" : border]))

        NSLayoutConstraint.activate
                          (NSLayoutConstraint.constraints
                          (withVisualFormat: "V:|[V(1)]|", 
                          options: [], 
                          metrics: nil, views: ["V" : border]))`
   }
}

Answer 2

您需要在viewDidLayoutSubviews（UIViewController class）或drawRect（在 UIView class) 而不是在 viewDidLoad

中做

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
   //Do your UI Custumization stuff here 

let border = CALayer()
let width = CGFloat(0.5)
border.borderColor = UIColor.darkGray.withAlphaComponent(1).cgColor
border.frame = CGRect(x: 0, y: firstName.frame.size.height - width, width:  firstName.frame.size.width, height: firstName.frame.size.height)

border.borderWidth = width
firstName.layer.addSublayer(border)
firstName.layer.masksToBounds = true
     }

Answer 3

我认为您正在 simulator.Just 运行设备中检查您的代码。它非常适合我。上面的代码没有错。

Answer 4

创建扩展

import Foundation
import UIKit

extension CALayer {

    func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {

        let border = CALayer()

        switch edge {
        case UIRectEdge.top:
            border.frame = CGRect.zero
            border.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: thickness)
            break
        case UIRectEdge.bottom:
            border.frame = CGRect(x: 0, y: self.bounds.height - thickness, width: self.bounds.width, height: thickness)
            break
        case UIRectEdge.left:
            border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.bounds.height)
            break
        case UIRectEdge.right:
            border.frame = CGRect(x: self.bounds.width - thickness, y: 0, width: thickness, height: self.bounds.height)
            break
        default:
            break
        }

        border.backgroundColor = color.cgColor;

        self.addSublayer(border)
    }
}

并从控制器调用它们

someTextField.layer.addBorder(edge: UIRectEdge.bottom, color: UIColor.red, thickness: 2)

更新答案：创建一个新函数并将宽度添加为参数

func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat, width: CGFloat) {

        let border = CALayer()

        switch edge {
        case UIRectEdge.top:
            border.frame = CGRect(x: 0, y: 0, width: width, height: thickness)
            break
        case UIRectEdge.bottom:
            border.frame = CGRect(x: 0, y: self.bounds.height - thickness, width: width, height: thickness)
            break
        case UIRectEdge.left:
            border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.bounds.height)
            break
        case UIRectEdge.right:
            border.frame = CGRect(x: width - thickness, y: 0, width: thickness, height: self.bounds.height)
            break
        default:
            break
        }

        border.backgroundColor = color.cgColor;

        self.addSublayer(border)
    }

之后，您必须为您的 TextField WIDTH 创建一个约束并通过传递约束宽度来调用扩展，就像这样

@IBOutlet weak var textFieldConstraintWidth: NSLayoutConstraint!
self.textField.layer.addBorder(edge: UIRectEdge.bottom, color: UIColor.red, thickness: 2, width: textFieldConstraintWidth.constant)

Answer 5

注意：如果 UITextField 对象是在情节提要中创建的，则在情节提要属性检查器中将其边框样式属性设置为 None。

下面的变量textField是UITextField控件的一个对象，将在其中设置下边框。

Swift 4 码:

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width: textField.frame.size.width, height: textField.frame.size.height)

border.borderWidth = width
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true

Answer 6

只需将UIScreen.main.bounds.width用于不同的设备

我改了：

border.frame = CGRect(x: 0, y: textField.frame.size.height, width: textField.frame.size.width, height: textField.frame.size.height)

至：

bottomLine.frame = CGRect(x: 0, y: self.frame.size.height, width: UIScreen.main.bounds.width-50, height: 0.5)

UITextField border-bottom 不会完全显示

UITextField border-bottom will not be displayed fully

xcode

border

uitextfield

ios

swift