ZHXIndexView

---

· A simple indexing tool for both UITableView and UICollectionVIew.

中文文档地址

Table of Contents

---

• Background
• DisplayEffect
• Install
• Usage
• API
• References
• License

Background

---

Since the iOS system comes with a single index effect, and does not support UICollectionView. When you use it, you need to write it yourself. Although the code is not complicated, it is not necessary to reinvent the wheel. Here I provide a packaged ZHXIndexVeiew that supports UITableView and UICollectionView.

DisplayEffect

---

basics：

highlight & no indicator：

indicator & not highlighted of front

for tableview:

Install

---

1. Download ZHXIndexView and introduce ZHXIndexView.h and ZHXIndexView.m files into your project. The red content is the file you want to import, and the blue file is Demo, you can see my specific use.
2. If you use Cocoapods for your project, you can use the command line.

pod 'ZHXIndexView', '~> 0.0.3'

Usage

---

Basic usage

Add indexView to the current page

     /*
     the frame here must be set correctly, the width and height of the indexView are determined here.
     The height of a single item is given by the (height/ indexTitles.count )
     */
    self.indexView = [[ZHXIndexView alloc]initIndexViewWithFrame:CGRectMake(ScreenWidth-24, 180, 24, 550)];
    [self.view addSubview:self.indexView];
    /*
     pay attention to setting the proxy method
     */
    self.indexView.delegate = self;
    self.indexView.itemTitleColor = [UIColor colorWithString:@"#999999"];
    self.indexView.itemTitleFont = [UIFont systemFontOfSize:10];
    /*
     Assigning values to data sources is best left behind to ensure that other required attributes have been assigned
     */
    self.indexView.indexTitles = self.indexData;

At the same time to implement the proxy method

If UICollectionView , the proxy method is written as follows.

#pragma mark - ZHXIndexViewDelegate
- (void)indexViewDidSelectIndex:(NSInteger)index {
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:index];
    CGFloat offsetY = [self.collectionView layoutAttributesForItemAtIndexPath:indexPath].frame.origin.y;
    //For better positioning, subtract the section height and the top spacing inside each section
    if (self.sectionHeaderHeight>0) {
        offsetY = offsetY - self.sectionHeaderHeight;
    }
    if (self.cellTopMargin>0) {
        offsetY = offsetY - self.cellTopMargin;
    }
    [self.collectionView setContentOffset:CGPointMake(0, offsetY) animated:NO];
}

If UITableView , the proxy method is written as follows.

#pragma mark - ZHXIndexViewDelegate
- (void)indexViewDidSelectIndex:(NSInteger)index {
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:index];
    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
}

Expanded usage

First Case

If the selected item needs to be highlighted, such as the second gif image, the background will be highlighted when the letter is selected.

Need to assign a value to this property

    self.indexView.itemHighlightColor = [UIColor colorWithString:@"#198CFF"];

In order to make the item stopped on a highlight when the scrolling ends, the proxy method of ScrollView needs to be implemented in the page

#pragma mark - UIScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.indexView updateItemHighlightWhenScrollStopWithDispalyView:self.collectionView];
    });
}

Second Case

In some special scenes, if a certain item is selected without highlighting, such as the first three items of the third gif above, you need to assign values to the following attributes, and put the coordinate index that does not need to be highlighted into the array

    self.indexView.itemNoHighlightIndexArray = @[@(0),@(1),@(2)];

Third Case

When selected, with indicator: such as the third and fourth gif

   self.indexView.showIndicatorView = YES;

API

---

 
/// Initialization method
/// @param frame give the right values
- (instancetype)initIndexViewWithFrame:(CGRect)frame;
/**
* The delegate of indexView.
*/
@property(nonatomic, weak) id<ZHXIndexViewDelegate> delegate;

/**
* The data source of indexView.
*/
@property(nonatomic, strong) NSArray <NSString *>*indexTitles;

/**
* The view backgroundcolor. Default is clear.
*/
@property(nonatomic, strong) UIColor *contentBackgroundColor;

/**
* The title tintColor of item. Default is black.
*/
@property(nonatomic, strong) UIColor *itemTitleColor;
/**
* The title size of item. Default is [UIFont systemFontOfSize:13.0].
*/
@property(nonatomic, strong) UIFont *itemTitleFont;


/****************************************
 If you want the selected button to be highlighted, please implement the following properties and methods.
 ****************************************/

/**
* The  highlightColor when item is selected. Default is nil.
*
*/
@property(nonatomic, strong) UIColor *itemHighlightColor;
/**
 * The highlight item size. Default is MIN(item.width,item.height)/2 .
 */
@property(nonatomic, assign) CGFloat itemHighlightDiameter;
/**
 * The title tintColor of highlight  item. Default is white.
 */
@property(nonatomic, strong) UIColor *itemHighlightTitleColor;

/*
  Please note:
  This method needs to be called in '- (void)scrollViewDidScroll:(UIScrollView *)scrollView' in your page.
 */
/// change select item to highlightColor when scroll stop
/// @param displayView The view being displayed might be a collectionView or a tableView
- (void)updateItemHighlightWhenScrollStopWithDispalyView:(id)displayView;

/****************************************
If you need show sideways indicator view when you touch,Please implement follow property.
****************************************/

/**
* The display indicator. Default is YES .
*/
@property(nonatomic,assign) BOOL showIndicatorView;
/**
* The  indicator backgroundcolor. Default is "#0C0C0C"   70%.
*/
@property (nonatomic, strong) UIColor *indicatorBackgroundColor;
/**
* The  indicator textColor. Default is white.
*/
@property (nonatomic, strong) UIColor *indicatorTextColor;
/**
* The  indicator font. Default is 15.
*/
@property (nonatomic, strong) UIFont *indicatorTextFont;
/**
* The  indicator height. Default is 20.
*/
@property (nonatomic, assign) CGFloat indicatorHeight;
/**
* The  margin with content left . Default is 15.
*/
@property (nonatomic, assign) CGFloat indicatorRightMargin;
/**
* The  indicator cornerradius. Default is 10.
*/
@property (nonatomic, assign) CGFloat indicatorCornerRadius;

/****************************************
If you want not the selected button to be highlighted, please implement the following properties and methods.
****************************************/

/**
 * The item don't hightlight index .
 */
@property(nonatomic, strong) NSArray <NSNumber *>* itemNoHighlightIndexArray;

References

---

SCIndexView

License

---

The MIT License (MIT)

Copyright © 2020 Zhang Xi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.