Come mostra solo il bordo inferiore del UITextField in Swift

Voglio mostrare solo il bordo inferiore e nascondere gli altri lati.

Uscita vedo: Come potete vedere ho vedere in alto, a sinistra e a destra i bordi e sono di colore nero, voglio rimuoverli. Solo bisogno di un fondo bianco di spessore 2.0 confine.

Come mostra solo il bordo inferiore del UITextField in Swift

Codice che sto utilizzando (fonte):

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()
InformationsquelleAutor user1406716 | 2015-06-29



8 Replies
  1. 40

    Provare a fare in questo modo.

    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)

    È necessario impostare il borderStyle proprietà None

    Se si utilizza il layout automatico quindi impostare perfetto vincolo d’altro limite non verrà visualizzata.

    Speranza che aiuta.

    • provato il codice, ma vedo che tutti i bordi scompaiono con questo codice. (il mio sfondo è blu, non sono sicuro se quello che conta). Voglio il bordo inferiore per essere solo il bianco.
    • Controllare questo : stackoverflow.com/questions/30701655/… la Mia risposta
    • significato c’è qualcosa di ulteriori richieste, oltre le 5 righe sopra? Li ho utilizzati per la sostituzione di myTextField con la mia ‘tv_username` UITextField
    • uhm, strano poi perchè io vedo solo questo (no bordo inferiore): imgur.com/i2h1zXj
    • Mi segno la tua risposta come la risposta, ma ho solo dovuto aggiungere questo riga di codice nella mia domanda (e quindi può essere che si desidera modificare la risposta per chi legge questo più tardi): myTextField.borderStyle = UITextBorderStyle.None
    • il bordo deve essere in posizione : (altezza meno la linea di altezza).
    • “Se si utilizza il layout automatico quindi impostare perfetto vincolo d’altro limite non verrà visualizzata.” -> Che è la Chiave. Nella mia sandbox app, che non aveva applicato alcun vincolo, e vorrei vedere il bordo inferiore e il normale grigio bordo arrotondato bordo utilizzando UITextBorderStyleRoundedRect ma non quando si utilizza UITextBorderStyleNone vorrei vedere nulla. Dovuto impostare i vincoli di mio UITextField in IB, poi tutto si è risolto.
    • che cosa significa per impostare “perfetto” constaint?
    • po ‘ in ritardo, ma “perfetto” vincolo significa impostare un hard altezza per il textfield in IB

  2. 6

    Come mostra solo il bordo inferiore del UITextField in Swift

    Obiettivo 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;

    Swift

    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
  3. 4

    Ho provato tutte questa risposta, ma nessuno ha funzionato per me, tranne questo

      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
  4. 3

    Swift 3:

    Solo sottoclasse tuo 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
    
       }
    }
    • Perché non l’estensione?
    • Utilizzare il modo in cui si adatta.
  5. 2

    Pensiero da @Ashish risposta, utilizzati stesso approccio molto tempo fa in Objective-C, ma l’implementazione di estensione sarà più utile.

    extension UITextField {
    
    
        func addBottomBorder(){
            let bottomLine = CALayer()
            bottomLine.frame = CGRect.init(x: 0, y: self.frame.size.height - 1, width: self.frame.size.width, height: 1)
            bottomLine.backgroundColor = UIColor.white.cgColor
            self.borderStyle = .none
            self.layer.addSublayer(bottomLine)
    
        }
    }

    Nel controllore:

    self.textField.addBottomBorder()

    Possibile aggiungere ulteriori parametri per il metodo, come l’aggiunta di confine altezza, colore.

  6. 2

    @mina-fawzy
    Mi è piaciuta la risposta che comprendeva masksToBounds da Mina Fawzy…

    Mi sono imbattuto in questo problema per cui ho cercato di stile un bordo inferiore di un UITextField, e i commenti utilizzando un CGRect ha funzionato per me, tuttavia, mi sono imbattuto in problemi durante l’utilizzo di diverse dimensioni dello schermo, o se ho cambiato l’orientamento, la vista sul paesaggio dal ritratto.

    ie. Il Mio Xcode Principale.storyboard è stato progettato con iPhone XS Max, con un UITextField vincolata per 20 punti dalla sinistra/destra dello schermo. Nel mio viewDidLoad() ho stilizzato il UITextField (textfield) utilizzando il CGRect approccio, rendendo la larghezza del rettangolo uguale a textfield.frame.width.

    Durante il test su iPhone XS Max, tutto ha funzionato perfettamente, MA quando l’ho provato su iPhone 7 (o minore ampiezza dello schermo) il CGRect è stato afferrando la larghezza dell’iPhone XS Max durante la viewDidLoad(), causando il rettangolo (linea inferiore) di essere troppo ampia, e il bordo destro è andato fuori dallo schermo. Allo stesso modo, quando l’ho provato su iPad schermate, la linea di fondo era troppo breve. E inoltre, su qualsiasi dispositivo, la rotazione di vista del paesaggio non ha ri-calcolare le dimensioni del rettangolo necessarie per la linea di fondo.

    La migliore soluzione che ho trovato è stato quello di impostare la larghezza del CGRect più grandi rispetto alla lunghezza del iPad dimensione (ho casualmente scelto 2000) e POI ha aggiunto textfield.layer.masksToBounds = true. Questo ha funzionato perfettamente perché ora la linea è molto lunga dall’inizio, non ha bisogno di essere ri-calcolato sempre, e viene tagliato alla larghezza corretta della UITextField, non importa ciò che la dimensione dello schermo o di orientamento.

    Grazie Mina, e spero che questo aiuta gli altri con lo stesso problema!

  7. 0

    Per di più il Campo di Testo

      override func viewDidLoad() {
    
    
        configureTextField(x: 0, y: locationField.frame.size.height-1.0, width: locationField.frame.size.width, height:1.0, textField: locationField)
        configureTextField(x: 0, y: destinationField.frame.size.height-1.0, width: destinationField.frame.size.width, height:1.0, textField: destinationField)
        configureTextField(x: 0, y: originField.frame.size.height-1.0, width: originField.frame.size.width, height:1.0, textField: originField)
        configureTextField(x: 0, y: nameField.frame.size.height-1.0, width: nameField.frame.size.width, height:1.0, textField: nameField)
    
        locationField.text="Hello"
        super.viewDidLoad()
    
        //Do any additional setup after loading the view.
    }
    
    func configureTextField(x:CGFloat,y:CGFloat,width:CGFloat,height:CGFloat,textField:UITextField)
    
    {
        let bottomLine = CALayer()
        bottomLine.frame = CGRect(x: x, y: y, width: width, height: height)
        bottomLine.backgroundColor = UIColor.white.cgColor
        textField.borderStyle = UITextBorderStyle.none
        textField.layer.addSublayer(bottomLine)
    
    
    }
  8. 0

    Textfield bordo inferiore, ma alcuni sono più problemi per i dispositivi.Così il bordo inferiore non rientra nel campo di testo.Recuperare quel problema il codice come questo
    Funziona benissimo
    swift 4.2

    let bottomLine = CALayer()
            bottomLine.frame = CGRect(x: 0.0, y: textField.frame.height - 1, width: screenSize.width - 32, height: 1.0)
            bottomLine.backgroundColor = UIColor(hex: 0xD5D5D5).cgColor
            textField.borderStyle = UITextField.BorderStyle.none
            textField.layer.addSublayer(bottomLine)

Lascia un commento