美文网首页
设置两个collectionView的联动效果!

设置两个collectionView的联动效果!

作者: hunterzhu | 来源:发表于2016-07-26 20:06 被阅读147次

KVO在我们的App的设置中用途非常广泛,今天我们讲的这个联动效果就需要用到KVO

1.在collectionView1 中设置页码,即每个cell的偏移值,然后运用到代理方法

//将要结束拖拽(手指离开屏幕的的那一刻)
//该方法需要将pagingEnabled关掉才可以使用
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    
    NSLog(@"---------");
    NSLog(@"滑动的速度%lf",velocity.x);
    NSLog(@"松手时x方向的偏移量:%lf",scrollView.contentOffset.x);
    //targetContentOffset是个指针,可以修改参数.
    NSLog(@"目标的最终的偏移量:%lf",targetContentOffset->x);
    
    //1 根据偏移量判断一下应该显示第几个item
    CGFloat offSetX = targetContentOffset->x;
    
    CGFloat itemWidth =80;
    
    //item的宽度+行间距 = 页码的宽度
    NSInteger pageWidth = itemWidth+10;
    
    
    //根据偏移量 计算是 第几页
    NSInteger pageNum = (offSetX+pageWidth/2)/pageWidth;
    
    NSLog(@"pageNumber= %ld",pageNum);
    
    //2 根据显示的第几个item,从而改变偏移量
    targetContentOffset->x = pageNum*pageWidth;
    //设置currentIndex属性,接收这个页码
    self.currentIndex = pageNum;
}

2.在collectionView2中设置观察者

      [smallCollectionV addObserver:self
                           forKeyPath:@"currentIndex" //监听的属性
                              options:NSKeyValueObservingOptionNew context:nil];

3.改变collectionView2的item 即页码

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{

    NSInteger index = [[change objectForKey:@"new"]integerValue];
   //转成index 
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
//实时转换页面
    [largeCollectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
    
    

1
2

相关文章

  • 设置两个collectionView的联动效果!

    KVO在我们的App的设置中用途非常广泛,今天我们讲的这个联动效果就需要用到KVO 1.在collectionVi...

  • 遇到的小问题

    collectionView没有反弹效果,设置_collectionView.alwaysBounceVertic...

  • collectionView的联动效果

    这次的电影项目,很多地方都用到了collectionView,像图片的显示,相册的显示等等。这里我要说的是图片的联...

  • 27

    运行效果: 给控件添加collectionView 给collectionView设置约束 上下左右为0 设置数据...

  • iOS tableView与collectionView联动

    tableView collectionView联动TableView 与 CollectionView 之间的二...

  • Echarts表格联动

    Echarts表格联动设置最主要要设置connect,并且联动表格数据长度要相同。 html js 效果图

  • iOS tableView联动

    方一:利用collectionView和tableView实现联动.(以后更新)方法二:利用两个tablview实...

  • 两个联动的TableView

    有的软件有联动效果,两个tableview左右可以联动,上下也可以联动,这是怎么做到的呐。先看效果图 代码结构 头...

  • Swift collectionView 实现双表联动效果

    如图效果 我选择左边和右边都用collectionView实现 实现这个效果,主要有两个技术点 1、点击左边ite...

  • iOS 下方添加栏目频道,上方删除列表实现

    效果类似头条的效果,看效果图(demo文末) 思路 其实就是collectionview 两个数据源交换两个效果分...

网友评论

      本文标题:设置两个collectionView的联动效果!

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