I am using a navigation bar with a custom background image. When I wanted to add a custom shadow image, I was surprised to find that even the default shadow image is not visible.
iOS 6 introduced an automatic drop shadow on UINavigationBars, which I expected to see. The example project from http://www.raywenderlich.com/21703/user-interface-customization-in-ios-6 demonstrates this.
However, creating a new project from Xcode’s Master-Detail template does not show the shadow.
When exactly is the shadow shown, and when is it not?
IOS 6 automatic drop shadow is shown by default. If you want to disable/hide this shadow you can try this:
[[UINavigationBar appearance]setShadowImage:[[UIImage alloc] init]];
What I have noticed is that, if I copy/paste a viewController from one project to a new one, the UINavigationBar shadow (sometimes) it's not shown. Replacing the copied viewController with a new one solves the problem... (maybe your case)
I had the same problem on a project upgraded from iOS5, but only on navigation controllers inserted in the pre-iOS6 Xcode versions. Removing them and replacing them with new ones in the most recent version of Xcode (4.6) fixed the problem.
The workaround, which I found half a year later, is actually embarrassingly simple:
self.navigationController.navigationBar.clipsToBounds = NO;
This said, I still believe this is a bug with how Xcode 4.4/4.5 configures navigation bars in storyboards. But at least now we know how to work around it. Cheers!
In addition to Yang's answer, you can create a category to have a global fix like this
#interface UINavigationBar (JTDropShadowFix)
#end
#implementation UINavigationBar (JTDropShadowFix)
- (void)awakeFromNib {
self.clipsToBounds = NO;
}
#end
If you're looking for a solution without hacking around with the category methods, you can also get to a blog post that talks about how to use a UINavigationController subclass to achieve the same fix.
http://ioscodesnippet.com/post/61487770156/custom-shadow-image-on-navigation-bar-ios6-fix
to add some context: i just took my 1-year-old app Cocktailicious and embedded the root UINavigationView in a UITabBarController. after that the old UINavigationBar had the property Clip Subviews checked in interface builder.
in the embedding process i also added a second navigation controller for a new tab in the tab bar. surprisingly, this controller came with Clip Subviews unchecked. feels like an xcode issue.
Related
After the PR https://github.com/codenameone/CodenameOne/pull/3233, I get the popupDialogs as I want them (on Android). They are ok, the text is correctly in the centre, margin and padding are as I want them.
But I have an issue with iOS. Sometimes, when the popup Dialog contains very few text, iOS calculates wrong Dimension for the Dialog. It happens only on iOS.
What I understood is that the implementation of Dialog popups on iOS is native, while on Android it's lightweight. Please correct me if I have misunderstood. Since the Android implementation works well, I would like to use it on iOS as well. That's the meaning of this RFE of mine:
https://github.com/codenameone/CodenameOne/issues/3234
Anyway, I change my question: even without that RFE, can I use Lightweight Popup Dialogs also on iOS?
Yes but it might be a bit tricky. If you use CSS setting the popup border becomes a huge pain because of this issue.
So you'll need to either use the designer tool and define PopupDialog to explicitly use the RoundRectBorder or you'll need to do it from code (explicitly setting this into the theme).
A hack that might work (didn't try this) is using this code in your init(Object) instead of initFirstTheme:
try {
theme = Resources.openLayered(resourceFile);
themeProps.put("PopupDialog.derive", "Dialog");
themeProps.put("PopupDialog.border", RoundRectBorder.create().
cornerRadius(2f).
shadowOpacity(60).shadowSpread(3.0f));
themeProps.put("PopupDialog.transparency", "255");
themeProps.put("PopupDialog.bgColor", background);
themeProps.put("PopupDialog.padding", "4,4,4,4");
themeProps.put("PopupDialog.padUnit", new byte[]{Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS});
UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));
Resources.setGlobalResources(theme);
} catch(IOException e){
Log.e(e);
}
I am 2 days in experimenting with Codename One and Mobile development in general and tested out some basic navigation and features so far. Now I want to work on the look and feel of the app.
I looked at the 9-border vid which was helpful, but not sure of the best way to add an image for the touchCommand that takes 3 tabs on that bar ( Example: home, profile, settings.. Similar to how instagram's TouchCommand is at the bottom of the app).
If I add the image, it does not line up with my Commands.
What is the best way to approach this to ensure the "TouchCommand" image appears as one, but is broken up to 3 parts for each individual commands when pressed, home, profile and settings? I might be asking this all wrong, forgive me as this is all new to me.
Thanks.
EDIT:
This is what was done.
In Theme -> Constants added commandBehavior= bar . This gives the default bar at the bottom. Created in photoshop a new bar 300x80 and added it to the TouchCommand. (See ScreenShot 1). Took this bar and broke it up in photoshop into 3 different buttons for the tab press etc. In GUI Builder, added Home, Profile, Settings in the commands. Added the image to Press Icon for Home and it didnt line up (screenshot 2). Very Frustrating to design layouts. I am hoping there is a much better technique as I am still experimenting with Codename one?
What is unclear to me, is I cant find any documentation on how to approach this and what the dimensions of each image should be as it seems that codename one has issue aligning them. I am assuming the steps would be to create the background image and add the icons as interactive layers for the user. I really care for the image being pressed and changes color like the instagram example. I dont see a way to do this in codename one GUI builder and themes.
EDIT:
Okay, I have decided to use tabs instead of the bar at the bottom. If I add my image to it, I get the results (screeshot 3). Is this the right method to use to accompolish what I want? If so, I dont see a way yet to alter this to become what I want :( .
Plus adding the background, shows one size in the display and looks different in the simulator. (screeshot4)
Answered Here: How do you get ActionBar from SocialBoo theme to show up in your GUI?
Tabs are customized individually so the border should apply for an individual tab to create the background. The foreground element is the icon which you define in the Tabs component itself thru the icons property which allows you to define 3 icons for the 3 tabs (assuming you use the GUI builder). If you add the tabs via addTab in the code you can specify an icon there.
I've seen a couple posts about the UIImage automatically loading the filename-568.png image in the new iOS6, but I can't seem to recreate it in the UIImageView class.
I'm using the Storyboard (not my app, just having to do some checks), and I've a simple layout with just the Image View scaled to fit, no code in the view controller, and I've sure the filename.png and filename-568h.png exist (as well as -568#2x.png just in case) but when I load it up in the iOS6 simulator. This has been for iOS 4 and 5, loading the #2x image for retina, doesn't seem to work in iOS6 though. Any ideas?
The image happens to be called Default.png since it is the same as the launch image, could this be the issue?
Thanks for any help in advance
iOS6 does NOT automatically load -568h as it does with the #2x images. The only exception is the default screen, but further than that you have to manually set you 568h image yourself.
I created some code to mimic the loading behavior for -568h images when using the [UIImage imageNamed:#""] method, but from the IB I do not know the way. If you are interested in such a solution, check it out at http://angelolloqui.com/blog/20-iPhone5-568h-image-loading
Typically, you should only use 568h for the launch image. If you notice yourself using different image assets within your app for the new display height, you should consider that you might be making your UI too static.
The most obvious place people want to use 568h for images is for background images. An alternative is to just have one asset that has the largest possible dimensions and align it properly using the contentMode property of UIView.
But perhaps you have something floating in the image at the top and the bottom, so contentMode doesn't solve it. You could consider that the top and bottom floaters should probably be separate views anyway.
Remember, we have always been making apps with variable heights. Every time a keyboard pops up, its as if the size of the screen has shrunk.
I've been trying to get a section of my TabBarController to go fullscreen for a while but still can't figure out this 1 last piece.
So I'm able to put the UIViewController behind UINavigationBar using the code below.
self.navigationController.navigationBar.translucent = YES;
self.wantsFullScreenLayout = YES;
Also able to hide the UINavigationBar & TabBarController using the code below.
[self.navigationController setNavigationBarHidden:YES animated:NO];
[self.tabBarController.tabBar setHidden:YES];
However, my UIViewController's height still wouldn't extend behind where the TabBarController is before I hide it. So it looks as though there is a blank space below.
Image attached.
I tried changing self.tabBarController.view.frame and bound. Still doesn't do it. Seems like something is preventing it to cover that bottom portion.
How can I achieve that?
Thank you,
Tee
UITabBarController is not designed to allow its subview to go "behind" the tab bar, probably because a tab bar cannot be translucent. And although [self.tabBarController.tabBar setHidden:YES] does hide the tab bar, it doesn't tell the UITabBarController to lay out your view in the space that is normally occupied by the tab bar. In fact, there is no really supported way to do this.
OTOH, it is easy enough to reposition the tab bar manually if you are willing to risk things breaking in a future version of iOS. The UITabBarController's view has two subviews: one is the tab bar, and the other is the content view (which contains the view from the currently active view controller). Just resize the content view to occupy the space; you could even animate the tab bar moving off the bottom of the screen if you'd like.
Ive been googling this alot but can't find any working solution. Im using Shell Integration Library to cerate custom Window Chrome and I also need drop shadows for this window. Some say setting GlassFrameThickness to -1 do the trick but its not working for me. And Jeremiah Morrill suggested using DwmExtendFrameIntoClientArea. Ive tried that and it works, sort of. The shadows looks ok but when the window is shown it is first shown as a glass-frame and then a second later the real content is superimposed. This causes to much flickering for me. Is there any way to get rid of this flickering or is there any better way using only Shell Integration Library?
I had a similar problem where it wouldn't display any shadow when using a custom chrome. It worked fine when using the glass.
I got a shadow by setting GlassFrameThickness="0,0,0,1". The glass didn't show and I got the shadow.
Be warned, the shadow is a simple RECT to Windows, so if you have a funky chrome with transparencies it may look funny.
Also if you support the maximized state be aware the you'll need to set a margin on your top-level panel element of "8,8,8,8" when in maximized mode. All other modes should be "0,0,0,0".
To alimbada, the WindowStyle defaults to None on custom chrome.
The Shell Integration Library uses DwmExtendFrameIntoClientArea, plus handling of several Window messages to get the effects. If you're using the full window rect (i.e. no rounded corners) then setting it to (0,0,0,1) as suggested will give you the drop shadows as you want. If you want to simulate the rounded corners of Aero, then setting it to (8,8,8,8) will extend the glass frame enough that the corners also stay rounded, and then you're responsible for not drawing over the corners of the rectangle. The shape of the drop shadow doesn't change regardless of the glass frame thickness.
The flashing you're seeing when setting the thickness to -1 still exists even when not fully extending the glass frame. What's happening is the window is getting shown while the content is still compositing. What you can do is simplify the default UI so it displays quicker (or you can stage it, bringing in a simnple background first and then replacing it with something usable), or you can create and show the window off-screen, and then move it to the desired start location once the content has been rendered. The easy way to detect when it's probably ready is to invoke a DispatchTimer with Priority=Loaded. That should only get invoked once the basic first layout has been completed.