Display paired lists
I want to display two paired lists with an input -> output setup. For example, list one might be (a,b,c,d,e) and the second might be (1,2,3,4,5). The user should be able to scroll both lists at once. That way the user can see which pairs match up. It would be nice if the user could drag and drop to sort the list, but that isn't a requirement, I can make do without it.
I tried Taifun's sortable list, but I can't scroll two of those lists together.
I have also tried two list views inside a horizontal arrangement inside a vertical scroll, with the list view heights as automatic, so they are as tall as the elements inside so that the vertical scroll can move up and down instead. The problem with that is when the list view height is set to automatic, it doesn't change sizes to fit its elements.
Does anyone know how to do this?
I decided to use the following setup, and I am pretty happy with how it turned out.
When the user presses "Add item", they can enter an input (segment) and output (replacement). The items show up on a sortable list view, separated by a special dash character so I can break them back up into two paired lists. If someone tries to use that dash, theirs is replaced with a normal hyphen (-). Because the list view trims spaces, the first leading and the last trailing spaces (if any) are replaced with a caret and converted back when saving (^). When the user presses delete, a normal list view appears where the user can click on a pair and is prompted to delete it. The Settings button in the screenshot is just a back button to the main settings menu.
I hope this helps anyone looking for a way to display two paired lists together while avoiding the problems of scrolling and an overly complicated UI.
