iOS列表的索引指示器
2020-04-11 本文已影响0人
码工人生
项目背景
由于iOS系统自带的索引效果单一，并且还不支持UICollectionView。用的时候需要自己去写，虽然代码并不复杂，但重复造轮子没必要。我在这里提供一个已经封装好的ZHXIndexVeiew,支持UITableView,也支持UICollectionView。
效果展示
1.前几个选中时，背景不高亮；
noHighlightInFront.gif
2.带指示器
normal.gif
3.UITableView使用
tableview.gif
4.无选中高亮效果，仅仅定位到锚点
basic.gif
文件安装
1.去github下载ZHXIndexView，将ZHXIndexView.h和ZHXIndexView.m文件引入你的工程。
文件路径.jpg
红色内容是你要引入的文件，蓝色文件是Demo，可以看下我的具体使用。
2.你的项目如果使用了Cocoapods，可以
pod 'ZHXIndexView', '~> 0.0.1'
使用方法
1.基本使用:如第四个gif图,引入文件，添加indexView到当前页面
//这里的frame设置一定要正确，indexView的宽和高都是这里决定的，以及某单个item高度
//是由这里的height/indexTitles.count 得到
self.indexView = [[ZHXIndexView alloc]initIndexViewWithFrame:CGRectMake(ScreenWidth-24, 180, 24, 550)];
[self.view addSubview:self.indexView];
//注意设置代理方法
self.indexView.delegate = self;
self.indexView.itemTitleColor = [UIColor colorWithString:@"#999999"];
self.indexView.itemTitleFont = [UIFont systemFontOfSize:10];
//给数据源赋值最好是放在后面，确保其他需要属性已经赋值
self.indexView.indexTitles = self.indexData;
同时要实现代理方法
a.UICollectionView实现代理方法
#pragma mark - ZHXIndexViewDelegate
- (void)indexViewDidSelectIndex:(NSInteger)index {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:index];
CGFloat offsetY = [self.collectionView layoutAttributesForItemAtIndexPath:indexPath].frame.origin.y;
//为了使定位更加准确，要减去section高度，以及每个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];
}
b.UITableView实现代理方法
#pragma mark - ZHXIndexViewDelegate
- (void)indexViewDidSelectIndex:(NSInteger)index {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:index];
[self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
}
2.显示选中高亮：如果需要选中的item显示高亮，如第一个gif图，选中字母时就会背景高亮。
a.需要给该属性赋值
self.indexView.itemHighlightColor = [UIColor colorWithString:@"#198CFF"];
b.为了使滚动结束时，停在某个上面的item变得高亮，需要在页面内实现ScrollView的代理方法
#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];
});
}
c.某些特殊场景下，如果某几个item选中时不需要高亮，例如上面第一个gif图前三个item，需要给下面属性赋值,将不需要高亮的坐标索引放入该数组
self.indexView.itemNoHighlightIndexArray = @[@(0),@(1),@(2)];
3.选中时，带指示器：如第2个、第3个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;
