UICollectionView:像 Safari 选项卡或 App Store 搜索一样分页 [英] UICollectionView: paging like Safari tabs or App Store search

问题描述

我想在我的应用中实现卡片"，例如 Safari 选项卡或 App Store 搜索.

I want to implement "cards" in my app like Safari tabs or App Store search.

我将在屏幕中心向用户显示一张卡片，并在左右两侧显示上一张和下一张卡片的一部分.(例如，请参阅 App Store 搜索或 Safari 选项卡)

I will show user one card in a center of screen and part of previous and next cards at left and right sides. (See App Store search or Safari tabs for example)

我决定使用UICollectionView，我需要改变页面大小(没找到怎么做)或者实现自己的布局子类(不知道怎么做)?

I decided to use UICollectionView, and I need to change page size (didn't find how) or implement own layout subclass (don't know how)?

有什么帮助吗?

推荐答案

以下是我找到的获得此效果的最简单方法.它涉及您的收藏视图和一个额外的秘密滚动视图.

Below is the simplest way that I've found to get this effect. It involves your collection view and an extra secret scroll view.

设置您的收藏视图

• 设置您的集合视图及其所有数据源方法.
• 框出集合视图；它应该跨越您希望可见的整个宽度.

• 设置集合视图的contentInset:

_collectionView.contentInset = UIEdgeInsetsMake(0, (self.view.frame.size.width-pageSize)/2, 0, (self.view.frame.size.width-pageSize)/2);

这有助于正确偏移单元格.

This helps offset the cells properly.

设置您的秘密滚动视图

• 创建一个滚动视图，将其放置在您喜欢的任何位置.如果您愿意，可以将其设置为 hidden.
• 将滚动视图的边界大小设置为页面所需的大小.
• 将自己设置为滚动视图的代表.
• 将其 contentSize 设置为集合视图的预期内容大小.

• Create a scrollview, place it wherever you like. You can set it to hidden if you like.
• Set the size of the scrollview's bounds to the desired size of your page.
• Set yourself as the delegate of the scrollview.
• Set its contentSize to the expected content size of your collection view.

移动你的手势识别器

• 将秘密滚动视图的手势识别器添加到集合视图中，并禁用集合视图的手势识别器:

• Add the secret scrollview's gesture recognizer to the collection view, and disable the collection view's gesture recognizer:

[_collectionView addGestureRecognizer:_secretScrollView.panGestureRecognizer];
_collectionView.panGestureRecognizer.enabled = NO;

委托

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint contentOffset = scrollView.contentOffset;
    contentOffset.x = contentOffset.x - _collectionView.contentInset.left;
    _collectionView.contentOffset = contentOffset;
}

随着滚动视图的移动，获取它的偏移量并将其设置为集合视图的偏移量.

As the scrollview moves, get its offset and set it to the offset of the collection view.

我在这里写过关于这个的博客，所以请查看这个链接以获取更新:http://khanlou.com/2013/04/paging-a-overflowing-collection-view/

I blogged about this here, so check this link for updates: http://khanlou.com/2013/04/paging-a-overflowing-collection-view/

这篇关于UICollectionView:像 Safari 选项卡或 App Store 搜索一样分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！