SWIFT :- TEXTFIELD AND LABEL (UITEXTFIELD AND UILABEL)

Text Field :-    It provides editable text area , Where a user can fill data. Can get user input using text field.

A text field is a UI element that enables the app to get user input.

Labels :-   Used for displaying read – only text.

Important Properties of Text Field :-

       Text Alignment

    Placeholder text :- to provide hint to the user.

          Normal text 


           Font

          Auto correction type 


          Keyboard type 


          Return key type 


          Clear button mode 


          Border Style

          Delegate 


   Important Properties of Labels :-

        Number Of Lines

        Font

       Text Alignment

       Text Color and Background Color

       Text

   Important Properties of Button :-

        Button Title

  Button Title Color

  Button Background Color

  Button’s Action(Target) :- What will happen on click of button.

  Tag

Buttons Types  :-

  UIButtonTypeCustom


  UIButtonTypeRoundedRect

  
UIButtonTypeDetailDisclosure

  UIButtonTypeInfoLight


  UIButtonTypeInfoDark


  UIButtonTypeContactAdd

  

Tutorial :-

  § First we will open Xcode and select create new project     enter Project Name and select Language (Swift).

          

  §  Then we will select text field from the list and drag and drop it to storyboard. And then select the constraints as shown in the image below:-

  

  §  Then will open assistant editor , click on text field and press control button and drag to  ViewController.Swift  file ( It is the Process to create Outlets and Actions of UI Elements to file ).

As shown in the pic below :-

  §  We also add  a TextField , a Label and a Button , programmatically. As shown in Line no – 15,16 and 17.

CODE  :-

var anotherTextField = UITextField(frame: CGRectMake(55 , 140 , UIScreen.mainScreen().bounds.size.width-110 , 30))

    var label = UILabel(frame: CGRectMake(55 , 210 , UIScreen.mainScreen().bounds.size.width-110 , 50))

    var saveButton = UIButton(frame: CGRectMake(55 , UIScreen.mainScreen().bounds.size.height - 140 , UIScreen.mainScreen().bounds.size.width-110 , 25))

  §  Add UITextFieldDelegte Protocol  after class name ,  as shown in Line no -11 in pic below.

  §  Then will set both the textField delegate to Self.  As shown in Line no – 21 and 22 in pic below.

  §  Then will call to a function name :- setPropertiesOfTextFieldAndLabels().

As shown in Line no – 24 in pic below.

In this function we will set the properties of TextField , Label and Button.

  §   Now we will set properties inside setPropertiesOfTextFieldAndLabels() Function .

1.     TextFieldOne properties you can set either from Storyboard or like anotherTextField.

2.     anotherTextfield properties are set. (Line No – 32 to 40 in pic below).

// anotherTextField's Properties.....

        anotherTextField.placeholder = "TextField Two"

        anotherTextField.textAlignment = .Center

        anotherTextField.font = UIFont.systemFontOfSize(15)

        anotherTextField.borderStyle = .RoundedRect

        anotherTextField.autocorrectionType = .Default

        anotherTextField.keyboardType = .Default

        anotherTextField.returnKeyType = .Done

        anotherTextField.clearButtonMode = .WhileEditing

        self.view.addSubview(anotherTextField)

3.     Label properties are set.  (Line No – 43 to 47 in pic below).

        //Label's Properties......

        label.numberOfLines = 2

        label.font = UIFont.systemFontOfSize(15)

        //label.textColor  = UIColor.blueColor()

        label.textAlignment = .Center

        label.backgroundColor = UIColor(red: 240/255, green: 140/255, blue: 100/255, alpha: 1)

        self.view.addSubview(label)

4.     saveButton   properties are set.( Line No – 50 to 53 in pic below).

//Save Button's properties......

        saveButton.setTitle("SAVE", forState: .Normal)

        saveButton.setTitleColor(UIColor.blueColor(), forState: .Normal)

     // saveButton.setImage(UIImage(named: "") , forState: .Normal)  this way you can add image of a button.

 saveButton.addTarget(self, action: "save", forControlEvents: .TouchUpInside)

        self.view.addSubview(saveButton)

NOTE :-   You can also set the image of a button as shown in pic , Line no :- 53.

NOTE :-   self.view.addsubview(label or anyView)

In this line we  are adding our created , allocated subView to our view(Storyboard).

  Ø Now we will write action of saveButton. Here on click of save we are adding the text of both textFields and setting it in label.

     //MARK: -  Save Button Action .......

    func save() {

       

        label.text = textFieldOne.text! + " " + anotherTextField.text!

    }

  Ø Then we will write textField delegate method.

What we are doing in this method is that on click of return or done button in keyboard, Keyboard should be close/dissmiss.

//MARK: - TextField Delegate Method.

    func textFieldShouldReturn(textField: UITextField) -> Bool {

        textField.resignFirstResponder()  //To dismiss keyboard on click of return or done.

        return true

    }



Press Command + R to run the project and 

check the output......