ScrollView类似于纽约时代的网页

Question

我想创建一个类似于http://www.nytimes.com/interactive/2015/04/22/magazine/new-york-city-walks.html?smid=tw-nytimes&_r=1的滚动视图（请参阅iPhone上的链接，而不是网络）

我希望用户滚动然后显示像此页面一样的图像效果。我不想在集合视图中放置一个空单元格并具有背景图像。我想显示来自可点击的第三方API的一些内容，因此我必须将此效果集成到滚动视图中。有关如何实现这一目标的任何建议吗？

Answer 1

是的你可以通过使用tableview轻松实现这一点，如果内容更多则会出现内存问题，所以更好的是通过重用单元格及其内容来使用tableview，你可以获得更好的性能。通过子类化tableview单元，您可以自定义外观和交互。例如，我拿了一个tableview，一些长文本假设你正在单元格中显示文本

- (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
  UIFont *labelFont = [UIFont fontWithName:@"Noteworthy-Bold" size:20];
  NSDictionary *arialdict = [NSDictionary dictionaryWithObject:labelFont forKey:NSFontAttributeName];

  array = [NSMutableArray arrayWithObjects:
        @"I want the user to scroll and then show an image effect like this page. I dont want to place an empty cell in the collection view and have a background image. I want to display some content from third party API which is clickable hence I have to integrate this effect into the scroll view. Any suggestions how this could be achieved?",
        @"The drag-and-drop design interface makes creating and updating Passbook passes and Google Wallet cards a snap. Better yet, if you create a pass for Passbook, our system can map the fields over to a corresponding card for Google Wallet, and vice-versa. The visual WYSIWYG editor also lets you preview your design as you go, so you can see the pass or card come to life, and you don't have to spend time sending yourself tests over and over as you build out your program. Choose colors, images, texts fields, and more--without writing a single line of code.",
        @"It's the community...The community forums provide a valuable exchange of knowledge that makes game development faster and more fun for everyone, from new users to industry vets.The user groups…Many of our users find fellow developers and artists to collaborate with through their local Unity user group. Find one near you and get in touch!New services...What happens after you finish your game? How do you find more players, and make enough money to keep doing what you love? Our new services can help!Unity Ads is just one of our new services available that helped Hipster Whale make over a million dollars!Increase the visibility of your game and drive organic installs with Unity Everyplay, a simple service that enables players to seamlessly record and post replay videos directly from inside your game, and share them with their friends and family.", @"I want the user to scroll and then show an image effect like this page. I dont want to place an empty cell in the collection view and have a background image. I want to display some content from third party API which is clickable hence I have to integrate this effect into the scroll view. Any suggestions how this could be achieved?",
        @"The drag-and-drop design interface makes creating and updating Passbook passes and Google Wallet cards a snap. Better yet, if you create a pass for Passbook, our system can map the fields over to a corresponding card for Google Wallet, and vice-versa. The visual WYSIWYG editor also lets you preview your design as you go, so you can see the pass or card come to life, and you don't have to spend time sending yourself tests over and over as you build out your program. Choose colors, images, texts fields, and more--without writing a single line of code.",
        @"It's the community...The community forums provide a valuable exchange of knowledge that makes game development faster and more fun for everyone, from new users to industry vets.The user groups…Many of our users find fellow developers and artists to collaborate with through their local Unity user group. Find one near you and get in touch!New services...What happens after you finish your game? How do you find more players, and make enough money to keep doing what you love? Our new services can help!Unity Ads is just one of our new services available that helped Hipster Whale make over a million dollars!Increase the visibility of your game and drive organic installs with Unity Everyplay, a simple service that enables players to seamlessly record and post replay videos directly from inside your game, and share them with their friends and family.",@"I want the user to scroll and then show an image effect like this page. I dont want to place an empty cell in the collection view and have a background image. I want to display some content from third party API which is clickable hence I have to integrate this effect into the scroll view. Any suggestions how this could be achieved?",
        @"The drag-and-drop design interface makes creating and updating Passbook passes and Google Wallet cards a snap. Better yet, if you create a pass for Passbook, our system can map the fields over to a corresponding card for Google Wallet, and vice-versa. The visual WYSIWYG editor also lets you preview your design as you go, so you can see the pass or card come to life, and you don't have to spend time sending yourself tests over and over as you build out your program. Choose colors, images, texts fields, and more--without writing a single line of code.",
        @"It's the community...The community forums provide a valuable exchange of knowledge that makes game development faster and more fun for everyone, from new users to industry vets.The user groups…Many of our users find fellow developers and artists to collaborate with through their local Unity user group. Find one near you and get in touch!New services...What happens after you finish your game? How do you find more players, and make enough money to keep doing what you love? Our new services can help!Unity Ads is just one of our new services available that helped Hipster Whale make over a million dollars!Increase the visibility of your game and drive organic installs with Unity Everyplay, a simple service that enables players to seamlessly record and post replay videos directly from inside your game, and share them with their friends and family.",@"I want the user to scroll and then show an image effect like this page. I dont want to place an empty cell in the collection view and have a background image. I want to display some content from third party API which is clickable hence I have to integrate this effect into the scroll view. Any suggestions how this could be achieved?",
        @"The drag-and-drop design interface makes creating and updating Passbook passes and Google Wallet cards a snap. Better yet, if you create a pass for Passbook, our system can map the fields over to a corresponding card for Google Wallet, and vice-versa. The visual WYSIWYG editor also lets you preview your design as you go, so you can see the pass or card come to life, and you don't have to spend time sending yourself tests over and over as you build out your program. Choose colors, images, texts fields, and more--without writing a single line of code.",
         @"It's the community...The community forums provide a valuable exchange of knowledge that makes game development faster and more fun for everyone, from new users to industry vets.The user groups…Many of our users find fellow developers and artists to collaborate with through their local Unity user group. Find one near you and get in touch!New services...What happens after you finish your game? How do you find more players, and make enough money to keep doing what you love? Our new services can help!Unity Ads is just one of our new services available that helped Hipster Whale make over a million dollars!Increase the visibility of your game and drive organic installs with Unity Everyplay, a simple service that enables players to seamlessly record and post replay videos directly from inside your game, and share them with their friends and family.",@"I want the user to scroll and then show an image effect like this page. I dont want to place an empty cell in the collection view and have a background image. I want to display some content from third party API which is clickable hence I have to integrate this effect into the scroll view. Any suggestions how this could be achieved?",
         @"The drag-and-drop design interface makes creating and updating Passbook passes and Google Wallet cards a snap. Better yet, if you create a pass for Passbook, our system can map the fields over to a corresponding card for Google Wallet, and vice-versa. The visual WYSIWYG editor also lets you preview your design as you go, so you can see the pass or card come to life, and you don't have to spend time sending yourself tests over and over as you build out your program. Choose colors, images, texts fields, and more--without writing a single line of code.",
         @"It's the community...The community forums provide a valuable exchange of knowledge that makes game development faster and more fun for everyone, from new users to industry vets.The user groups…Many of our users find fellow developers and artists to collaborate with through their local Unity user group. Find one near you and get in touch!New services...What happens after you finish your game? How do you find more players, and make enough money to keep doing what you love? Our new services can help!Unity Ads is just one of our new services available that helped Hipster Whale make over a million dollars!Increase the visibility of your game and drive organic installs with Unity Everyplay, a simple service that enables players to seamlessly record and post replay videos directly from inside your game, and share them with their friends and family.",nil];

 }
 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 {
   return 1;
 }

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
   return [array count];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
   UITableViewCell *Cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
  if(Cell == nil)
  {
      Cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
  }


  [Cell.textLabel sizeToFit];
  Cell.textLabel.attributedText = [[NSMutableAttributedString alloc] initWithString:[array objectAtIndex:indexPath.row]];
  Cell.textLabel.numberOfLines = 0;
  Cell.textLabel.alpha = 0.0f; //set the label alpha to zero 
  return Cell;
 }

 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
   //hear only u can make cell's contents to visible' make changes to your contents hear, for example if the cells contains map view, buttons ..etc put all in a single view and set its alpha to zero, and in the animation block set it to one similar to below example
  cell.textLabel.alpha = 0.0f;
  [UIView animateWithDuration:3 animations:^{
     cell.textLabel.alpha = 1.0f; //and hear set it to one 
  }];

}

//calculate height of the text
-(float)height :(NSString *)string
{

   NSAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:string];
   CGRect rect = [attributedText boundingRectWithSize:(CGSize){225, MAXFLOAT}
                                           options:NSStringDrawingUsesLineFragmentOrigin
                                           context:nil];
   CGSize requiredSize = rect.size;
   return requiredSize.height;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
   //whatever the height u need to calculate calculate hear only
   CGFloat heightOfcell = [self height:[array objectAtIndex:indexPath.row]];
   NSLog(@"%f",heightOfcell);
   return heightOfcell + 100;
}  

在单独的项目中尝试你会看到效果只是把tableview设置为其数据源并委托并通过上面的代码运行，结果就像在网站上一样

编辑看起来像iPhone网站

为此你需要使用自定义单元格，例如，

此holder中的

是涵盖整个content view单元格的视图，它包含另一个视图componentsHolder，其中包含按钮，标签等所有组件。

在上面的图像中设置背景颜色以清除

整个布局如下所示

现在将content view and holder - view background color to clear color设置componentsHolder-view背景颜色设置为white color，不要更改此视图背景颜色

并在桌面视图后面添加图像视图，例如在控制器中

并设置tableview背景颜色以清除颜色，此backImageView是我们要在代码中出现每个单元格后更改其图像的图像，所有单元格都具有相同的高度

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 {
   return 1;
 }

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 {
   return [array count];
 }


 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     CustomCellTableViewCell *Cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
     if(Cell == nil)
     {
        Cell = [[CustomCellTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];

     }
     Cell.descriptionLabel.text = [array objectAtIndex:indexPath.row];
     [Cell.descriptionLabel sizeToFit];
     return Cell;
  }

  //hear u can change the image, example i am changing the image randomly in website they are animate the changing the of the image thats all
  - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
  {
    //change image hear
    NSInteger randIndex = arc4random() % 2;
    UIImage *aimage = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",(long)randIndex]];
    _backImageView.image = aimage;
  }

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     return 585.0f; //constant height
 }

最终结果如下，

Answer 2

这是一种视差效应。这里有一些关于该效果的链接link link link希望这会有效