TAMM TAMM - 4 years ago 146
Swift Question

Generate Text Fields in-app for MindMapping app Swift/xcode

I am currently programming a Mind Mapping app, where the app user can add textfields wherever they want to on a blank page. Is there a way to do something like that. An unprofessional way I came up with, would be adding a few hundred empty textfields to the ViewController, that the user can then fill in. However I am sure there is a better way. Would be nice if the user could tap on a "Add Text" button to generate a Text Field (just like in Microsoft Word) that can be moved around on the blank page. I really cannot think of any class that could solve such a task. Can anybody help?

Cheers

Answer Source

You can always create a text field programatically. In your ViewController file, you will need to create an instance of UITextField. For information on UITextField, check out this documentation.

For example, on iOS, when a user touches the screen with one or more fingers, methods are called on the View Controller. When a user touches the screen, iOS calls touchesBegan and touchesEnded on the View Controller. In your case, you probably want touchesEnded, so that the field will not be added until the user lifts his/her finger. These methods pass a Set of UITouch's. UITouch Class Reference

Example View Controller code in Swift:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        print("Touch Ended")

        for touch in touches {

            let touchPoint = touch.locationInView(self.view)

            let fieldFrame = CGRect(x: touchPoint.x, y: touchPoint.y, width: 100, height: 30)

            let textField = UITextField(frame: fieldFrame)
            textField.placeholder = "Type Here"

            view.addSubview(textField)

        }
    }

}

You may already be aware of how to programmatically layout views, but…

This code finds the location of the touch and makes that location the textfield's origin. Here, I am simply setting the frame for the textField before adding it the view, hardcoding a width of 100 and height of 30. In practice, you may want to look into something like AutoLayout, particularly NSLayoutConstraint, which allows for programmatic constraints that account for bounds changes. You also may not want to add a text field for each touch if they touch the screen with multiple fingers at once.

This allows a field to be placed wherever the user touches. Alternatively, you could create a button to add a text field like you said and then just come up with a default location for the UITextField to be added instead of observing touches.

Dragging a text field

To move the field when the user drags a text field, you will want to observe a touch, and check for a textfield at the touch, which is essentially checking for a subview at a point.

Then, you can use touchesMoved to observe a drag and update the location of the textfield via AutoLayout or whatever procedure you decide to use.

Gesture Recognizer's

As an alternative to touchesBegan, touchesMoved, touchesEnded, you can use gesture recognizers. See information on the different types of UITapGestureRecognizer's from Apple's documentation. These can be created by specifying a target and action method, then added to a view. Example of creating a tap gesture recognizer and adding it to a UITextField stored in a variable called textfield.

let tapRecognizer = UITapGestureRecognizer(target: self, action: Selector("textFieldTapped:"))
textfield.addGestureRecognizer(tapRecognizer)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download