国境のないスウィフトテキストフィールド

Question

私は迅速です。あなたの助けは本当に感謝されます。

私のアプリケーションには2つのテキストフィールドがあります。どのように私は下の写真で与えられているのと同じUIを作成するでしょう。

スクリーンショットに示されているように、境界線の下に1つのみのテキストフィールドを作成したいと考えています。

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

Answer 1

@IBOutlet var textField: UITextField! { 
    didSet { 
    let border = CALayer() 
    let width: CGFloat = 1 // this manipulates the border's width 
    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 2

あなたが再描画コードを実装する必要がなくても、複数のビュー間で、このコンポーネントを再利用することができるようにするUITextFieldのサブクラスを作成します。 @IBDesignableと@IBInspectableでさまざまなプロパティを公開し、ストーリーボードの色と太さを制御できます。また、layoutSubviewsをオーバーライドして「再描画」を実装すると、自動レイアウトを使用していて向きや制約に基づくアニメーションがある場合に境界線が調整されます。 Field、このサブクラスを使用するには、Identityインスペクタでクラスを更新 - -

import UIKit 

class Field: UITextField { 

    private let border = CAShapeLayer() 

    @IBInspectable var color: UIColor = UIColor.blue { 
     didSet { 
      border.strokeColor = color.cgColor 
     } 
    } 

    @IBInspectable var thickness: CGFloat = 1.0 { 
     didSet { 
      border.lineWidth = thickness 
     } 
    } 

    override func draw(_ rect: CGRect) { 
     self.borderStyle = .none 
     let from = CGPoint(x: 0, y: rect.height) 
     let here = CGPoint(x: rect.width, y: rect.height) 
     let path = borderPath(start: from, end: here).cgPath 
     border.path = path 
     border.strokeColor = color.cgColor 
     border.lineWidth = thickness 
     border.fillColor = nil 
     layer.addSublayer(border) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     let from = CGPoint(x: 0, y: bounds.height) 
     let here = CGPoint(x: bounds.width, y: bounds.height) 
     border.path = borderPath(start: from, end: here).cgPath 
    } 

    private func borderPath(start: CGPoint, end: CGPoint) -> UIBezierPath { 
     let path = UIBezierPath() 
     path.move(to: start) 
     path.addLine(to: end) 
     return path 
    } 
} 

次に、あなたがあなたのストーリーボードにテキストフィールドビューを追加するときに、その後で：効果的にあなたのサブクラスは、このようになります - それすべて言いました属性インスペクタ、色と太さを設定できます。

そのためのサンプルコードの下にテキストフィールドにUITextFieldの境界を設定する方法

func setTextFieldBorder(_ dimension: CGRect) -> CALayer { 
    let border = CALayer() 
    let width = CGFloat(2.0) 
    border.borderColor = UIColor.darkGray.cgColor 
    border.frame = CGRect(x: 0, y: dimension.size.height - width, width: dimension.size.width, height: dimension.size.height) 

    border.borderWidth = width 
    return border 

} 

：txtDemoはUITextFieldののIBOutletある

txtDemo.layer.addSublayer(setTextFieldBorder(txtDemo.frame)) 
txtDemo.layer.masksToBounds = true 

Answer 3

は機能以下のUITextField呼び出しで下部にある境界線を追加します。