iPhone Interface Builder - Moved resources to sub-directory, now IB can't see them!

Question

I had a bunch of images in my Xcode project. They were originally added without choosing "Create Folder References for any added folders". So I removed the references and re-added as per these instructions Include a resource directory hierarchy into app bundle

Unfortunately, Interface Builder will not display any of the images inside that directory. On the project tree the directory comes up with a blue icon and all the files are there!

The file names show in the IB Inspector (i.e. under the 'Image' property), but I get missing image icons for everything located in that directory.

Any ideas how to get the images showing again?

Answer 1

Problem solved! Turns out that blue folder references are fine, but IB will not read them! For anyone else who cares to know, if you have the following:

/iphone-project-dir/images/pic.png

Once you've added them in a blue folder in Xcode (as detailed in link above), you can refer to them in IB as follows:

images/pic.png

In the XIB's XML it will look something like this

<string key="NSResourceName">images/pic.png</string>

Simple! The only drawback is Interface Builder's WYSIWYG preview does not process these paths!

I found the answer here http://www.iphonedevsdk.com/forum/iphone-sdk-development/6457-xcode-folder-directories.html

Answer 2

If you like to have your images structured in your SCM and under XCode but really doesn't mind that all images will be placed in one directory once building the final .ipa package, here is what you need to do:

• Create a directory called e.g. "Images" in your root folder
• Place all your images into this folder
• Add a new group from within XCode and call this "Images" too
• Right-click this group and choose "Add Files to ..."
• Select all your files and uncheck "Copy items into destination group's folder" because they are already in there
• Make sure to select your right targets

From Interface Builder you are now able to pick your images without prefixing it with the folder name and you will see a preview of your images within Interface Builder.

Gives me both my IB preview and a neat folder structure when designing my app.

Answer 3

1. Copy Images folder to your project folder.
2. Add this folder to project. In "Choose options for adding these files" dialog, you must check "Create groups".
3. "Copy items if needed" you can leave checked.
4. Make sure to select your right targets Finish