Alphabet Index for navigation on ListView?

[sjordi 38]

Hi,

Does anybody know how to get the alphabetical Index in a TListView?
I'm talking about the A...Z vertically displayed to the right of the ListView for fast navigation.

Say you're on the first record and you want to quickly go to the first one starting with T or W

Is it available anywhere or should we built it from scratch?

Thanks for any clue.

Steve

[Andrea Magni 75]

Hi, is the listview bound to a dataset or manually filled? In the first case I would try to locate the next record in your dataset and have the listview sync'ed automatically. 

But probably you are in the second case (manually filled list). You can either find a way to build your index while filling the list (a sorted list may be useful here) so that you can let items be shown in the list following one sorting and yet have a second structure where you can find the next item and the corresponding listviewitem (or index). 

 

HTH

 

Andrea

[sjordi 38]

Hi Andrea,

Thanks for the suggestion.

My question is more related to the A--Z index itself, visually. Does it exist and I can link it to the dataset or LIstView or should I myself create an array of A..Z + # and then scale it accordingly to the screen size (portrait/landscape), capture which letter was pressed by the finger, etc...

It's not really the mechanism behind it that is the point, but the visual index itself, like in the Contacts or Music apps, you can quickly jump to the first item starting with the letter you choose, on the right of the screen.

 

Thanks

Steve

[Andrea Magni 75]

Ah, sorry, I didn't get your question right. 

I would use a second listview probably. The scrolling seems to be independent from your primary list (you might want to do some syncing but seems easy to do). 

What about this?

 

If you are looking for something more similar to the standard index you get on the right edge of the listview, I would probably go for an extra layer on top of the listview (using a TLayout as a transparent container and probably implementing touch gestures) 

 

Nice topic 

[sjordi 38]

Yes, excellent idea. Should have thought about such a thing.

I'll try something like this.

Thanks for the tip

[sjordi 38]

Hi all,

Finally trying to implement this. Inspired by the Android Contacts app.

One question, is there a way to vertically center the content of a ListView?
The alphabet index will vary accordingly to the main ListView content. I don't want it aligned to the top, but to the center.

Besides calculating the height of the list view and changing it dynamically... can we have its entire content vertically centered?

Here is the illustration: the alphabet starts from the top and I'd like it vertically centered.

Thanks for any clue.

Edited February 3, 2023 by sjordi

[Lars Fosdal 1730]

I assume you want to "stretch" the alphabet to vertically fill the available space.

Is this a touch interface or a desktop UI?

 

Is it possible that you could need to scroll the Alphabet list as well? I.e. make the vertical list longer than the height of the screen? 

It could become awfully fiddly on a mobile display otherwise.

 

[sjordi 38]

Actually I'd like it to be vertically centered. The list may not have all letters. Ant it will always be available within the main screen.

The idea is to simulate what you get on iOS. If my list is filtered, the index may have only "B-F-T-Z" for example and should be centered.
Yes, the idea is to quickly scroll in the list on Android (and why not click-to-move on Windows and macOS)

Here is an example on iOS that works with the native options. it's not implemented for Android.

 

Edited February 3, 2023 by sjordi

[Lars Fosdal 1730]

1 hour ago, sjordi said:

The idea is to simulate what you get on iOS

/off-topic

I am an Android user. I like apps that work the way Android works. 

 

The contact list in Android 13 f.x. shows the current letter group and lets you scroll faster or slower within the current group or to the next or previous group.

My suggestion would be that you let the OS "playbook" decide how to navigate in the "native" way, rather to have one solution for all platforms?

 

/on-topic

I don't know what kind of component you would use for the letter list, but I assume it is a panel.

You have the list of letters - BFTZ - i.e. you have the sizes you need? 

 

ch  = Client window height

n = number of letters

ih = character height + spacing height

TopOffset = (ch - (n * ih)) div 2;

CharPos = 1 .. n

CharOffset = TopOffset + ((CharPos - 1) * ih)

From this you should be able to create the boxes that you need to do rendering and hit testing on?

 

[sjordi 38]

That's actually my idea, I want to be as close as possible to the native functionalities, but it seems that platform native options for Android in Delphi do not offer the same navigation way as the Contacts app uses. That's why I'm trying to replicate it just for Android as my list view doesn't implement anything else that scroll up and down with a finger, which can rapidly become tedious if the list is long.

If you set the native platform behavior on iOS you do have the index to scroll rapidly, not on Android as far as I know...

 

[SwiftExpat 65]

TMS has this, should almost fit your needs.

https://download.tmssoftware.com/doc/tmsfncuipack/components/ttmsfnctableview/

Edited February 3, 2023 by SwiftExpat

[sjordi 38]

I'm going to check on this. I do have it. I'll see whether one can tinker around and customize it as a ListView and eliminate the grayed out letters, etc...

Thanks for your help.