2016-11-25 49 views
1

的子視圖我想要當它與雨燕建立在我的iOS應用一個UIScrollView的子視圖以編程方式創建一個的UITextField下劃線邊框。我已經設法實現這一點,但只有當UITextfield是視圖的子視圖時,我的應用程序的以下屏幕截圖纔會顯示。如何添加下劃線邊境到的UITextField當它是滾動型

UITextfield with an Underline Border

現在我想的UITextField是相同視圖內一個UIScrollView,但下劃線邊框不顯示的子視圖。

我成功設法在viewDidLayoutSubviews方法創建的CALayer如下創建上面的截圖下劃線邊框。

let usernameTextField = UITextField() 

    override func viewDidLoad() { 
     usernameTextField.translatesAutoresizingMaskIntoConstraints = false 
     view.addSubview(usernameTextField) 
     let constraints: [NSLayoutConstraint] = [ 
     usernameTextField.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 20), 
     usernameTextField.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor), 
     usernameTextField.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor) 
     ] 
     NSLayoutConstraint.activate(constraints) 
    } 

    override func viewDidLayoutSubviews() { 
      let textField = usernameTextField 
      let border = CALayer() 
      let width = CGFloat(1.0) 
      border.borderColor = UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0).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 

    } 

但是,當UITextField是UIScrollView的子視圖時,這不起作用。這是我曾嘗試:

let usernameTextField = UITextField() 
    let scrollView = UIScrollView() 

override func viewDidLoad() { 
    usernameTextField.translatesAutoresizingMaskIntoConstraints = false 
    scrollView.translatesAutoresizingMaskIntoConstraints = false 
    scrollView.addSubview(usernameTextField) 
    view.addSubview(scrollView) 
    let scrollViewConstraints: [NSLayoutConstraint] = [ 
     scrollView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor), 
     scrollView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor), 
     scrollView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor), 
     scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20) 
    ] 

    NSLayoutConstraint.activate(scrollViewConstraints) 
    let constraints: [NSLayoutConstraint] = [ 
    usernameTextField.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 20), 
     usernameTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor), 
     usernameTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor) 
    ] 
    NSLayoutConstraint.activate(constraints) 
    } 

    override func viewDidLayoutSubviews() { 
     let textField = usernameTextField 
     let border = CALayer() 
     let width = CGFloat(1.0) 
     border.borderColor = UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0).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 

} 

任何人都可以提出一個方法,使當的UITextField相同視圖內一個UIScrollView的一個子視圖這項工作?

編輯

我已經接受了馬蒂亞斯的回答,他曾建議我子視圖一個UIView作爲一個邊界,而不是一個子層。

let border = UIView() 
    border.backgroundColor =UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0) 
      border.translatesAutoresizingMaskIntoConstraints = false 

    textField.addSubview(border) 

     border.heightAnchor.constraint(equalToConstant: 1).isActive = true 
     border.widthAnchor.constraint(equalTo:textField.widthAnchor).isActive = true 
     border.bottomAnchor.constraint(equalTo: textField.bottomAnchor, constant: -1).isActive = true 
     border.leftAnchor.constraint(equalTo: textField.leftAnchor).isActive = true 

這個答案,但只是好奇,我會很感激的人誰也可以解釋,如果有可能實現與一個子層相同。

回答

0

而不是增加一個子層,儘量只增加一個子視圖:)

let border = UIView() 
border.backgroundColor =UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0) 
       border.translatesAutoresizingMaskIntoConstraints = false 

textField.addSubview(border) 

      border.heightAnchor.constraint(equalToConstant: 1).isActive = true 
      border.widthAnchor.constraint(equalTo:textField.widthAnchor).isActive = true 
      border.bottomAnchor.constraint(equalTo: textField.bottomAnchor, constant: -1).isActive = true 
      border.leftAnchor.constraint(equalTo: textField.leftAnchor).isActive = true 
+0

大。邊框顯示。爲了幫助他人,你可能想刪除cgColor,因爲邊界只是UIView而不是CALayer。但你的答案奏效了。 – gwinyai

+0

對不起,我的錯誤編輯了我的答案以糾正錯誤 – Matthias