Resolved dragging text from table cell to text field

Discussion in 'iOS Programming' started by straber, Jul 3, 2012.

  1. straber, Jul 3, 2012
    Last edited: Jul 11, 2012

    straber macrumors member

    Jul 3, 2012
    The layout of the app I'm working on has a large main area with a number of text fields for entering data, and a UITableView off to the side with a list of pre-defined default texts that can be used. My boss wants it so that the user will drag the text from the tableview and drop it on the text field they want to add it to. Does anyone know how I could implement this?

  2. CodeBreaker macrumors 6502

    Nov 5, 2010
    Sea of Tranquility
    Hmm, may be a little tricky, but doable.

    1. You have to detect touches on your table cell and your table view
    2. When a user touches a cell, you have to create a new label, the text of which will be the same as the text of your cell
    3. As the user moves the finger, you have to move the label's frame accordingly
    4. In touchesEnded: you have to check with which text field your label's frame intersects (using CGRectIntersectsRect())
    5. Then you set the text field's text to the label's text

    The only problem I see is touch detection, given that scrollviews (table views) are hostile to touch detection. But this should be doable.

    Also, you have a weird boss :D
  3. ArtOfWarfare macrumors G3


    Nov 26, 2007
    I believe code breaker's solution will work well to do exactly what your boss described, but it seems to me that users would find it odd... As far as I know, no other app does this.

    Some alternative ideas for how to accomplish this, which may be a little less odd:

    1 - When a text field is selected, a component picker could pop up above it. The user picks from the list and hits a "Done" button on the popup to fill with that value, or enters something on the keyboard and hits the keyboard's done button.
    2 - When the text field is tapped and the Copy/Cut/Paste contextual menu appears, add the prefill options to it and allow the user to select them.
    3 - When the user taps and holds on a table view, add a contextual menu with a "Copy" button, which copies the predefined text. They can then tap and paste into the text fields.

    Just some thoughts on UI designs that could be a little less odd than tapping and dragging.
  4. PhoneyDeveloper, Jul 4, 2012
    Last edited: Jul 4, 2012

    PhoneyDeveloper macrumors 68040


    Sep 2, 2008
    I think this is a cool UI. I've been idly thinking about this kind of UI for a while but haven't had any real need for it yet.

    This is an example of direct manipulation, which has long been a part of Mac OS UI design. There are some differences with the touch and gesture-based UI on iOS vs the point and click UI on the desktop.

    You should start your manipulation with a long press. So press and hold on your text results in the appearance of the text avatar or lozenge (for lack of a better term). This avatar will follow your finger around the screen. It should be transparent or partly transparent. Look at how Safari on the desktop does this with text and with URLs.

    There is an Apple sample code app called MoveMe that shows how to drag a view around the screen. I haven't looked at that sample in several years and it was written before gesture recognizers were available so there might be a better way to do this than using the four touch methods. Anyway, look at that to see one way to drag a view around the screen.

    If the avatar is dropped outside a valid target you'll need to decide how to show this. On the desktop the dragged view snaps back to the starting position. You don't necessarily need to do it that way. It could simple fade away where it is or turn into a puff of smoke (like Xcode does with breakpoints, arrgh).

    If you look at the email UI on iOS you'll see an example of direct manipulation of email addresses. Add a couple email addresses to a new email. Tap and hold on one of the email lozenges. You can drag them around with your finger, reordering them and moving them from To to CC to BCC. This is very similar to what you're proposing. Note the appearance closely of the lozenges while they are being moved.
  5. straber thread starter macrumors member

    Jul 3, 2012
    Ok, I got this working, and it wasn't too hard. If anyone's interested, what I did was add a UIPanGestureRecognizer to the label of each table cell in the cellForRowAtIndexPath method. I used a boolean to check if they had just started dragging, or were continuing to drag. If they just started, I created a label at the touch point otherwise I just update the label's position. I also check in each drag if the frame of the label intersects the label of the textfield, and if so I add a blue border around the text field to let the user know they have dragged to an acceptable location. If the dragging ends while they are intersected, I set the textfields text to that of the label, and remove the label from the view. All in all, it wasn't too bad. Thanks for your help.

Share This Page