Easy to change status bar text color in Phonegap iOS App
For iOS App : Change Status Bar text color
Step 1 :-
Change View controller-based status bar appearance Setting in info.plist file.
if you want to change text color add NO.
else set Yes
UIViewControllerBasedStatusBarAppearance to YES
Step 2 :- Apply code in javascript and Objective c
Change Main view Controller back ground color and apply status bar style based on requirement .
Create .m & .h file for native plugin.
DemoStatusBar.h
#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>
#import <CORDOVA/CDVPlugin.h>
@interface DemoStatusBar : CDVPlugin
-(void)setStatusBarColor:(CDVInvokedUrlCommand*)command;
-(UIColor*)colorWithHexString:(NSString*)hex;
@end
DemoStatusBar.m
#import "DemoStatusBar.h"
#import "AppDelegate.h"
@implementation DemoStatusBar
-(CDVPlugin*) initWithWebView:(UIWebView*)theWebView
{
self = (StatusBar*)[super initWithWebView:theWebView];
return self;
}
// Status bar function handle color code value
- (void)setStatusBarColor:(CDVInvokedUrlCommand*)command
{
NSString *viewBgColor = [command.arguments objectAtIndex:0];
NSString *stausBarStyle= [command.arguments objectAtIndex:1];
if([stausBarStyle isEqualToString:@"white"])
{
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
}
else if([stausBarStyle isEqualToString:@"black"])
{
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault];
}
[(AppDelegate*)[[UIApplication sharedApplication] delegate] viewController].view.backgroundColor =[self colorWithHexString: viewBgColor];
}
// Genrate color based on color code.
-(UIColor*)colorWithHexString:(NSString*)hex
{
NSString *cString = [[hex stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];
// String should be 6 or 8 characters
if ([cString length] < 6) return [UIColor grayColor];
// strip 0X if it appears
if ([cString hasPrefix:@"0X"]) cString = [cString substringFromIndex:2];
if ([cString length] != 6) return [UIColor grayColor];
// Separate into r, g, b substrings
NSRange range;
range.location = 0;
range.length = 2;
NSString *rString = [cString substringWithRange:range];
range.location = 2;
NSString *gString = [cString substringWithRange:range];
range.location = 4;
NSString *bString = [cString substringWithRange:range];
// Scan values
unsigned int r, g, b;
[[NSScanner scannerWithString:rString] scanHexInt:&r];
[[NSScanner scannerWithString:gString] scanHexInt:&g];
[[NSScanner scannerWithString:bString] scanHexInt:&b];
return [UIColor colorWithRed:((float) r / 255.0f)
green:((float) g / 255.0f)
blue:((float) b / 255.0f)
alpha:1.0f];
}
@end
Add service reference of status bar class in config.xml file
<feature name="DemoStatusBar">
<param name="ios-package" value="demoStatusBar" />
</feature>
DemoStatusBar.js file : - add javascript file for handle cordova.exec function
function DemoStatusBar(){}
DemoStatusBar.prototype.setStatusBarColor = function(color) {
return cordova.exec(function(){},function(){},"StatusBarTest","setStatusBarColor",[barColor,setStausBarStyle]);
};
cordova.addConstructor(function(){
if (!window.plugins) {
window.plugins = {};
}
window.plugins.statusBar = new DemoStatusBar();
});
Use bellow code for calling event
window.plugins.statusBar.setStatusBarColor("#ff0000","white");
Output : show background color Red and set status bar style white
window.plugins.statusBar.setStatusBarColor("#ff0000","black");
Output : show background color Red and set status bar style black
