fuzionpro

Posted: 22 Dec 2013 09:26 AM PST

In most of the iOS Applications, especially in the social networking applications like Facebook , Twitter, Viber or Whats app etc…. most significant aspect is to show the profile page of the logged in user or any other user.

It’s very important to show the user’s profile image in a very engaging and more interactive way, like the way shown below.
Download Source

In this tutorial, We discuss on how to implement these type of interactions in iOS applications.

The simple logic lies here is, When the user scrolls the UITableView, we need to position the UIImageView accordingly in the UITableView delegate method scrollViewDidScroll:(UIScrollView *)scrollView.

Let’s get on to tutorial with simple steps and less coding

Steps to implement iOS stretchable image

Step 1

Create a Single View based application in Xcode and set up the UITableView

Step 2

In the .h of the ViewController declare the variable named ”defaultY” to hold the initial offset value of the UIImageView

#import <UIKit/UIKit.h>    @interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>  {    //To hold the scrollView offset value     float defaultY;    }    @property(nonatomic, retain)UITableView *tableView;  @property(nonatomic, retain)UIImageView *imageView;    @end

Step 3

In the .m of the ViewController, set up the UITableView and UIImageView. Here the trick comes,

Move the UIImageView frame to -130 along the Y axis. Assign the value of the UIImageView frame to defaultY to be used in the scrollViewDidScroll
Create a view and assign it to header of the UITableView as shown below in the code snippet

@implementation ViewController    - (void)viewDidLoad  {      [super viewDidLoad];  	// Do any additional setup after loading the view, typically from a nib.        //Set Up the UITableView      _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, self.view.frame.size.height)];      _tableView.dataSource = self;      _tableView.delegate = self;        //Set up the UIImageView      UIImage *image = [UIImage imageNamed:@"Jobs.jpg"];      _imageView = [[UIImageView alloc] initWithImage:image];      _imageView.frame = CGRectMake(0, 0, 320, 480);      CGRect frame = _imageView.frame;        //Intially make the UIIImageView to go beyond the normal y axis to give the user the growing imageView while dragging      frame.origin.y -= 130;      //Set the value to the float variable for further refrence in the didscroll      defaultY = frame.origin.y;      //Apply the change to the UIImageView frame      _imageView.frame = frame;        _tableView.backgroundColor = [UIColor clearColor];        //Set the header      UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 170)];      header.backgroundColor = [UIColor clearColor];      _tableView.tableHeaderView = header;        [self.view addSubview:_imageView];      [self.view addSubview:_tableView];  }

Step 4

As usual, set up of the UITableView by defining following UITableView datasource delegates

numberOfRowsInSection:
numberOfSectionsInTableView:
heightForRowAtIndexPath:
cellForRowAtIndexPath:

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {      return 10;  }    - (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {      return 1;  }    -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {      return 70;  }    - (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {        static NSString *cellIdentifier = @"Cell";      UITableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:cellIdentifier];        if (cell == nil) {          cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];      }        cell.imageView.image = [UIImage imageNamed:@"Jobs_thumb.jpg"];      cell.imageView.contentMode = UIViewContentModeScaleAspectFit;      cell.imageView.autoresizingMask = UIViewAutoresizingNone;      cell.imageView.layer.cornerRadius = 25.0;      cell.imageView.layer.masksToBounds = YES;      [cell.imageView.layer setBorderColor: [[UIColor blueColor] CGColor]];      [cell.imageView.layer setBorderWidth: 1.0];      cell.textLabel.text = @"Steve Jobs";      cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];      cell.textLabel.textColor = [UIColor blueColor];      cell.detailTextLabel.text = [NSString stringWithFormat:@"My timeline contents --- %d",indexPath.row];      cell.detailTextLabel.textColor = [UIColor darkGrayColor];        return cell;  }

Step 5

Here comes the real action, where in the scrollViewDidScroll: get the current scrollView y axis offset and check if it’s less than zero, if so then change the size of the UIImageView frame else reset to it’s original position

//Where the Real Action goes in  - (void) scrollViewDidScroll:(UIScrollView *)scrollView {        //Hold the initial the scrollView y value      float offsetY = scrollView.contentOffset.y;      CGRect frame = _imageView.frame;        //Perform the Stretching action here      if (offsetY < 0) {          frame.origin.y = defaultY - offsetY * 0.6;      }      //Reset it to the Original Position      else {          frame.origin.y = defaultY - offsetY;      }        //Set the frame of UIImageView      _imageView.frame = frame;    }

Step 6