如何在Swift中只显示UITextField的底部边框

Question

我想只显示底部边框并隐藏其他边.

输出我看到:你可以看到我也看到了顶部,左边和右边的边框,它们是黑色的,我想要删除它们.只需底部白色厚2.0边框.

我正在使用的代码(来源):

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

Answer 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

如果您正在使用自动布局,则设置完美约束,否则不会出现底线.

希望能帮助到你.

Answer 2

@mina-fawzy 我喜欢masksToBoundsMina Fawzy包含的答案...

我遇到了这个问题，我试图为 a 的底部边框设置样式UITextField，而使用 a 的评论CGRect对我有用，但是，我在使用不同的屏幕尺寸时遇到了问题，或者如果我将方向从纵向更改为横向视图.

IE。我的 Xcode Main.storyboard 是用 iPhone XS Max 设计的，UITextField 被限制在距离屏幕左/右 20 点的位置。在我的文章中，viewDidLoad()我UITextField使用 CGRect 方法对（文本字段）进行了样式化，使矩形的宽度等于textfield.frame.width.

在 iPhone XS Max 上测试时，一切正常，但是，当我在 iPhone 7（较小的屏幕宽度）上测试时，CGRect 在 期间抓取了 iPhone XS Max 的宽度viewDidLoad()，导致矩形（底线）太宽，右边缘离开屏幕。同样，当我在 iPad 屏幕上进行测试时，底线太短了。而且，在任何设备上，旋转到横向视图都不会重新计算底线所需的矩形大小。

我发现的最佳解决方案是将 CGRect 的宽度设置为大于最长的 iPad 尺寸（我随机选择 2000）然后添加textfield.layer.masksToBounds = true. 这很有效，因为现在这条线从一开始就很长，不需要重新计算，并且无论屏幕大小或方向如何，都被剪裁到 UITextField 的正确宽度。

谢谢米娜，希望这能帮助其他有同样问题的人！

Answer 3

目标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;

迅速

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

Answer 4

我已经尝试了所有这些答案，但除了这个答案，没有人为我工作

  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

Answer 5

斯威夫特 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

   }
}

Answer 6

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

可以在您的方法中添加其他参数，例如添加边框高度，颜色。