Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make "Alphabetical scroll bar - alike" for search?

Currently I have a view like new feed of facebook where post by users listed in time order. Now on the right hand side I want to put the Alphabetical scroll bar and when user scroll to any character, they can search post by users with name start by that character, is it possible though ?

For my understanding, it could be solve if I can capture the event when user scroll to each character and transfer that character to API on server to query the DB with names start with that and post it back to display on device.

Could any one give me some hint please !

like image 343
user1314404 Avatar asked Jan 05 '16 15:01

user1314404


1 Answers

What you want to do is a quite unusual type of user interface, but if you really want to do this, you could do the following (you can find a tutorial here):
In your tableViewController, create an index array, e.g. an array of alphabetic characters that you want to be displayed at the side of your tableView, e.g.:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
    NSARRAY *characters = @[@" ", "A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L", @"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"W", @"X", @"Y", @"Z"];  
    return characters;
}  

According to the docs: „An array of strings that serve as the title of sections in the table view and appear in the index list on the right side of the table view. The table view must be in the plain style (UITableViewStylePlain). For example, for an alphabetized list, you could return an array containing strings “A” through “Z”.

It is completely up to you, how you sort your data into the sections of the tableView. In your case, you want to have all time sorted data in one section, probably without a special header. Therefore your array characters starts with a header @" " at index 0, and you put all of your time sorted entries in section 0. Then, implement the following method:

 - (NSInteger)tableView:(UITableView *)tableView 
              sectionForSectionIndexTitle:(NSString *)title 
              atIndex:(NSInteger)tappedIndex {
     self.savedTappedIndex = tappedIndex;
     return 0;
 }

This method may be a bit confusing. It does the following: When the user taps at the index on the side of your tableView (@" " … @"Z") a certain character in the array characters, the position of this character in the array (its index) is input to this method. You can store it in a property. If you return 0 like in the example, section 0 of the table would be redisplayed as it is.
If you do key value observation (KVO) of the property savedTappedIndex, you will get a notification when the table is redisplayed. You can then read the tapped character by

NSString *tappedCharacter = characters[self.savedTappedIndex];  

With this character, you can question your server for feeds, which were created by users whose name starts with this character.
The data can then be displayed in the tableView, again in section 0.
Of course, you should then no longer display the index at the side of the tableView.

Once again, this behavior may be very confusing to the user, since it is quite unusual.

Final note:

You should not use the hack above for a real implementation, but you could use it to test your user interface, and you will probably see that the user experience is not good, since the index behaves differently as usual.

like image 141
Reinhard Männer Avatar answered Oct 24 '22 17:10

Reinhard Männer