Yahoo 天气 iOS 应用中水平滚动的效果

Question

有人能帮我解决ScrollView滑动的效果，就像Yahoo Weather iOS App一样吗？谢谢！

self.backgroundView = [[DKLiveBlurView alloc] initWithFrame: self.view.bounds];        
    NSString *fileName = [[NSBundle mainBundle] pathForResource:[self.imageArray objectAtIndex:randomId] ofType:@"png"];        
    UIImage *image = [UIImage imageWithContentsOfFile:fileName];
    self.backgroundView.originalImage = image;
    self.backgroundView.scrollView = self.tableView;
    self.backgroundView.isGlassEffectOn = YES;
    self.tableView.backgroundView = self.backgroundView;

- TuyenBQ

---

你的意思是使用分页吗？ - Adam Richardson

是的，我认为过渡效果需要两层，当然，我们应该使用Paging和UIScrollView。但是此时，我有些困惑 :( - TuyenBQ

Answer 1

您可以使用带分页的UIScrollView来实现它。通过在didScroll上设置适当的contentOffset，您可以实现类似于Yahoo天气中的视差效果。WWDC 2013有一个关于嵌套滚动视图的很棒的视频，可以参考一下。

我还创建了一个使用scrollView实现该视差效果的示例项目- https://github.com/vin25/SideScrollParallaxEffect-iOS

- vin25

Answer 2

我相信天气应用正在使用 UIPageController ，它的转场效果是自动的。你可以找到很多关于它如何工作的教程（例如可以看看 这一个 ）。

在您的应用程序视图控制器头文件中，添加一个 UIPageViewController 的属性：

#import <UIKit/UIKit.h>

@interface YourAppViewController : UIViewController <UIPageViewControllerDataSource>

@property (strong, nonatomic) UIPageViewController *pageController;

@end

在你的应用程序的视图控制器.m文件中，实现这些方法：

• 增加/减少屏幕索引并返回视图控制器以显示:

  - (UIViewController *) pageViewController:(UIPageViewController *)pageViewController
  viewControllerBeforeViewController:(UIViewController *)viewController
  {
      NSUInteger index = [(YourAppViewController *)viewController index];
      if (index == 0) {
          return nil;
      }
  
      index--;
  
      return [self viewControllerAtIndex:index];
  }
  
  - (UIViewController *) pageViewController:(UIPageViewController *)pageViewController 
  viewControllerAfterViewController:(UIViewController *)viewController
  {
      NSUInteger index = [(YourAppViewController *)viewController index];
      index++;
  
      if (index == 5) {
          return nil;
      }
  
      return [self viewControllerAtIndex:index];
  }
  

• 最后，设置页面指示器中点的数量和开始时必须选择哪个点。

  - (NSInteger) presentationCountForPageViewController:
    (UIPageViewController *)pageViewController 
  {
      // 页面指示器中反映的项目数。
      return 5;
  }
  
  - (NSInteger) presentationIndexForPageViewController:
  (UIPageViewController *)pageViewController
  {
      // 页面指示器中反映的选定项目。
      return 0;
  }
  

- veducm

Answer 3

我使用普通的UIPageViewController子类和自动布局约束实现了Yahoo Weather的视差效果，用于背景图像的视差效果。 （我不想重新创建一个带有页面的整个scrollView，因为我相信UIPageViewController已经免费处理了很多东西）。

这是它： https://github.com/frederic-adda/TestParallax/tree/master

- Frederic Adda