IOS 仿礼物说分类

2016-09-28  本文已影响416人  MrLiangC

实现效果如下:


分类视图

左边是一个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的布局和数据展示,这里就不详细说明了

上一篇下一篇

猜你喜欢

热点阅读