CollectionView 单个选项卡的滑动

简介: 最近在做一个旅行类的项目,里面哟孤儿横向滑动的选项卡功能,乍一看设计图,感觉很简单。横向滑动,CollectionView的flowLayout有这个设置属性,分分钟搞定。后来需求要每次滑动一个选项卡。这就让我有点棘手了,因为心里知道这个应该是要自己去计算偏移量的问题了

前言

最近在做一个旅行类的项目,里面哟孤儿横向滑动的选项卡功能,乍一看设计图,感觉很简单。横向滑动,CollectionView的flowLayout有这个设置属性,分分钟搞定。后来需求要每次滑动一个选项卡。这就让我有点棘手了,因为心里知道这个应该是要自己去计算偏移量的问题了

正题

实现这个功能,主要就是调用了一个UIScrollView的代理方法- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset

不说别的了,直接上代码

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    float pageWidth = 200 + 10;
    float currentOffset = _collectionView.contentOffset.x;
    float targetOffset = targetContentOffset->x;
    float newTargetOffset = 0;
    if (targetOffset+ 20  > currentOffset) {
        newTargetOffset = ceilf(currentOffset/pageWidth) * pageWidth;
    }else{
        newTargetOffset = floorf(currentOffset/ pageWidth) * pageWidth;
    }
    if (newTargetOffset < 0) {
        newTargetOffset = 0;
    }else if (ABS(scrollView.contentSize.width - (newTargetOffset + pageWidth))< pageWidth){
        newTargetOffset = scrollView.contentSize.width - _collectionView.bounds.size.width ;
    }
    newTargetOffset = ceilf(newTargetOffset);
    targetContentOffset->x = currentOffset;
    [scrollView setContentOffset:CGPointMake(newTargetOffset, 0) animated:YES];
}

这里面pageWidth的值是一个item的宽度加间距,之后对于滑到最后一个item的时候不足一个item的宽度做了相应的处理。

如果你们的设计是两边都有留白的情况,你可以设置flowLayout.sectionInset,相应的collectionViewcontentInset属性也要做相应的处理

OS:

大神们有什么好的建议多给我提出来

传送门

Demo

相关文章
|
7月前
|
开发框架 数据可视化 C#
|
9月前
滑动工具条
滑动工具条
64 0
|
9月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
68 0
UIScrollView滑动选页
UIScrollView滑动选页
90 0
TableView自动滚动到底部
TableView自动滚动到底部
224 0
|
C#
WPF无边框拖动、全屏、缩放
原文:WPF无边框拖动、全屏、缩放 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/lwwl12/article/details/78059361 先看效果 无边框 设置WindowStyle=”None”,窗口无关闭及缩放按钮,但还有黑边;设置AllowsTransparency=”True”,黑边没有了。
2148 0
|
C#
【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置
原文:【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置 问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上。 办法:给Slider控件设置属性IsMoveToPointEnabled="True"即可!   https://stackoverflow.
2113 0
|
C#
关于wpf中popup跟随鼠标移动显示
原文:关于wpf中popup跟随鼠标移动显示 最近在做一个画图工具,里面有一个功能是需要实现,当鼠标移动的时候在,鼠标的旁边显示坐标信息。 第一反应是想到了tooltip,但是tooltip有许多的限制,查询资料的过程中看到了popup,popup比tooltip更加灵活,下面讲讲tooltip跟popup的区别: 1.tooltip会自动显示,自动隐藏,而popup则需要设置IsOpen属性,并且在Popup.StaysOen属性为true时,Popup控件会一直显示,直到显式地将IsOpen属性设置为False。
2029 0
UWP 取消GridView、ListView鼠标选中、悬停效果
原文:UWP 取消GridView、ListView鼠标选中、悬停效果 因为经常碰到ListView或者ListBox之类的选中、鼠标悬停样式和自己设置的主题颜色不搭,这时就需要改变这些样式了. 而这里我通过ListView来说明,大致思路其实就是重新定义Item的Template。
1209 0