Friday, 29 April 2016

How to create Parallax scrolling effect in IOS SDK - Tutorial




Parallax scrolling effect in IOS SDK - Tutorial

Parallax scrolling effect is most commonly used in IOS app now days. In this post i am going to tell you that how can we achieve that in our IOS app. I created a class ParallaxViewController
for this purpose. First download the code from below link

https://github.com/leoiphonedev/ParallaxScroll_IOS

Drag and drop the files

1) ParallaxViewController.h
2) ParallaxViewController.m 
3) ParallaxViewController.xib

into your project. Now, inherit this ParallaxViewController in the class/ViewController where you want to implement parallax scrolling. If you don't know how to inherit the class, do just like as shown below


  #import "ParallaxViewController.h"

  @interface ViewController : ParallaxViewController



Run your code now and you will see screen like this

Parallax scroll view in iOS
View with parallax scrolling

You can change the behaviour of the screen by using below properties


Change Image height:


  self.headerImageViewHeight.constant = 250;


After setting header image view height do call adjustContentViewHeight method, it will set the content view height with respect to header image view height automatically.

Change Content View height: 

contentViewHeight, this will change the height of the content view i.e. the green view by default its set to view hight - 300(image height)

  
  self.contentViewHeight.constant = 600;


Add controls to content view:

You can add controls to content view, below is the example


  UILabel *lable = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 180, 21)];
    lable.text = @"Parallax View";
    [self.contentView addSubview:lable];


self.contentView, can add multiple controls to self.contentView.

Final Output would be like this:





No comments:
Write comments