This plugin lets you create and control a native tab bar.
Parts that are not marked otherwise are licensed under the MIT license.
PhoneGap itself (parts of it included in this repository as test project dependency) is licensed under the Apache License.
See TabBar.m for the history.
Choose the right folder according to your Cordova version:
- 2.0.0 (not developed anymore) for Cordova 2.0.0
- 2.1.0 (not developed anymore), tested with Cordova 2.1.0 and 2.2.0
- 2.4.0, tested with Cordova 2.4.0 but should also work older versions (2.1.0 and newer)
- Drag *.m and *.h files to your project's "Plugins" group in Xcode and choose to copy the files to the project
- Open "config.xml" and under "plugins", add a key with the plugin name "TabBar" and a string value of "TabBar"
Don't forget to add an event handler for orientation changes as follows:
window.addEventListener("resize", function() {
var tabBar = cordova.require("cordova/plugin/iOSTabBar")
tabBar.resize()
), false)
In order to use the tab bar plugin and navigation bar plugin together, you must initialize both plugins before calling any of their methods, i.e. before creating a navigation/tab bar. For example right when your application starts:
document.addEventListener("deviceready", function() {
console.log("Cordova ready")
var tabBar = cordova.require("cordova/plugin/iOSTabBar")
var navBar = cordova.require("cordova/plugin/iOSNavigationBar")
navBar.init()
tabBar.init()
navBar.create()
tabBar.create()
// ...
This is because both plugins are aware of each other and resize Cordova's web view accordingly, but therefore they have to know the web view's initial dimensions. If for example you only initialize the tab bar plugin, create the tab bar and later decide to also create a navigation bar, the navigation bar plugin would think the original web view size is 320x411 instead of 320x460 (on iPhone). Layouting could be done using the screen size as well but it's currently implemented like this.
This example shows how to use the tab bar:
document.addEventListener("deviceready", function() {
console.log("PhoneGap ready")
var tabBar = cordova.require("cordova/plugin/iOSTabBar")
tabBar.init()
tabBar.create()
// or with an orange tint:
tabBar.create({selectedImageTintColorRgba: "255,40,0,255"})
tabBar.createItem("contacts", "Unused, iOS replaces this text by Contacts", "tabButton:Contacts")
tabBar.createItem("recents", "Unused, iOS replaces this text by Recents", "tabButton:Recents")
// Example with selection callback
tabBar.createItem("another", "Some text", "/www/your-own-image.png", {
onSelect: function() {
alert("another tab selected")
}
})
tabBar.show()
// Or with custom style (defaults to 49px height, positioned at bottom): tabBar.show({height: 80, position: "top"})
tabBar.showItems("contacts", "recents", "another")
window.addEventListener("resize", function() { tabBar.resize() }, false)
}, false)
You can also have different images for the normal and retina quality like "image.png" and "[email protected]". The code to assign the image would be:
tabBar.createItem("home", "Home", "image.png", {
onSelect: function() {
alert("tab selected")
}
})
Layouting problems still to be solved.
Please report problems on the GitHub repository.