UITableView - Pull to sort control

Introduction

 

During the development of Back in Touch, some of the challenges we faced inspired us to create an iOS control called RMEIdeasPullToSort control. This control allows users to perform multiple custom actions when a UIScrollView is dragged to have a negative content offset. Although the control will work with any UIScrollView, it naturally lends itself to sort operations for UITableViews - hence the name "RMEIdeasPullToSort".  RMEIdeasPullToSort control has evolved over the last six months and we have received some positive feedback and suggestions from other developers. We are pleased to inform that we have now made it an open source library available under MIT license. A link to the GitHub repository is provided at the end of this article. 

 

 

How it works

The first short video shows RMEIdeasPullToSort control as it is used in  Back in Touch for performing different sort operations on the phone book.  All the controls are initially hidden behind the scroll view but become visible once  the user drags the scroll view enough to result in a negative content offset. One of the functions will be highlighted. As the user keeps dragging RMEIdeasPullToSort control decides when to highlight the next function. If the user drags in the opposite direction without lifting his/her finger the previous function will be highlighted. To select any function the user simply lifts his finger when the function is highlighted. At this point RMEIdeasPullToSort informs its delegate that a selection has been made by the user. It is then up to the client application to decide what to do.

RMEIdeasPullToSort control defines some data source methods which must be implemented by its client. This is how it knows what images to display, the messages to show and how many distinct functions its client requires. In theory there could be an infinite number of functions but that would result in an infinite number of frustrated end users. We recommend a maximum of eight functions for a vertical ScrollView that is 480 points high.   This number will be smaller for shorter ScrollViews because the user will have less space to drag. The minimum number of functions is two.

The second video clip shows a table that uses RMEIdeasPullToSort control to perform various sort operations.

 

Benefits

  • Less clutter: All the extra functions are hidden most of the time and only visible when the user needs them. For instance having six extra buttons in the example above would have made the UI look a little less attractive. 
  • Easier navigation with drag gesture: One common solution for sorting table views  is to have a pop-over control which has the extra buttons. This would normally require one permanent button that the user taps to reveal the popover. Apart from that, multiple taps would be required to perform an action compared to simply dragging and releasing.

 

Source files

Thank you very much for your time. Please feel free to download RMEIdeasPullToSort control source files with a sample application using the link below. The repository has now been forked eleven times so we are very excited about the response so far. We are happy to hear more of your suggestions on what improvements could be made. We also developed a second control called RMEIdeasGravityDataDisplay that is currently used in Back in Touch but we are still working on how to change it to a generic library. You can be sure we would write another post once we are done.