UITextField 边框底部不会完全显示
Posted
技术标签:
【中文标题】UITextField 边框底部不会完全显示【英文标题】：UITextField border-bottom will not be displayed fully 【发布时间】：2017-06-28 08:05:10 【问题描述】：我是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
【问题讨论】：
你在viewDidLoad做这个吗？
@Dhiru，是的，我将此函数调用到 ViewDidLoad
查看我的答案并尝试，如果这对您有用，请告诉我？
【参考方案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
【讨论】：
在覆盖 viewDidLayoutSubviews 类之后，它仍然不适合我。 imgur.com/S13pe0c【参考方案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]))`
【讨论】：
我猜这不是一个正确的方法，因为这会使文本字段的背景变成白色，如果我需要透明背景怎么办？ 另一个建议是向 UIView 添加一个扩展，将宽度为 1px 的 UIView 添加到 textview 中并将其约束到底部。简单的解决方案。由于它使用约束对齐，因此它还将缩放设备方向的变化。 感谢您的建议，但是很多 UIView 会导致 UI 变慢。你怎么看？ 我已经多次使用这个技巧了，从来没有遇到过性能问题。 “UIView”类型的扩展值出现错误，“border.color = .black”没有成员“color”【参考方案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)
【讨论】：
我完全按照你在这里写的做了，但是我不知道为什么边框与 TextField 的宽度不匹配:( 在我的设备上完美运行。谢谢 我的答案更新了，你可以试试新功能 所以请将其标记为已解决 :)（勾选留下答案） 对于那些正在寻找相同问题答案的用户，请检查此功能，边框可能在模拟器上不起作用，在实际设备上尝试，它会起作用。【参考方案4】：我认为您正在模拟器中检查您的代码。只需在设备中运行您的代码。它非常适合我。上面的代码没有错。
【讨论】：
让我试试这个。 是的，它工作得很好，我想知道为什么它不能在模拟器上工作？ 模拟器！ - 拼写错误【参考方案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
【讨论】：
【参考方案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 边框底部不会完全显示的主要内容，如果未能解决你的问题，请参考以下文章