UITextField 边框底部不会完全显示

Question

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

我的需求：我希望将边框底部设置为UITextField 的全宽。

输出图片链接：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

您需要在 viewDidLayoutSubviews（UIViewController class）或 drawRect（UIView class）中进行 UI 自定义，而不是在 viewDidLoad 中进行 p>

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 2

这应该可以解决问题。

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

另一种没有阴影的方法是将UIView 的1px 添加到TextField

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 3

创建一个扩展

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 4

我认为您正在模拟器中检查您的代码。只需在设备中运行您的代码。它非常适合我。上面的代码没有错。

Answer 5

注意：如果 UITextField 对象是在 Storyboard 中创建的，则在 Storyboard Attributes Inspector 中将其 Border Style 属性设置为 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)