如何在 iPhone 上实现与在主屏幕之间导航相同的平移/滑动效果组合？答案

【问题标题】：How to realize the same combination of pan/swipe effect as in navigating between homescreens on the iPhone?如何在 iPhone 上实现与在主屏幕之间导航相同的平移/滑动效果组合？
【发布时间】：2012-10-22 15:57:00
【问题描述】：

在 iPhone 上，您可以通过三种不同的方式在不同的主屏幕之间切换。

您可以向左或向右滑动，下一个屏幕将分别进入动画。
您触摸屏幕并且不抬起手指就将屏幕向右或向左拖动。在通过临界点（即屏幕一半以上的距离）后，当您抬起手指时，下一个主屏幕会显示动画。
您触摸屏幕并且不抬起手指就稍微拖动屏幕，如果您愿意，您可以停止拖动但仍然不要离开手指。并且您可以在相对较短的距离内向左或向右加速，它会在左侧或右侧的相应屏幕上显示动画。

如果我们只看第 1 点和第 2 点，我们会发现它们实现起来很简单。这只是第 1 点的 UISwipeGuestureRecognizer 和第 2 点的 UIPanGuestureRecognizer。

将 1 和 2 结合起来似乎不是那么简单，因为滑动似乎占主导地位（我试图将它们与 - (void)requireGestureRecognizerToFail:(UIGestureRecognizer *)otherGestureRecognizer 结合起来）。要触发平移，我必须将手指放在屏幕上并非常轻柔地拖动才能不触发滑动。

更不用说第三点了。这似乎完全不符合我的知识水平。

这里有什么建议吗？非常感谢您提前。如果需要更多信息来解决这个问题，我很乐意提供。

【问题讨论】：

标签： ios ios5 uigesturerecognizer uipangesturerecognizer uiswipegesturerecognizer

【解决方案1】：

主屏幕只是一个UIScrollView 和UIPageControl 就这么简单:)

例子：

// MyViewController.h
@interface MyViewController : UIViewController <UIScrollViewDelegate> {
    UIScrollView *_scrollView;
    UIPageControl *_pageControl;
}

// MyViewController.m
// in your viewDidLoad method
int numberOfPages = 3;
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,
                                                                 self.view.frame.size.height)];
 [_scrollView setContentSize:CGSizeMake(numberOfPages*_scrollView.frame.size.width, _scrollView.frame.size.height)];
 [_scrollView setPagingEnabled:YES];
 [_scrollView setShowsHorizontalScrollIndicator:NO];
 [_scrollView setDelegate:self];
 [self.view addSubview:_scrollView];

 _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _scrollView.frame.size.height-30, _scrollView.frame.size.width, 20)];
 [_pageControl setNumberOfPages:numberOfPages];
 [_pageControl setCurrentPage:0];
 [self.view addSubview:_pageControl];

for (int i=0; i<numberOfPages; i++) {
   CGRect frame = _scrollView.frame;
   frame.origin.x = frame.size.width * i;
   frame.origin.y = 0;
   UIView *view = [UIView alloc] initWithFrame:frame];
   //Setup your view     
   [_scrollView addSubview:view];
}

如果要对当前显示的视图执行特定方法，请使用scrollViewDidScroll: 方法（例如从数据库加载内容）

- (void)scrollViewDidScroll:(UIScrollView *)sender {
    CGFloat pageWidth = _scrollView.frame.size.width;
    int page = floor((_scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    _pageControl.currentPage = page;

    //do whatever you want..
}

这只是向您展示如何做到的示例。如果您使用的是数据库，或者每个视图都不同，您应该以不同的方式设置视图或检索数据，但逻辑将是相同的......

【讨论】：

首先感谢您的快速回复。我应该在问题中添加更多信息。这种行为是否可以在不使用 UIPageControl 的情况下实现？我的视图确实显示了来自数据库的文本数据。并且向右/向左平移/滑动应诱导下一个/最后一个数据文本。所以它不是真正的页面，而是用户可以浏览的数千个视图之一。视图被重用——我实际上只有三个 UIView。一个在左边，一个在右边，一个在中间。
就是这样，您可以使用UIScrollView + UIPageControl 做到这一点。我将编辑我的答案以向您展示一个示例。
WWDC 2010 和 2011 视频中也有一些关于滚动视图的很好的例子，我认为在 2012 年他们可能已经更新了演示以使用集合视图，这绝对是要走的路如果您需要 iOS 6。
谢谢你，@ZevEisenberg。如果您手头有一个链接，会很高兴提供一个链接吗？我的应用程序必须在 ios5 和 ios6 上运行，所以很遗憾我不能只依赖 ios6 的功能。

【解决方案2】：

WWDC 2012 videos

了解使用滚动视图增强用户体验

WWDC 2011 videos

查看高级滚动视图技术

【讨论】：