[英]How to get the blurred and translucent effect on a navigation bar in iOS 7?
My app appears to be laid out correctly, but I cannot achieve the blurry translucent effect that iOS 7 is famous for. 我的应用程序似乎布局正确,但我无法实现iOS 7着名的模糊半透明效果。 Mine appears opaque. 我看起来不透明。
I'm trying to get a more obvious blur effect such as Apple's Trailers app: 我正试图获得更明显的模糊效果,例如Apple的预告片应用:
In my subclass of UINavigationController, I make the navigation bar translucent: 在我的UINavigationController的子类中,我使导航栏半透明:
- (id)initWithRootViewController:(UIViewController *)rootViewController
{
if (self = [super initWithRootViewController:rootViewController]) {
self.navigationBar.translucent = YES;
}
return self;
}
In my subclass of UIApplicationDelegate, I set the tint color of the navigation bar. 在我的UIApplicationDelegate的子类中,我设置了导航栏的色调颜色。 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. 也就是说,使用0.1的α不会导致条形变得更透明。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[UINavigationBar appearance] setTintColor:[UIColor greenColor]];
}
In my content view controller, I set the edge to UIRectEdgeNone
so the top doesn't get chopped off by the navigation bar. 在我的内容视图控制器中,我将边缘设置为UIRectEdgeNone
因此顶部不会被导航栏切断 。 If I were to use the default UIRectEdgeAll
, the navigation bar would permanently cover the top of my content. 如果我使用默认的UIRectEdgeAll
,导航栏将永久覆盖我的内容的顶部。 Even if I were to live with this abnormality, UIRectEdgeAll
still does not enable the translucency effect. 即使我忍受这种异常, UIRectEdgeAll
仍然不会启用半透明效果。
- (void) viewDidLoad
{
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeNone;
}
Ad pointed out by @rmaddy in the comments, the problem may be with the edgesForExtendedLayout. 广告在@rmaddy的评论中指出,问题可能与edgeForExtendedLayout有关。 I found a comprehensive tutorial edgesForExtendedLayout and attempted to implement it: 我找到了一个全面的教程edgesForExtendedLayout并试图实现它:
- (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. 您可以下拉以查看头像的顶部,但是当您放开时,页面会自动反弹并且头像会再次被遮挡。
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. 问题是由第三方下拉到刷新视图EGORefreshTableHeaderView引起的 ,这是在iOS 6引入系统刷新控制之前普遍使用的。
This view confuses iOS 7, making it think that the content is taller than it really is. 这个视图混淆了iOS 7,使它认为内容比实际高。 For iOS 6 and 7, I've conditionally switched to using UIRefreshControl . 对于iOS 6和7,我有条件地切换到使用UIRefreshControl 。 Now the navigation bar will not chop off my content. 现在导航栏不会切断我的内容。 I can use UIRectEdgeAll
to make my content go underneath the navigation bar. 我可以使用UIRectEdgeAll
将我的内容放在导航栏下方。 Finally, I tint my navigation bar with a lower alpha to get the translucency effect. 最后,我用较低的alpha着色我的导航栏以获得半透明效果。
// 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]];
If you need to achieve exactly the same effect as in the iTunes Store (Dark Blur). 如果您需要获得与iTunes Store中完全相同的效果(Dark Blur)。
Configure the barStyle
attribute of the navigation bar as follows: 配置导航栏的barStyle
属性,如下所示:
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.