Add To Cart – Shopping Cart View Animation using UITabBar & UITableView

Check out above video first before going through the entire post.
Did you like that implementation ? Do you really want to have similar kind of implementation ?
Are you really looking for something similar ?

If yes, this post is for you. I will quickly describe through number of steps.
Based on needs, one can skip steps like creating project etc. etc.

01. Create new ‘Single View Application‘ as illustrated below.

sugartin addtocart shopping animation uiview layer step 01

02. Set the name of the project. (Here AddToCart for example) ( Note : I am not using storyboard in this case )

sugartin addtocart shopping animation uiview layer step 02

03. Okay. Now Switch to ViewController.xib & add a tabBar into your view as illustrated below.

sugartin addtocart shopping animation uiview layer step 03

04. Modify the TabBar as per your need & also add a TableView into your design. Example image as follows.

sugartin addtocart shopping animation uiview layer step 04

05. Now for Creating a CustomCell for TableView, create a new Empty xib. ( Right click on project navigator, Add File & select type = User Interface ) as illustrated below.

sugartin addtocart shopping animation uiview layer step 05

06. Set the device family to iPhone.

sugartin addtocart shopping animation uiview layer step 06

07. Supply the Cell name ( here for example – CCell.xib )

sugartin addtocart shopping animation uiview layer step 07

08. Now, In that Empty xib, drag & drop UITableViewCell as illustrated below.

sugartin addtocart shopping animation uiview layer step 08

09. Design the CCell.xib as defined below. ( or may be based on needs, one can modify )

sugartin addtocart shopping animation uiview layer step 09

Here in Custom Cell.

Tag 1 = Title Label, Tag 2 = Price Label, Tag 3 = Image, Tag 4 = Button of Shopping Cart

10. Observe following 2 images.

sugartin addtocart shopping animation uiview layer step 10

sugartin addtocart shopping animation uiview layer step 11

1st Image indicates where object should be moved & 2nd Image indicates how image should be moved.

11. Now We are done with Visual part. Let’s look into some code part. Ensure your header file should have following items & make sure to import QuartzCore framework.

12. Synthesize the properties accordingly & place following code in viewDidLoad method.

13. Following is the code for creating customCell using the designed CCell.xib. Go through code & comments to understand it.

14. Following method will be triggered when user taps on Cart Button.

15. Above method will call following two functions. Go through the comments to understand the code.

Grab the sample code from here.

This entry was posted in iPhone Development by Sagar R. Kothari. Bookmark the permalink.

About Sagar R. Kothari

iOS Application Developer with 4 years of experience (iPhone/iPad/iPod App Developer) -- Contact me: * Skype: sag333ar@hotmail.com * Gmail: sag333ar@gmail.com * Facebook: https://www.facebook.com/sagar.r.kothari.srk -- About Me: * About me: http://about.me/sag333ar * Linkedin: http://in.linkedin.com/pub/sagar-kothari/47/590/65a/ * Key Skill Tags: iPhone, iPad, iPod, Objective-c, XCode, Instruments, Mac, OS X, iOS Simulator, Cocoa Touch Framework -- My online activities: * My Blog: http://sugartin.info * My Youtube channel: http://www.youtube.com/user/sag333ar * Contribution: https://github.com/sag333ar * My Code Snips: https://gist.github.com/sag333ar

Leave a Reply

Your email address will not be published. Required fields are marked *



*