List View with sections for alphabetialy sorted list

[woodtluk]

Hi everybody,

I need a special list view that shows the items in alphabetical groups. See the attached images.

Indexed list on iPhone (middle picture) (http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/art/ui_tablestyleexamples.jpg)

Similar for Android (http://bp0.blogger.com/_hzaKggjtxDQ/R8t-cW3GXVI/AAAAAAAAAGE/_tvEA8mr0Ks/s1600-h/alphabet-list-test.png)

Any suggestions how I can achieve this?

I was thinking about inserting a special item after each group in the model. But this would not be a very nice design. I suppose it's better to subclass QListView. But I'm not shure if it's a good aproach and how to do that.


Cheers Luke

[Lykurg]

I would go for a custom model, which also provides the caption data (such as "A" or "T") with a custom data role to identify these data as a caption. Second use a custom delegate where you paint your items according to there type.

[pervlad]

Try sub-classing QAbstractListModel and QAbstractProxyModel .

I assume that your data is sorted.
If your data is sorted (or stored in sorted container e.g. QMap) then it is sufficient to subclass QAbstractListModel.

Override rowCount(), columnCount(), data(), setData(), and flags().
When overriding data() function add implementation that return letter (A,B,C...) between original data.

If data is not sorted then sort it first or subclass QAbstractProxyModel.

In my opinion Model/View framework in Qt is one of most powerful features of Qt, once you master it, anything could be achieved.

There is a good documentation and examples in Qt documentation on Model/View framework . See Model/View Programming (http://doc.trolltech.com/4.6/model-view-programming.html), An Introduction to Model/View Programming (http://doc.qt.nokia.com/4.6/model-view-introduction.html) and QAbstractItemModel class documentation.

[woodtluk]

Thanks guys!

I'll try it with a custom model derived from QAbstractListModel.

Cheers

[frz]

Hi there,

I'm looking for the exact same kind of widget to display a music collection (artist > albums). I would really appreciate if you could provide some concrete code to get an example :)

Thanks by the way, this is giving me a good way to start.