April 22, 2011
A Visual Guide to Manually Adding Three20 to your Xcode 4 Project
By Chepri Staff

Three20 to Xcode

Three20 is a modular open source Objective-C library used by numerous applications in the App Store, including well-known brands such as Facebook, Meetup.com, Pulse, etc. It provides developers with powerful view controllers built on top of the existing iOS framework.

A comprehensive set of  instructions on how to add Three20 to your project both manually and automatically for Xcode 3 can be found on their website. Along with that there is also a nice little transition guide for Xcode 4 users on the automatic method of adding Three20 to your project. As a developer that has just recently transitioned from Xcode 3 to Xcode 4, manually adding Three20 and figuring out where exactly you can add dependency targets and link libraries was a bit of a hunting game. So here is a little visual guide based on the original instructions provided by Three20:

1) Get the code

Clone the three20 git repository: git clone git://github.com/facebook/three20.git

2) Locate the “Three20.xcodeproj” file under “three20/src/Three20/”. Drag Three20.xcodeproj and drop it onto the root of your Xcode project’s “Groups and Files” sidebar. If a dialog appears — make sure “Copy items” is unchecked and “Reference Type” is “Relative to Project” before clicking “Add”. Open the Three20 Xcode Project that you just added to your app and expand the “Dependencies” group. Select all of the projects listed there and drag them to your app as well. You should now have the following list of Three20 projects added to your app:

  • Three20Core
  • Three20Network
  • Three20Style
  • Three20UICommon
  • Three20UINavigator
  • Three20UI
  • Three20

three20 to Xcode screen

4) Link the Three20 static libraries to your project. To do this, select your project on the sidebar and then select your target on the detail view that shows up in the editor pane. Select the “Build Phase” tab and you will see an option for “Link Binary With Libraries”. Click on “+” and you will see a number of items, such as libThree20.a and libThree20Core.a under the Workspace folder. Select each of the lib files (not the UnitTests) and add. This will link each part of the Three20 framework to your app.

three20 xcode

5) Add Three20 as a dependency of your project, so Xcode compiles it whenever you compile your project. This can be accomplished at the “Build Phase” tab as well. There will be a similar option to add Target Dependencies. As we did before, just click on “+”, select “Three20” and each of the other libs and add it to the project. You do need to add the UnitTests target for each lib.

three20 xcode screen 2

6) While we are at the “Build Phase” tab, Add the Core Animation framework to your project. This can be found under “Link Binary With Libraries”. Locate QuartzCore.framework and add it to the project.

7) Add the bundle of images and strings to your app. Locate “Three20.bundle” under “three20/src” and drag and drop it into your project. A dialog will appear — make sure “Create Folder References” is selected, “Copy items” is unchecked, and “Reference Type” is “Relative to Project” before clicking “Add”.

8 ) Finally, tell your project where to find the Three20 headers. Open the “Build Settings” tab that is located next to the “Build Phase” tab and look for “Header Search Paths” and double-click it. Add the relative path from your project’s directory to the “three20/Build/Products/three20” directory.

xcode screenshot

9) While you are in Build Settings, go to “Other Linker Flags” under the “Linker” section, and add “-ObjC” to the list of flags. WARNING: Make sure that you do this for all configuration settings, not just the active one.

10) You’re ready to go. Just #import “Three20/Three20.h” anywhere you want to use Three20 classes in your project. It’s recommended that you do so in a precompiled header for faster build times.

** Additional Tips/Steps by Ron Cirka **

Make sure to add both “-ObjC” AND “-all_load” to the linker flags.

The configuration name should be one word, eg. “adhoc” NOT “ad hoc”. You can try adding quotes in the path if you want to use a multiple word configuration name, but that may not always work. Otherwise you’ll get the dreaded – import “Three20/Three20.h” no such file or directory – when trying to archive.

19 Comments

  1. Alon Ezer

    Thanks alot. I couldn’t find any other tutorials for the sdk 4 and three20.

    The only problem is when I want to #import “Three20/Three20.h” it tells me that there is no such file or directory.

    What Is the problem?

    Thanks again!

    Reply
    • Calvin Glenn

      I am also having the same problem.

      Reply
  2. Calvin Glenn

    OMG! Thank you so much. I’ve spent the last few hours banging my head against the wall on this. They should add your tutorial in as a part of the main site — it’s so good!

    Reply
  3. Ron Cirka

    Great article, helped me a lot!

    A few things to add…
    Make sure to add both “-ObjC” AND “-all_load” to the linker flags.

    The configuration name should be one word, eg. “adhoc” NOT “ad hoc”. You can try adding quotes in the path if you want to use a multiple word configuration name, but that may not always work. Otherwise you’ll get the dreaded – import “Three20/Three20.h” no such file or directory – when trying to archive.

    Reply
    • Subathra Thanabalan

      Thank you for that Ron! I will be appending your additions to the article if you don’t mind.

      Subathra

      Reply
  4. Andy Khatter

    ” Command /Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin/gcc-4.2 failed with exit code 1 ”

    after going through all the steps this above is the error i recieve any suggestions??

    Reply
  5. rofler

    Where can i add the configuration name?

    Thx

    Reply
  6. RV

    Thanks!!

    Never seen such a weird folder structure. Your tutorial helped!

    Reply
  7. Billi Alan

    THanks for this tutorial, everything seems to works fine, except that if I make this in one of my classes #import “TTURLRequestModel.h” , the compiler tells me that the file is not found…

    Can anyone help me out ?

    Reply
  8. Billi Alan

    I also still have the lib Files in red on the left bar

    Reply
  9. Nolan Ratu

    This is the only error i am getting, any ideas thanks…

    ld: warning: building for MacOSX, but linking against dylib built for iOS: /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.0.sdk/System/Library/Frameworks//CoreGraphics.framework/CoreGraphics

    Reply
  10. Claudio

    I’m using XCode 4.2. I followed all steps and I keep having this problem. Realise that I wasn’t having this problem before I add Three20:

    ld: duplicate symbol _DEFAULT_CLICK_ACTION in /Users/A38315/Documents/ObjectiveC/infotrends/etalks/FlurryLib/libFlurryAppCircle.a(FlurryAdView.o) and /Users/A38315/Documents/ObjectiveC/infotrends/etalks/FlurryLib/libFlurry.a(FlurryAdView.o) for architecture i386

    I know it means that this symbol is in both files, but even if I remove both, other files keep getting this same problem.

    What should I do?

    Reply
  11. Alicia

    In the image browsing, the title shows X of X example 1 of 4. Would like to know where is this code come from as I need to change the title message.

    Thanks and highly appreciate for help

    Reply
  12. David

    Awesome! Thanks for the help! I initially got the dreaded import issue but then realized my three20 directory was in the same path as the main project. I removed the “..” from the path and it worked great!

    Reply
  13. Eros

    Everything said before worked but i keep getting this error when i try to build the app :
    duplicate symbol _TTNetworkRequestStarted in …
    Thanks in advance for any help

    Reply
  14. Priyatham

    Hi Thanks for your help.

    but i am getting an error.

    error: /Users/priyathamanisetty/IphoneDevp/demo22/../../Library/Developer/Xcode/DerivedData/demo22-gwxxkcqcyimjxucfwwscnhmxrast/Build/Products/Debug-iphoneos/libThree20.a: No such file or directory

    Reply
  15. XcoderTeam

    Wishing Three20 Provide any documentation how to used each of the features.
    I spent almost 2 days to find how to start using this plugin it’s totally out of luck.

    Reply
  16. name

    It’s impossible to import . The reason is that there isn’t a single header directory to import.

    Reply
  17. anilkumar

    nice tutorial and clear explanation!! great work Mr.Ben Snider and all the best for your future posts!

    Reply

Submit a Comment

Your email address will not be published.

Trusted by top brands.

Get Started with DineEngine.

Contact Us Now Find Out How Chepri Can Help Your Team. Ask Us More About A Visual Guide to Manually Adding Three20 to your Xcode 4 Project.

(800) 338-8102

733-C Lakeview Plaza Blvd. Worthington, OH 43085.