Search code examples
iosobjective-cphonegap-builduitabbaruitabbaritem

Phonegap, phonegap build and tabbar


I have been working on a project in phonegap that requires an iOS tab bar at the bottom. I haven't been able to find a working plugin so with the little knowledge I have in objective C, I took this one and modified it so it works with what we need:

https://github.com/tblomseth/cordova-ios-tab-bar

(note that I didn't change anything with the tab bar function)

I am trying to add custom images to my tab bar, and I understand that I can apply said image with the 3rd parameter defined in the www/tab-bar.js file.

TabBar.prototype.createTabBarItem = function ( name, label, image, options ) {}

My problem is i don't know enough about how phonegap build compiles the application to know how to reference the image for the ios code to take over.

The code that takes the image and applies it to the tab is the following:

item = [[UITabBarItem alloc] initWithTitle:title image:[UIImage imageNamed:imageName] tag:tag];

as defined in src/ios/CDVTabBar.m of that repo, but my question is how do I reference the file name for the image? I've tried the following:

  • Full path
  • single file name
  • single file name with reference in config.xml file

None of the above methods have worked.


Solution

  • I was able to figure this out!

    I first thought that the image was moved into some kind of bundle that I needed to know the path to, however its not, it's placed in a file similar to a plist lookup.

    My file ended up being called www/img/icons/tabs/history.png when i was using:

    • /www/img/icons/tabs/history.png
    • history.png
    • /img/icons/tabs/history.png

    The way I was able to find what to call the file is as follows:

    1. Download the APK file from PhoneBapBuild on my Mac
    2. change the .apk extension to .zip
    3. unzip the file
    4. browse the package contents of the payload
    5. look at the file called CodeResources inside the _CodeSignature directory and found the filename.

    As soon as I put the string that matched the string in this file, the image showed up just as it should!