ZHXIndexView 0.0.3

ZHXIndexView 0.0.3

×

由zhangxi维护。

ZHXIndexView 0.0.3

ZHXIndexView

· 一个为UITableView和UICollectionView设计的简单索引工具。

中文文档地址

目录

背景

由于iOS系统自带单索引效果且不支持UICollectionView。当使用时，需要自行编写。虽然代码并不复杂，但不需要重新发明轮子。在这里，我提供了一个支持UITableView和UICollectionView的ZHXIndexVeiew包装。

显示效果

基础：

image

高亮 & 无指针：

image

指针 & 前端未高亮

image

用于UITableView

image

安装

  1. 下载 ZHXIndexView，将 ZHXIndexView.h 和 ZHXIndexView.m 文件引入到您的项目中。红色内容是需要导入的文件，蓝色文件是 Demo，你可以查看我的使用方法。image
  2. 如果您在项目中使用 Cocoapods，可以使用命令行。
pod 'ZHXIndexView', '~> 0.0.1'

使用方法

基本使用

基本使用：将 indexView 添加到当前页面

     /*
     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;

同时实现代理方法

如果 UICollectionView，代理方法可以这样写。

#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];
}

如果使用UITableView，代理方法编写如下。

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

扩展使用

第一种情况

如果需要高亮选择的项，例如第二个GIF图片，当字母被选中时，背景将被高亮。

需要为该属性赋值

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

为了使项在滚动结束时停在突出显示的位置，必须在页面中实现UIScrollView的代理方法

#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];
    });
}

第二个案例

在某些特殊场景中，如果未高亮选中某个项目（例如上图中第三个GIF的前三项），则需要为以下属性赋值，并将不需要高亮的坐标索引放入数组中

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

第三个案例

当选中带有指示器时：例如第三个和第四个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;

参考文献

SCIndexView

许可协议

MIT © Zhang Xi