acb's technical journal

Posts matching tags 'ux'


KFIndexBar, a zoomable index bar for collection views

The MPDluxe app, an iOS-based remote controller for the MPD music playing software, uses UICollectionViews to display the contents of directories; these are displayed in one vertically scrolling column on the narrow screen of the iPhone, or a number of columns, scrolling horizontally, on the iPad. Early versions of the app, which worked only on the iPhone, used a UITableView, which provided a convenient index bar down the right-hand side of the view, allowing the user to quickly navigate long directory listings by swiping down a line of headings (in this case, letters of the alphabet). UICollectionView is much more flexible than UITableView, but the downside of this is that conveniences such as index bars are not provided; if you need one, you have to implement it yourself. Thankfully, there exists at least one implementation (Ben Kreeger's BDKCollectionIndexView, a UIControl subclass you can add on top of your collection view). After moving to using UICollectionView, MPDluxe used this class.

The problem with one-level index bars is that they do not cope well with more fine-grained navigation. For example, imagine a long list of thousands of items (such as names) in alphabetical order; scrolling to the first letter gets you only so far. It would be good to be able to zoom in, and navigate, say, between the second letters. (One potential model for how this could be done is the transport control in Apple's QuickTime Player; drag left or right to move the playback position backward or forward. However, if you drag down, then dragging left or right moves the position more finely, letting you hone in more precisely on the position you're looking for.) So I started to write a new index control, which would allow this sort of control, which became KFIndexBar.

KFIndexBar looks much like the index bar in a UITableView; it displays a set of labels over a tinted background. Touching a letter changes its value, allowing the code it connects to to scroll its collection view appropriately. As with BDKCollectionView, it also supports a horizontal orientation, allowing it to display its labels along the bottom of a collection view, rather than down the right-hand side. However, the main user-facing difference is that, if the user touches the index bar and drags to the left, a gap opens below the currently touched top-level index, and fills with intermediate indices between it and the index below it. (For example, in an alphabetical index bar, touching the label for "A" and dragging left might open a set of secondary labels reading "AA", "AD", "AF", and so on; once opened, dragging over these will scroll to the relevant location.) The user can then drag over those, scrolling to any one of them.

Below the cut, I will discuss implementation details:


architecture ios swift uicollectionview ux 0

This will be the comment popup.
Post a reply
Display name:

Your comment:

Please enter the text in the image above here: