April 7
iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project
A quick tutorial for adding the coverflow effect to your project, it’s a really useful/cool effect for any kind of app. (In fact you’ll be able to add lots of cool UI from the Tapku library, but i’m just focusing on the Coverflow effect for this tutorial).
At the end of this tutorial you’ll end up with something like this
Were going to be using the excellent free library Tapku by Devin Ross. So to being lets download the library:
https://github.com/devinross/tapkulibrary
Now lets create a new iPhone project
Here i’ve called the project ‘Coverflow’ for this example
I generally like to copy the Tapku library into my project, so open your project using Finder and copy the ‘src’ folder into your project folder. In this example I also create a folder called ‘Tapku’ and paste in the ‘src’ folder here.
Locate the ‘TapkuLibrary.xcodeproj’ file under ‘src’. Drag TapkuLibrary.xcodeproj and drop it onto the project navigator ‘Frameworks’ group.
It should look like this when your done (forget the extra frameworks – will add them in a bit)
Next we need to add the bundle file, which contains the bundle of images and strings to your app. Locate ‘TapkuLibrary.bundle’ under ‘TapkuLibrary’ and drag and drop it into your project, specifically the Supporting Files group.
A dialog will appear — make sure “Create Folder References” is selected, ‘Copy items’ is unchecked before clicking ‘Finish’.
Now you need to add the Core Animation & MapKit frameworks to your project. Select the project file in the project navigator, then select the target in the targets list. Select the Build Phases tab at the top, then expand the Link Binary With Libraries box. Click the ‘+’ button and add the QuartzCore.framework and MapKit.framework frameworks to the project.
Here we also need to add the Tapku library to the Target Dependencies. So expand ‘Target Dependencies’ and add the TapkuLibrary from the Tapku Xcode project.
Now we also need also need to add the libTapkuLibrary.a to the ‘Link Binary With Libraries’ section in the targets Build Phases. Add the ‘libTapkuLibrary.a’ by clicking the + button. Your targets Build phases should look like this afterwards:
Next, we need to tell your project where to find the TapkuLibrary headers. Select the target, then Build Settings. Search for ‘Header Search Paths’ and double-click it to add the path to the Tapku lib. So add ‘$(SRCROOT)/Coverflow/Tapku/src’ and click ‘Done’.
N.B – Make sure the path is correct based on your project name, so replace ‘Coverflow’ in the path above with your project name.
Finally we need to add some flags to the ‘Other Linker Flags’ under the ‘Linker’ section, add ‘-ObjC’ and ‘-all_load’ to the list of flags and click ‘Done’.
Since Tapku uses TouchJSON libraries also, we need to add these. Locate the TouchJSON folder in the ‘src/Frameworks/’ Tapku folder, and drag and drop the ‘TouchJSON’ folder onto your Frameworks group. A dialog like below appears, ensure the copy items checkbox is selected if your copying the folder from outside your project folder.
So your project should look something like this at the end of all of that.
Ok now for the fun coding part!!
In the CoverflowViewController.h header file, lets import the Tapku library and add a coverflow view. It should look as follows:
Then in the implementation file setup the cover images in an array(here i’ll be using an image i added to the project) and setup the TKCoverflowView object as follows:
Remember you’ll need to implement the datasource and view delegate methods to get it working. I also set the orientation to landscape for this demo, so the end result looks like this:
You can download the finished project here.
Enjoy :)
May I ask that the project only run in Xcode 4 and IOS 4.3 ? because I am using Xcode3 and ios4.2.
Ricky, It should work fine i think, i’ve upgraded all my machines to Xcode4 so i can’t check. It takes a little getting used to but the IDE is going in the right direction!
Jeff
Hi Jeff
thanks for reply, I got it . as I forgot the put the imageView into my PAGE before, Now it works great.
But I am new for using Xcode. May I ask a question… Each image in coverfloew can be accessible ? Because I can not make connection in the interface builder for each image. Thanks
Ricky, Yeah you should be able to access the image, have a look at the parent class or perhaps think about subclassing TKCoverflowCoverView.
[...] POSTED BY JEFF . 原文链接地址为：http://www.applausible.com/blog/?p=657 [...]
Hi Jeff,
I followed your instructions, but when I open the Target Dependecies add dialog, the Tapku library is not listed.
Do you have any suggestions? It’s driving me mad…
Hmmm, sounds like you did not add the project correctly. Ensure the ‘TapkuLibrary.xcodeproj’ file under ‘src’, is added by dragging the TapkuLibrary.xcodeproj file onto the project navigator ‘Frameworks’ group.
Perhaps things have changed since i wrote this tutorial with the Tapku framework, so check their doc too.
If your still struggling perhaps pop the project on github and i can grab a version of it.
Restarting XCode 4 was all it needed. Before I had a useless item .xcodeproj. Now it’s an expanding item and I can add the file in the Target Dependencies.
Is there a way to add label text layer while you scroll through the coverflow?
Rich, yes you just subclass TKCoverflowView and add your own label, passing whatever text/data you want to display to the object(just like a UITableViewCell).
how can i add specific titles in all cover flows.please reply soon
THNKS
Hello,
I successfully added this to my project. Thank you, but I was wondering is there any way to have this cover flow in the portrait position?
Hi Xavier, yeah i guess just modify the
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
and your info.plist for orientations should do it! Plus you may have to do some frame resizing if this coverflow is being created in code. Hope that helps!
Jeff
Thank you Jeff, I have it working to my liking for the most part. The only problem I am having now is that it is repeating only the first 4 photos that are in my .m files when I have 6 of them in there. Any idea where this can be fixed?
I cannot connect the images from
UIImage….applausible.png….nil]
to an IBAction to call an action to the images… if you have any tips how this should be done please reply asap. Thank you in advance.
How can i add UILabel and click event in the coverflow…
i need another effect,but i don’t how to change the framework..
I would probably subclass the TKCoverflowView class and have my customisation code in the init method. Just like creating your own custom UITableViewCells by subcassing them.
Hi am not able to show dynamic load images and then shown in cover is we have done in table view
[...] TapkuLibrary link : https://github.com/devinross/tapkulibrary Tutorial : http://www.applausible.com/blog/?p=657 [...]
am not able to add lazy loading on coverflow is there any way to do that ?
I have implement CoverFlow library correctly in my app but not able to add lazy loading in them tried many things but not work..!!!
flash games, xpto games, games, web browser games, car games…
[...]iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project | Applausible Blog[...]…
Hi, I am not able to add “libTapkuLibrary.a”,
The list not showing the thing like “libTapkuLibrary.a”
Can you please suggest anything for this problem?
I added it succefully!! But still facing problems. Will try once again.
i cant find the TouchJSON library?
Hi,
It works perfectly when I create a new project like the instructions said. However, Xcode cannot find “#import ” when I add the library into my own prject. Thus I wonder whether there are some extra steps to add it into my project or I need to make some modifications somewhere.
Thanks
Xocde cannot find “”, sorry for the missing part
Tapkulibrary/Tapkulibrary.h, I don’t know it is missing
Great tutorial and library :)
I’m having trouble though… I’m using XCode 4.2.1 in Lion and when I use the iPhone or iPad 5.0 Simulator, I do fine, it’s when I use the iPhone or iPad 4.3 simulator when my app crashes…
The following is the error message that I receive..
dyld: lazy symbol binding failed: Symbol not found: _objc_storeStrong
Referenced from: /Users/PopeAbella/Library/Application Support/iPhone Simulator/4.3.2/Applications/EDA59F28-5597-4BD3-9A79-07C9EC773F01/myApp.app/myApp
Expected in: /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.3.sdk/System/Library/Frameworks/Foundation.framework/Foundation
dyld: Symbol not found: _objc_storeStrong
Referenced from: /Users/PopeAbella/Library/Application Support/iPhone Simulator/4.3.2/Applications/EDA59F28-5597-4BD3-9A79-07C9EC773F01/myApp.app/myApp
Expected in: /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.3.sdk/System/Library/Frameworks/Foundation.framework/Foundation
and Xcode stops here in TKCoverFlowView.m
- (id) initWithFrame:(CGRect)frame
{
if(!(self=[super initWithFrame:frame]))
{
return nil;
}
[self load];
currentSize = frame.size;
return self;
}
Thank you very much and more power to you.
I’m assuming the TKCoverFlowView isn’t getting created for whatever reason, possibly memory related. Your implementation of the initWithFrame method is very negative too, so perhaps think about re-writing it so it does not return a nil object, so you don’t have to do further checks if its nil or not. Something like:
- (id) initWithFrame:(CGRect)frame
{
if( (self=[super initWithFrame:frame]) )
{
[self load];
currentSize = frame.size;
}
return self;
}
I’ve not used the Tapku library for a long time now, so things may have changed in it.
Hope that helps!
Thanks, I’ll look at it at that angle, but some also say it has something to do with ARC (Automatic Reference Counting).
Oh no, I haven’t done anything to the code :) That would still be the TKCoverFlowView from Github.
hi,
i’ve followed your tutorial but somehow it won’t work.
everytime i try to import it in a .h it says file not found.
tried differed ios versions or project types, none worked. everything seems to be the same if i compare my screen with your screenshots tho.
Thank you! I was seeing a blank screen until I came across your tutorial and noticed the additional setNumberOfCovers method call. I suppose its a bit strange to have to set this instead of getting this pulled from the data delegate like iOS does for tables but whatever, it works now :)
Can anyone tell me that wheather i can use tapku library in cocos2d or not ?
If not then please tell me the right ways to to this thing in cocos2d…
Maroc…
[...]iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project | Applausible Blog[...]…
I have successfully integrated coverflow into another project. However I would like to populate the images in the coverflow from a plist in which the images are strings in dictionaries. This is because I have made it so when an image in the flow is double tapped another view is pushed onto the screen and it contains elements (image, text, button) which will also be strings in the plist dictionaries. Any suggestions on how to do this?
Just great tutorial except that is not working. there is no way to import TapkuLibrary.h
I tryed to use finished project available on download but I have same problem:
in CoverflowViewController.h at the line 10 i have
#import
this return an error ‘TapkuLibrary/TapkuLibrary.h’ file not found.
Anyone solved this?
I tried to use the above project with lion os and xcode 4.3.1
When i tried to write #import in .h file of one of the viewcontrollers am unable to find the ‘TapkuLibrary/TapkuLibrary.h’
please can any one help me out…
i have tried to do add the #import and don’t find the file like the user above, i have xcode 4.2.1, anyone can help me?…i have follow the guide step by step and i have repeat it a lot of time, but nothing, don’t work…help
To all with “TapkuLibrary/TapkuLibrary.h – file not found” problem, there is possible solution:
I found a problem in my projekt with path in “Header Search Paths”. First I used a relative representation of path(e.g. ./NameOfApp/Tapku/src), second, if your project has name consists of two or more words devided with space, in path you have to use mark “\” to representation of space(e.g. ./Name\ of\ App/Tapku/src)
Good Luck
Hi, i have a problem. i have in the last step to finish the app but when i try to make the code it said #import TapkuLibrary not found. i dunno what i have to do.. can you help me? please. thanks
Thanks alot :)
karpet permadani…
[...]iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project | Applausible Blog[...]…
I was reading your article, iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project | Applausible Blog and really enjoyed it. You must have spent a lot of effort writing such good content. I have always enjoyed writing and recently, I created a software focusing on answering the question of How to write a blog. It would be helpful to me if you could visit my site and give me some feedback. Your comments would be greatly appreciated. Thank you so much.
So does Apple recognize Tapku Library and let you use it in Apps published through the Apple store?
Just curious
Please let me know if you’re looking for a article author for your weblog. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some content for your blog in exchange for a link back to mine. Please send me an email if interested. Kudos!
An attention-grabbing dialogue is value comment. I think that you must write extra on this subject, it may not be a taboo topic however usually individuals are not enough to talk on such topics. To the next. Cheers
This is an awesome tutorial. When I downloaded the package, I found there are two .xib files in folder: mainWindow and Coverflow. But I cannot find that in tutorial. Can you explain what the mainWindow is used for and how to connect it to header file. Thank you.
Thanks for the tutorial and this wonderful function. I used it in a app that is now up on the app store and it works great. I am now trying to modify it to work on an app that is for the iPad. I have changed the size of the display and the size of the images as well as the spacing. However I am having problems on having the images stop. When I stop flipping through the images on an image it automatically flips forward two images to the right before it stops. so there is no way to have it stop on the first and second images. How can I change this.
Here is what I have changed in the code so far.
TKCoverflowView.m
coverSize = CGSizeMake(224, 224);
spaceFromCurrent = coverSize.width/1;//changed from 2.4 to 1
[self setupTransforms];
in my flipView
coverflow = [[TKCoverflowView alloc] initWithFrame:CGRectMake(0, -200, 768, 1024)];
//made viewable space bigger and offset up to center images.
if(cover == nil){
// Change the covers size here
cover = [[TKCoverflowCoverView alloc] initWithFrame:CGRectMake(0, 0, 560, 420)]; // 224
cover.baseline =200;
//to make the images themselves larger.
if I have screwed something up please let me know, otherwise could you help me get this to work so it will stay stopped on the image I stop on.
Thanks
Thanks for the amazing tutorial!!! I’d like to know if you could make a tutorial adding the Agenda from this framework, I’m trying to figure it out by making a iphone project using xcode 4.5 and iPhone 6.0 simulator, storyboards…
thanks in advance
Juan
It is showing an error :-
Undefined symbols for architecture armv7s:
“_OBJC_CLASS_$_TKCoverflowView”, referenced from:
objc-class-ref in CoverflowViewController.o
“_OBJC_CLASS_$_TKCoverflowCoverView”, referenced from:
objc-class-ref in CoverflowViewController.o
ld: symbol(s) not found for architecture armv7s
How to solve this ?????