实现效果如下:
分类视图
左边是一个tableview,右边是一个collectionView,当点击tableview的时候右边的collection会跟着滑动,主要的处理代码如下:
自定义tableview中处理点击后的字体变红和增加一个竖线的问题:
自定义tableviewCell:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])
{ self.selectionStyle = UITableViewCellSelectionStyleNone;
_name = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 70, 40)];
_name.numberOfLines = 0;
_name.textAlignment = NSTextAlignmentCenter;
_name.textColor = [UIColor blackColor];
_name.highlightedTextColor = [UIColor redColor];
_name.font = [UIFont systemFontOfSize:13];
[self.contentView addSubview:_name];
_redView = [[UIView alloc] initWithFrame:CGRectMake(0, 5, 2, 36)];
_redView.backgroundColor = [UIColor redColor];
[self.contentView addSubview:_redView];
}
return self;
}
处理点击时候的效果
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{ [super setSelected:selected animated:animated];
self.contentView.backgroundColor = selected ? [UIColor whiteColor] : [UIColor colorWithWhite:0 alpha:0.1];
self.highlighted = selected;
self.name.highlighted = selected;
self.redView.hidden = !selected;
}
加载完成数据后默认选中第一个cell
//默认选中第0个cell
[_tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];
//当点击tableView的时候collection滚动到相应的位置去
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
_selectIndex = indexPath.row;
//处理点击tableviewCell滚动置顶的问题
[tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
//collection滚动到第几组去
[_collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:indexPath.row] atScrollPosition:UICollectionViewScrollPositionTop animated:YES];
}
// CollectionView分区标题即将展示
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath {
// 当前CollectionView滚动的方向向上,CollectionView是用户拖拽而产生滚动的(主要是判断CollectionView是用户拖拽而滚动的,还是点击TableView而滚动的)_isScrollDown默认为yes
if (!_isScrollDown && collectionView.dragging) {
[self selectRowAtIndexPath:indexPath.section];
}
}
// CollectionView分区标题展示结束
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(nonnull UICollectionReusableView *)view forElementOfKind:(nonnull NSString *)elementKind atIndexPath:(nonnull NSIndexPath *)indexPath
{ // 当前CollectionView滚动的方向向下,CollectionView是用户拖拽而产生滚动的(主要是判断CollectionView是用户拖拽而滚动的,还是点击TableView而滚动的)
if (_isScrollDown && collectionView.dragging) {
[self selectRowAtIndexPath:indexPath.section + 1];
}
}
// 当拖动CollectionView的时候,处理TableView
- (void)selectRowAtIndexPath:(NSInteger)index
{ [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:index inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
}
#pragma mark - UIScrollView Delegate
// 标记一下CollectionView的滚动方向,是向上还是向下
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{ static float lastOffsetY = 0;
if (self.collectionView == scrollView) {
_isScrollDown = lastOffsetY < scrollView.contentOffset.y;
lastOffsetY = scrollView.contentOffset.y;
}
}
这里只贴出了关键部分的实现代码,其他的都是最基本的tableview和collection的布局和数据展示,这里就不详细说明了
网友评论