background

iOS

IOS UITableView has its own index function, but the implementation of the function is relatively simple, only supports, slide index view to achieve fast sliding UITableView function.

WeChat

The index function of wechat contacts works better than the system index function, as the former will pop up an indicator when sliding through the index view. The indicator UI area is large, showing the current slide to the index position text, there is a certain distance from the user slide area, will not be blocked by the finger, the user has a good physical examination. However, there are some small bugs in the wechat index view, which I have reported to the official and have not been solved yet. The following is a small bug in wechat contact index:

  1. When you swipe through an indexed view, the contact list shakes when you swipe through it with another finger. It’s not a bug, but it’s a bit awkward.
  2. When you slide the indexed view, click the contact list or add a contact in the upper right corner with the other finger to switch to another interface. Then you return to the contact list interface, and the indexed view is completely stuck. If you slide the contact list again, the indexed view does not move.

The effect

In view of the wechat index scheme, from the product is a good idea, I shamelessly copied the product idea, with the code to achieve it, please forgive me, I just play. I also added another style, replacing the indicator with a toast prompt.

Wechat GIF:

Toast GIF picture:

Functions and Advantages

This index control SCIndexView implements the basic functions of wechat index, and also solves the small bugs of wechat index. The main functions and advantages are as follows:

  1. When you slide the UITableView list, the index position of the indexed view moves accordingly;
  2. When you slide the UITableView list, another finger slides the indexed view, and the list slide event deactivates;
  3. When sliding an indexed view, there are indicators or toast indicating the current index position.
  4. You can’t click or slide the UITableView list while swiping an indexed view;
  5. You can customize indicators, toasts, size of indexed views, text color size, spacing, and other UI styles.

Method of use

SCIndexView can be imported through CocoaPods and supports iOS7 or later.

  1. Create an SCIndexViewConfiguration object that controls the UI style of the index.
  2. Create an SCIndexView object, which is the indexed view itself. The initializer must pass in the UITableView list and an SCIndexViewConfiguration object.
  3. Add the SCIndexView index view to the parent view of the UITableView list view, and set the data source for the index view.
SCIndexViewConfiguration *indexViewConfiguration = [SCIndexViewConfiguration configuration];
SCIndexView *indexView = [[SCIndexView alloc] initWithTableView:self.tableView configuration:indexViewConfiguration];
indexView.translucentForTableViewInNavigationBar = self.translucent;
[self.view addSubview:indexView];
indexView.dataSource = indexViewDataSource;
Copy the code

The end of the

That’s the content of SCIndexView and I’m looking forward to your comments and suggestions. If you have any ideas, let me know. If you like, you can also encourage me through star, thank you for your support.