美文网首页Web前端之路
UICollectionView、UITableView的索引

UICollectionView、UITableView的索引

作者: 码工人生 | 来源:发表于2020-04-06 18:34 被阅读0次

提供一个封装好的ZHXIndexView,仿微信的通讯录索引。既可以用于UICollectionView的索引,也可以用于UITableView的索引。展示效果如下:

a1.gif a2.gif

使用方法

下载ZHXIndexView
),在项目中引入

   self.indexView = [[ZHXIndexView alloc]initWithFrame:CGRectMake(ScreenWidth-24, 180, 24, 550)];
    [self.view addSubview:self.indexView];
    self.indexView.delegate = self;
    
    self.indexView.indexTitles = self.indexData;
    self.indexView.itemTitleColor = [UIColor colorWithString:@"#999999"];
    //如果需要选中的item有背景色, 就给itemSelectedBackgroundColor赋值;反之则不会有背景色
    self.indexView.itemSelectedBackgroundColor = [UIColor colorWithString:@"#198CFF"];
    //如果需要手动选择时,展示左边的指示器,showIndicatorView设置为YES;反之则不展示
    self.indexView.showIndicatorView = YES;

如果需要选中的item保持高亮,实现系统自己的代理方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        NSInteger topSection =  [ZHXIndexView determineTopSectionLocationWithView:self.collectionView];
        [self.indexView changeSelectIndexWhenScrollStop:topSection];
    });
}

要实现ZHXIndexView的代理方法

#pragma mark - ZHXIndexViewDelegate
- (void)indexViewDidSelectIndex:(NSInteger)index {
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:index];
    CGFloat offsetY = [self.collectionView layoutAttributesForItemAtIndexPath:indexPath].frame.origin.y;
    /**
     If you set section header , collectionView edgeInsets .
     Please exclude it .
     */
    if (self.sectionHeaderHeight>0) {
        offsetY = offsetY - self.sectionHeaderHeight;
    }
    if (self.cellTopMargin>0) {
        offsetY = offsetY - self.cellTopMargin;
    }
    [self.collectionView setContentOffset:CGPointMake(0, offsetY) animated:NO];
}

提供的API有


/// determine the top section on scrreen when scroll stop .
/// @param view dispaly view
+ (NSInteger)determineTopSectionLocationWithView:(id)view;

/**
* The delegate of indexView.
*/
@property(nonatomic, weak) id<ZHXIndexViewDelegate> delegate;

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

/**
* The height of View . Size.hieght  is default value.
*/
@property(nonatomic,assign) float contentHeight;

/**
* 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 13.0.
*/
@property(nonatomic, assign) CGFloat itemTitleSize;

/*If you need selected item backgroundColor ,Please implement follow property、method*/

/**
* The item backgroundcolor when selected. Default is nil.
*
*/
@property(nonatomic, strong) UIColor *itemSelectedBackgroundColor;


/// change select item backgroundcolor when scroll stop
/// @param index selectIndex
- (void)changeSelectIndexWhenScrollStop:(NSInteger)index;

/*If you need show right 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;

Demo里有详细的使用方法,UICollectionView和UITableView都可以很方便的引入使用。

参考文章:

SCIndexView

相关文章

网友评论

    本文标题:UICollectionView、UITableView的索引

    本文链接:https://www.haomeiwen.com/subject/fcnbphtx.html