TableView中Swift TextField上的底部边框宽度

时间:2017-06-06 08:38:39

标签: ios swift tableview border textfield

我构建了一个静态tableview,其中Rowes比屏幕更多,因此用户必须滚动才能看到所有单元格。

每个单元格都有一个带有以下类的文本字段以添加底部边框:

class TextFieldWithBottomBorder: UITextField {
   let border = CALayer()
   let width = CGFloat(1.0)

   func addBottomBorder(color: UIColor){
       self.border.borderColor = color.cgColor
       self.border.frame = CGRect(x: 0, y: self.frame.size.height - width, width:  self.frame.size.width, height:self.frame.size.height)

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

   func changeBorderColor(color: UIColor){
       self.border.borderColor = color.cgColor
   }
}

我从服务器e收到一些数据后调用该方法。克。

self.firstnameTextField.text = firstNameFromDB
self.firstnameTextField.addBottomBorder(color: .blue)

这适用于当前显示的每个单元格。但是当前视图中的单元格比文本字段短。 看到这个截图,对于“Vorname”,意味着firstName一切看起来都不错,但对于电子邮件,密码等,边框是短的。 http://share-your-photo.com/34b5e80253

2 个答案:

答案 0 :(得分:1)

在调用addBottomBorder之后,看起来调整了UITextField的大小,因此在该行使用的UIView现在还不够宽。很难说为什么在没有看到更多代码的情况下会这样做但是有几种方法可以用来克服它。

1)切换到UIView而不是CALayer并使用自动布局将视图保持在校正位置。

2)覆盖layoutSubviews以更新底线的框架。

最简单的可能是选项2(虽然我会选择选项1),它看起来像这样:

override func layoutSubviews() {
    super.layoutSubviews()
    self.border.frame = CGRect(x: 0, y: self.frame.size.height - width, width:  self.frame.size.width, height:self.frame.size.height)
}

现在,只要文本字段的框架/大小改变边框线的框架/大小,CALayer就会适当更新。

答案 1 :(得分:0)

将此类用于底线文本字段

@IBDesignable class BottomTextField: UITextField {
    var lineView = UIView()

 @IBInspectable var lineViewBgColor:UIColor = UIColor.gray{
        didSet {
            if !isFirstResponder {
                lineView.backgroundColor = lineViewBgColor
            }
        }
    }
required init?(coder aDecoder:NSCoder) {
        super.init(coder:aDecoder)!
        setup()
    }

    override init(frame:CGRect) {
        super.init(frame:frame)
        setup()
    }

    // MARK:- Private Methods
    private func setup() {
        lineView.frame = CGRect(x:CGFloat(0), y:self.frame.size.height-2, width:self.frame.size.width, height:CGFloat(1))
        lineView.backgroundColor = lineViewBgColor

        self.addSubview(lineView)
    }

}