Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the blurred and translucent effect on a navigation bar in iOS 7?

Problem

My app appears to be laid out correctly, but I cannot achieve the blurry translucent effect that iOS 7 is famous for. Mine appears opaque.

enter image description here

Desired Effect

I'm trying to get a more obvious blur effect such as Apple's Trailers app:

enter image description here

Translucency

In my subclass of UINavigationController, I make the navigation bar translucent:

- (id)initWithRootViewController:(UIViewController *)rootViewController
{
    if (self = [super initWithRootViewController:rootViewController]) {
        self.navigationBar.translucent = YES;
    }
    return self;
}

Tint Color

In my subclass of UIApplicationDelegate, I set the tint color of the navigation bar. I discovered that the alpha of the tint color makes no difference. That is, using an alpha of 0.1 would not cause the bar to become more translucent.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    [[UINavigationBar appearance] setTintColor:[UIColor greenColor]];
}

Edges

In my content view controller, I set the edge to UIRectEdgeNone so the top doesn't get chopped off by the navigation bar. If I were to use the default UIRectEdgeAll, the navigation bar would permanently cover the top of my content. Even if I were to live with this abnormality, UIRectEdgeAll still does not enable the translucency effect.

- (void) viewDidLoad
{
    [super viewDidLoad];
    self.edgesForExtendedLayout = UIRectEdgeNone;
}

Edit: Experimenting with Edges

Ad pointed out by @rmaddy in the comments, the problem may be with the edgesForExtendedLayout. I found a comprehensive tutorial edgesForExtendedLayout and attempted to implement it:

- (void) viewDidLoad
{
    [super viewDidLoad];

    self.edgesForExtendedLayout = UIRectEdgeAll;
    self.automaticallyAdjustsScrollViewInsets = YES;
    self.extendedLayoutIncludesOpaqueBars = NO;
}

It did not work. Firstly, there was no translucency effect. Secondly, the top of my content was chopped off. On the following example page with the above code, the avatar was initially covered by the navigation bar and it was very hard to scroll to. You could pull down to see the top of the avatar, but when you let go, the page would automatically bounce back up and the avatar would be obscured again.

enter image description here

like image 698
Pwner Avatar asked Nov 14 '13 01:11

Pwner


People also ask

How to make status and navigation bar transparent in Xcode?

Step 1 − Open Xcode → New Project → Single View Application → Let’s name it “TransparentViews” Step 2 − Embed the View Controller in Navigation Controller. Add Image View and shown and add image. Step 3 − Run the application without adding any piece of code for making status and navigation bar transparent.

How to apply a transparent navigation bar in uinavigationbar?

To apply a transparent navigation bar for a specific navigation bar instance, you need to repeat the process we did in the previous step but set it on navigation bar instance instead of UINavigationBar.appearance (). You can either set it when initializing the UINavigationController instance or inside the child view controller.

Is it possible to build the control center blurry header effect?

I won’t explain exactly how to build this effect for the Control Center but rather focus on how to build something similar to the blurred header effect you can find in iMessage and many other apps in iOS7. But the tricks you will learn will make it possible to build the Control Center effect too.


1 Answers

The problem was caused by the third party pull-down-to-refresh view EGORefreshTableHeaderView, which was popularly used before iOS 6 introduced the system refresh control.

enter image description here

This view confuses iOS 7, making it think that the content is taller than it really is. For iOS 6 and 7, I've conditionally switched to using UIRefreshControl. Now the navigation bar will not chop off my content. I can use UIRectEdgeAll to make my content go underneath the navigation bar. Finally, I tint my navigation bar with a lower alpha to get the translucency effect.

// mostly redundant calls, because they're all default
self.edgesForExtendedLayout = UIRectEdgeAll;
self.automaticallyAdjustsScrollViewInsets = YES;
self.extendedLayoutIncludesOpaqueBars = NO;

[[UINavigationBar appearance] setTintColor:[UIColor colorWithWhite:0.0 alpha:0.5]];
like image 52
Pwner Avatar answered Jan 18 '23 22:01

Pwner