Question

我是Swift的新用户，我想将边框底部添加到UITextField（全边框到UITextField's宽度）。我搜索互联网，我发现了很多代码，但它们并没有按照我的意愿运行。

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

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

创建扩展程序

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

您需要在 viewDidLayoutSubviews （在UIViewController class）或 drawRect （在UIView class中）进行用户界面自定义，而不是在{ {1}}

viewDidLoad

Answer 4

我认为您正在模拟器中检查您的代码。只需在设备中运行您的代码。它对我来说很完美。上面的代码没有错误。

Answer 5

注意：如果在Storyboard中创建了UITextField对象，则在Storyboard Attributes Inspector中将其Border Style属性设置为None。

以下变量textField是UITextField控件的对象，将在其中设置底部边框。

快速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不会完全显示

6 个答案: