用连续卷轴查看;水平和垂直
问题描述 投票：27回答：4
我一直在努力完成这项任务已有一段时间了。我想开发的是一个scrollview或collectionview，它可以连续滚动垂直和水平。
这是我认为这应该是什么样子的图像。透明框是从存储器重新加载的视图/单元。一旦视图/单元格进入屏幕之外，它应该被重新用于即将到来的新单元格......就像UITableViewController的工作方式一样。
我知道UICollectionView只能做到无限滚动水平或垂直，而不是两者。但是，我不知道如何使用UIScrollView这样做。我尝试了代码attached to an answer on this question，我可以让它重新创建视图（例如％20），但这不是我真正需要的东西..此外，它不是连续的。
我知道这是可能的，因为HBO Go应用程序这样做..我想要完全相同的功能。
我的问题：我怎样才能实现目标？是否有任何指南/教程可以告诉我如何？我找不到任何东西。
4个回答
30
投票
投票
通过使用在距离中心一定距离后重新定位UIScrollView的技术，您可以获得无限滚动。首先，你需要使contentSize足够大，你可以滚动一点，所以我返回我的部分中的项目数量的4倍和部分数量的4倍，并使用cellForItemAtIndexPath方法中的mod运算符来获得正确的索引到我的数组。然后，您必须在layoutSubviews的子类中重写UICollectionView以进行重新定心（这在WWDC 2011视频“高级滚动视图技术”中进行了演示）。以下是具有集合视图（在IB中设置）作为子视图的控制器类：
#import "ViewController.h"
#import "MultpleLineLayout.h"
#import "DataCell.h"
@interface ViewController ()
@property (weak,nonatomic) IBOutlet UICollectionView *collectionView;
@property (strong,nonatomic) NSArray *theData;
@end
@implementation ViewController
- (void)viewDidLoad {
self.theData = @[@[@"1",@"2",@"3",@"4",@"5"], @[@"6",@"7",@"8",@"9",@"10"],@[@"11",@"12",@"13",@"14",@"15"],@[@"16",@"17",@"18",@"19",@"20"]];
MultpleLineLayout *layout = [[MultpleLineLayout alloc] init];
self.collectionView.collectionViewLayout = layout;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.showsVerticalScrollIndicator = NO;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.view.backgroundColor = [UIColor blackColor];
[self.collectionView registerClass:[DataCell class] forCellWithReuseIdentifier:@"DataCell"];
[self.collectionView reloadData];
}
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
return 20;
}
- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
return 16;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
DataCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"DataCell" forIndexPath:indexPath];
cell.label.text = self.theData[indexPath.section %4][indexPath.row %5];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
// UICollectionViewCell *item = [collectionView cellForItemAtIndexPath:indexPath];
NSLog(@"%@",indexPath);
}
这是UICollectionViewFlowLayout子类：
#define space 5
#import "MultpleLineLayout.h"
@implementation MultpleLineLayout { // a subclass of UICollectionViewFlowLayout
NSInteger itemWidth;
NSInteger itemHeight;
}
-(id)init {
if (self = [super init]) {
itemWidth = 60;
itemHeight = 60;
}
return self;
}
-(CGSize)collectionViewContentSize {
NSInteger xSize = [self.collectionView numberOfItemsInSection:0] * (itemWidth + space); // "space" is for spacing between cells.
NSInteger ySize = [self.collectionView numberOfSections] * (itemHeight + space);
return CGSizeMake(xSize, ySize);
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
attributes.size = CGSizeMake(itemWidth,itemHeight);
int xValue = itemWidth/2 + path.row * (itemWidth + space);
int yValue = itemHeight + path.section * (itemHeight + space);
attributes.center = CGPointMake(xValue, yValue);
return attributes;
}
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
NSInteger minRow = (rect.origin.x > 0)? rect.origin.x/(itemWidth + space) : 0; // need to check because bounce gives negative values for x.
NSInteger maxRow = rect.size.width/(itemWidth + space) + minRow;
NSMutableArray* attributes = [NSMutableArray array];
for(NSInteger i=0 ; i < self.collectionView.numberOfSections; i++) {
for (NSInteger j=minRow ; j < maxRow; j++) {
NSIndexPath* indexPath = [NSIndexPath indexPathForItem:j inSection:i];
[attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
}
}
return attributes;
}
最后，这是UICollectionView的子类：
-(void)layoutSubviews {
[super layoutSubviews];
CGPoint currentOffset = self.contentOffset;
CGFloat contentWidth = self.contentSize.width;
CGFloat contentHeight = self.contentSize.height;
CGFloat centerOffsetX = (contentWidth - self.bounds.size.width)/ 2.0;
CGFloat centerOffsetY = (contentHeight - self.bounds.size.height)/ 2.0;
CGFloat distanceFromCenterX = fabsf(currentOffset.x - centerOffsetX);
CGFloat distanceFromCenterY = fabsf(currentOffset.y - centerOffsetY);
if (distanceFromCenterX > contentWidth/4.0) { // this number of 4.0 is arbitrary
self.contentOffset = CGPointMake(centerOffsetX, currentOffset.y);
}
if (distanceFromCenterY > contentHeight/4.0) {
self.contentOffset = CGPointMake(currentOffset.x, centerOffsetY);
}
}
7
投票
投票
@updated for swift 3并更改了maxRow的计算方式，否则最后一列会被截断并导致错误
import UIKit
class NodeMap : UICollectionViewController {
var rows = 10
var cols = 10
override func viewDidLoad(){
self.collectionView!.collectionViewLayout = NodeLayout(itemWidth: 400.0, itemHeight: 300.0, space: 5.0)
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return rows
}
override func numberOfSections(in collectionView: UICollectionView) -> Int {
return cols
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
return collectionView.dequeueReusableCell(withReuseIdentifier: "node", for: indexPath)
}
}
class NodeLayout : UICollectionViewFlowLayout {
var itemWidth : CGFloat
var itemHeight : CGFloat
var space : CGFloat
var columns: Int{
return self.collectionView!.numberOfItems(inSection: 0)
}
var rows: Int{
return self.collectionView!.numberOfSections
}
init(itemWidth: CGFloat, itemHeight: CGFloat, space: CGFloat) {
self.itemWidth = itemWidth
self.itemHeight = itemHeight
self.space = space
super.init()
}
required init(coder aDecoder: NSCoder) {
self.itemWidth = 50
self.itemHeight = 50
self.space = 3
super.init()
}
override var collectionViewContentSize: CGSize{
let w : CGFloat = CGFloat(columns) * (itemWidth + space)
let h : CGFloat = CGFloat(rows) * (itemHeight + space)
return CGSize(width: w, height: h)
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
let x : CGFloat = CGFloat(indexPath.row) * (itemWidth + space)
let y : CGFloat = CGFloat(indexPath.section) + CGFloat(indexPath.section) * (itemHeight + space)
attributes.frame = CGRect(x: x, y: y, width: itemWidth, height: itemHeight)
return attributes
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let minRow : Int = (rect.origin.x > 0) ? Int(floor(rect.origin.x/(itemWidth + space))) : 0
let maxRow : Int = min(columns - 1, Int(ceil(rect.size.width / (itemWidth + space)) + CGFloat(minRow)))
var attributes : Array<UICollectionViewLayoutAttributes> = [UICollectionViewLayoutAttributes]()
for i in 0 ..< rows {
for j in minRow ... maxRow {
attributes.append(self.layoutAttributesForItem(at: IndexPath(item: j, section: i))!)
}
}
return attributes
}
}
2
投票
投票
@ rdelmar的答案就像一个魅力，但我需要迅速做到。这是转换:)
class NodeMap : UICollectionViewController {
@IBOutlet var activateNodeButton : UIBarButtonItem?
var rows = 10
var cols = 10
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return rows
}
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return cols
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
return collectionView.dequeueReusableCellWithReuseIdentifier("node", forIndexPath: indexPath)
}
override func viewDidLoad() {
self.collectionView!.collectionViewLayout = NodeLayout(itemWidth: 100.0, itemHeight: 100.0, space: 5.0)
}
}
class NodeLayout : UICollectionViewFlowLayout {
var itemWidth : CGFloat
var itemHeight : CGFloat
var space : CGFloat
init(itemWidth: CGFloat, itemHeight: CGFloat, space: CGFloat) {
self.itemWidth = itemWidth
self.itemHeight = itemHeight
self.space = space
super.init()
}
required init(coder aDecoder: NSCoder) {
self.itemWidth = 50
self.itemHeight = 50
self.space = 3
super.init()
}
override func collectionViewContentSize() -> CGSize {
let w : CGFloat = CGFloat(self.collectionView!.numberOfItemsInSection(0)) * (itemWidth + space)
let h : CGFloat = CGFloat(self.collectionView!.numberOfSections()) * (itemHeight + space)
return CGSizeMake(w, h)
}
override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
let attributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
let x : CGFloat = CGFloat(indexPath.row) * (itemWidth + space)
let y : CGFloat = CGFloat(indexPath.section) + CGFloat(indexPath.section) * (itemHeight + space)
attributes.frame = CGRectMake(x, y, itemWidth, itemHeight)
return attributes
}
override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
let minRow : Int = (rect.origin.x > 0) ? Int(floor(rect.origin.x/(itemWidth + space))) : 0
let maxRow : Int = Int(floor(rect.size.width/(itemWidth + space)) + CGFloat(minRow))
var attributes : Array<UICollectionViewLayoutAttributes> = [UICollectionViewLayoutAttributes]()
for i in 0...self.collectionView!.numberOfSections()-1 {
for j in minRow...maxRow {
attributes.append(self.layoutAttributesForItemAtIndexPath(NSIndexPath(forItem: j, inSection: i)))
}
}
return attributes
}
}
1
投票
投票
重置contentOffset可能是到目前为止找到的最佳解决方案。
应采取以下几个步骤来实现这一目标：
- 在原始数据集的左侧和右侧填充额外的项目以实现更大的可滚动区域;这类似于具有大的重复数据集，但差异是数量;
- 在开始时，计算集合视图的contentOffset以仅显示原始数据集（以黑色矩形绘制）;
- 当用户向右滚动并且contentOffset达到触发值时，我们重置contentOffset以显示相同的视觉效果;但实际上不同的数据;当用户向左滚动时，使用相同的逻辑。
因此，繁重的工作是计算左侧和右侧应填充的物品数量。如果你看一下插图，你会发现至少有一个额外的项目屏幕应该在左边填充，另外一个额外的屏幕在右边。填充的确切金额取决于原始数据集中的项目数以及项目大小的大小。
我在这个解决方案上写了一篇文章：
http://www.awsomejiang.com/2018/03/24/Infinite-Scrolling-and-the-Tiling-Logic/
最新问题
- 在 CUDA GPU 上运行 Pytorch 量化模型
- 添加额外的代理节点后Kafka主题分区同步
- Fish 脚本可以告诉它存储在哪个目录中吗？
- VisualStudio 中类型名称上的条件断点
- 使用 duende Identityserver 和 docker compose 时，在 API 中授权返回 401 错误（无效令牌）
- Beanstalkd 库版本 1.13+1+g91c54fc
- 在 Emacs 中添加几个函数作为钩子
- Supabase 存储：取消暂停后无法连接
- Flutter Post请求不发送Body参数
- 让孩子在父母滚动时保持粘性
- 访问 oneDrive 时出错：找不到用户的 mysite
- 如果他们只有一种产品，我希望类别直接指向他们的产品。有什么办法可以做到这一点吗？
- 如何在ActivitiEventListener中获取任务
- 如何使用？ and ：java中的表达式
- 不同频率的石斑鱼
- C++20 std::视图和缓存
- 从 gitlab-ci.yaml 中的文件内容设置发布 tag_name
- 使用 Turf.js 检测线串和多边形之间的线相交
- WCS 中的处理程序数据bean 映射出现用户权限错误 (_ERR_USER_AUTHORITY)
- Podio .Net CreateItem 参考
© www.soinside.com 2019 - 2024. All rights reserved.