Permalink
Browse files

Merge pull request #658 from AndiDog/master

Tab / navigation bar plugins: Allow tab bar to be positioned on top
  • Loading branch information...
2 parents b2adead + 44014ab commit 6f17a8b427048b7a59dd225d6ceddcabaaabf39f @devgeeks devgeeks committed Jul 9, 2012
View
4 iOS/NavigationBar/NavigationBar.h
@@ -36,4 +36,8 @@
- (void)hideLeftButton:(NSArray*)arguments withDict:(NSDictionary*)options;
- (void)showRightButton:(NSArray*)arguments withDict:(NSDictionary*)options;
+@end
+
+@interface UITabBar (NavBarCompat)
+@property (nonatomic) bool tabBarAtBottom;
@end
View
4 iOS/NavigationBar/NavigationBar.js
@@ -21,6 +21,10 @@ NavigationBar.prototype.init = function()
Cordova.exec("NavigationBar.init");
};
+NavigationBar.prototype.resize = function() {
+ Cordova.exec("NavigationBar.resize");
+};
+
/**
* Assign either title or image to the left navigation bar button, and assign the tap callback
*/
View
38 iOS/NavigationBar/NavigationBar.m
@@ -58,6 +58,7 @@ -(void)correctWebViewBounds
const bool navBarShown = !navBar.hidden;
bool tabBarShown = false;
+ bool tabBarAtBottom = true;
UIView *parent = [navBar superview];
for(UIView *view in parent.subviews)
@@ -67,8 +68,16 @@ -(void)correctWebViewBounds
// Tab bar height is customizable
if(tabBarShown)
+ {
tabBarHeight = view.bounds.size.height;
+ // Since the navigation bar plugin plays together with the tab bar plugin, and the tab bar can as well
+ // be positioned at the top, here's some magic to find out where it's positioned:
+ tabBarAtBottom = true;
+ if([view respondsToSelector:@selector(tabBarAtBottom)])
+ tabBarAtBottom = [view tabBarAtBottom];
+ }
+
break;
}
@@ -100,11 +109,26 @@ -(void)correctWebViewBounds
top += navBarHeight;
if(tabBarShown)
- bottom -= tabBarHeight;
+ {
+ if(tabBarAtBottom)
+ bottom -= tabBarHeight;
+ else
+ top += tabBarHeight;
+ }
CGRect webViewBounds = CGRectMake(left, top, right - left, bottom - top);
[self.webView setFrame:webViewBounds];
+
+ // NOTE: Following part again for navigation bar plugin only
+
+ if(navBarShown)
+ {
+ if(tabBarAtBottom)
+ [navBar setFrame:CGRectMake(left, originalWebViewBounds.origin.y, right - left, navBarHeight)];
+ else
+ [navBar setFrame:CGRectMake(left, originalWebViewBounds.origin.y + tabBarHeight, right - left, navBarHeight)];
+ }
}
/*********************************************************************************/
@@ -291,7 +315,19 @@ -(void) hide:(NSMutableArray *)arguments withDict:(NSMutableDictionary *)options
[navBar setHidden:YES];
[self correctWebViewBounds];
}
+}
+/**
+ * Resize the navigation bar (this should be called on orientation change)
+ * This is important in playing together with the tab bar plugin, especially because the tab bar can be placed on top
+ * or at the bottom, so the navigation bar bounds also need to be changed.
+ *
+ * @param arguments unused
+ * @param options unused
+ */
+- (void)resize:(NSArray*)arguments withDict:(NSDictionary*)options
+{
+ [self correctWebViewBounds];
}
-(void) setTitle:(NSMutableArray *)arguments withDict:(NSMutableDictionary *)options
View
9 iOS/NavigationBar/README.md
@@ -20,6 +20,15 @@ Installing the plugin
- They have to be added to the project as well, so drag them from the "Plugins" folder (in Finder) to the same folder (in Xcode) and select to create references
- Open "Supporting Files/Cordova.plist" and under "Plugins", add a key with the plugin name "NavigationBar" and a string value of "NavigationBar" (I guess it's the plugin's main class name)
+Note regarding orientation changes and the tab bar plugin
+---------------------------------------------------------
+
+If the tab bar plugin is used together with this plugin and the tab bar is positioned on top (defaults to bottom), it's necessary to resize the navigation bar automatically:
+
+ window.addEventListener("resize", function() {
+ plugins.navigationBar.resize();
+ ), false);
+
Using the tab bar and navigation bar plugin together
----------------------------------------------------
View
3 iOS/TabBar/README.md
@@ -26,7 +26,7 @@ Note regarding the tab bar
Don't forget to add an event handler for orientation changes as follows:
window.addEventListener("resize", function() {
- plugins.tabBar.resizeTabBar();
+ plugins.tabBar.resize();
), false);
Using the tab bar and navigation bar plugin together
@@ -69,6 +69,7 @@ This example shows how to use the tab bar:
})
plugins.show()
+ // Or with custom style (defaults to 49px height, positioned at bottom): plugins.show({height: 80, position: 'top'})
plugins.showItems("contacts", "recents", "another")
window.addEventListener("resize", function() { plugins.tabBar.resize() }, false)
View
4 iOS/TabBar/TabBar.h
@@ -41,4 +41,8 @@
- (void)updateItem:(NSArray*)arguments withDict:(NSDictionary*)options;
- (void)selectItem:(NSArray*)arguments withDict:(NSDictionary*)options;
+@end
+
+@interface UITabBar (NavBarCompat)
+@property (nonatomic) bool tabBarAtBottom;
@end
View
33 iOS/TabBar/TabBar.m
@@ -12,6 +12,7 @@
API cleaned up and improved by Andreas Sommer (https://github.com/AndiDog/phonegap-plugins).
*/
+#import <objc/runtime.h>
#import "TabBar.h"
#import <UIKit/UINavigationBar.h>
#import <QuartzCore/QuartzCore.h>
@@ -97,18 +98,25 @@ -(void)correctWebViewBounds
top += navBarHeight;
if(tabBarShown)
- bottom -= tabBarHeight;
+ {
+ if(tabBarAtBottom)
+ bottom -= tabBarHeight;
+ else
+ top += tabBarHeight;
+ }
CGRect webViewBounds = CGRectMake(left, top, right - left, bottom - top);
[self.webView setFrame:webViewBounds];
- // NOTE: Following part again for tab bar pluginonly
+ // NOTE: Following part again for tab bar plugin only
if(tabBarShown)
{
- CGRect tabBarBounds = CGRectMake(left, bottom, right - left, tabBarHeight);
- [tabBar setFrame:tabBarBounds];
+ if(tabBarAtBottom)
+ [tabBar setFrame:CGRectMake(left, bottom, right - left, tabBarHeight)];
+ else
+ [tabBar setFrame:CGRectMake(left, originalWebViewBounds.origin.y, right - left, tabBarHeight)];
}
}
@@ -164,6 +172,8 @@ - (void)show:(NSArray*)arguments withDict:(NSDictionary*)options
tabBarAtBottom = [[options objectForKey:@"position"] isEqualToString:@"bottom"];
}
+ tabBar.tabBarAtBottom = tabBarAtBottom;
+
if(tabBarHeight == 0)
tabBarHeight = 49.0f;
@@ -344,3 +354,18 @@ - (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
}
@end
+
+
+@implementation UIView (NavBarCompat)
+
+- (void)setTabBarAtBottom:(bool)tabBarAtBottom
+{
+ objc_setAssociatedObject(self, @"NavBarCompat_tabBarAtBottom", [NSNumber numberWithBool:tabBarAtBottom], OBJC_ASSOCIATION_COPY);
+}
+
+- (bool)tabBarAtBottom
+{
+ return [(objc_getAssociatedObject(self, @"NavBarCompat_tabBarAtBottom")) boolValue];
+}
+
+@end

0 comments on commit 6f17a8b

Please sign in to comment.