表格视图控制器中的图像在滚动表格视图时放大

Question

I want to make a Table View Controller that hold a table view and an image view in table view header view. When I scroll down the table view I want to zoom in the image (like in CNN app for iOS). I tried a lot of things but none of them to this as I want. Maybe someone can help me. Thanks!

All screen will look like this image like in this image:

_{(source: mzstatic.com )}

Answer 1

I tried to do this by making the image at the top the header view of the table, but couldn't get that to work.

The way that did work, was to add a scroll view to the top of a UIViewController's view with a image view inside it. I then added a table view, and made it the same size as the controller's view so that it is over top the small scroll view that holds the image (this was done in a storyboard with auto layout turned off). In code, I add a table header view that's transparent and has a label that acts as the caption for the picture. It has the same height as the small scroll view. When you scroll the content of the table view up, I also scroll the small scroll view but at half the rate. If you pull the content down, I change the frame of the small scroll view so that it expands and stays centered. Here's the code:

@interface ViewController ()
@property (strong,nonatomic) NSArray *theData;
@property (weak,nonatomic) IBOutlet UITableView *tableView;
@property (weak,nonatomic) IBOutlet UIScrollView *imageScrollView;
@property (nonatomic) CGRect svFrame;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    self.imageScrollView.delegate = self;
    self.imageScrollView.contentSize = CGSizeMake(500, 500);
    self.svFrame = self.imageScrollView.frame;
    self.theData = @[@"One",@"Two",@"Three",@"Four",@"Five",@"Six",@"Seven",@"Eight",@"Nine"];

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 135)];
    headerView.backgroundColor = [UIColor clearColor];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, headerView.frame.size.width, 24)];
    label.backgroundColor = [UIColor clearColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.textColor = [UIColor whiteColor];
    label.text = @"This is a Picture Caption";
    [headerView addSubview:label];
    self.tableView.tableHeaderView = headerView;

    [self.tableView reloadData];
}

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    UIView *bgView = [[UIView alloc] init];
    bgView.backgroundColor = [UIColor whiteColor];
    cell.backgroundView = bgView;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.theData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.textLabel.text = self.theData[indexPath.row];
    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (! [scrollView isEqual:self.imageScrollView]) {
        if (scrollView.contentOffset.y > 0) {
            self.imageScrollView.contentOffset = CGPointMake(0, scrollView.contentOffset.y/2);
        }else{
            self.imageScrollView.frame = CGRectMake(scrollView.contentOffset.y, scrollView.contentOffset.y, self.svFrame.size.width - (scrollView.contentOffset.y * 2), self.svFrame.size.height - (scrollView.contentOffset.y * 2));
        }
    }
}