In tutorials by 3 Comments

iOS Stretchable Image in UITableView

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
photo 1

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

 

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

 

Step 4  

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

  • numberOfRowsInSection: 
  • numberOfSectionsInTableView:
  • heightForRowAtIndexPath:
  • cellForRowAtIndexPath:

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

  Step 6

  • Build and Ready steady go. The output is shown below.

iOS Stretchable Image Screenshot in Iphone

That’s it from this tutorial and try to experiment more by adding scrolling view, views etc.

Checkout this space for more useful and amazing tutorials.

Download Source