代码库> 其他> AlphaGradientStatusBar——iOS7中滚动内容覆盖住了状态栏,解决方案
AlphaGradientStatusBar——iOS7中滚动内容覆盖住了状态栏,解决方案
关注
上传者:ccsupport 分类:其他(Others)
查看次数:4317 下载次数:187
上传时间:2013-12-12 大小:282 B
iOS7发布之前,设计师和开发工程师们都没有怎么仔细对状态栏进行过思考。状态栏以前在应用的框架之外,而且只占了了22像素。现在这一切都变了。iOS7的状态栏在应用之中,而我们作为app的制作者必须要出新的有趣的办法来好好对它进行处理。如果你之前的app有滚动的内容,升级iOS7之后,你可能需要处理下面的问题,如图:

有很多种解决这个问题的方法,这里我使用一个alpha的gradient mask和CAGradientLayer来处理这个问题,效果如图:


现在类似的事情可以在Photoshop里进行处理。你可以把头部的背景作为一副单独的图片,对底部进行羽化,然后覆盖上去。我这里教你一种通过编码来达到这样的效果。我这里假定你知道如何设置一个UICollectionView。

让我们开始吧。首先创建一个新的collection view,然后设置它的frame占满整个屏幕。然后创建一个新的带有背景图片的UIImageView,然后将它设置为collection view的backgroundView。


collectionView = [[UICollectionView alloc] initWithFrame:[[self view] bounds]];
// ... set delegate, datasource, etc.
[[self view] addSubview:collectionView];
[collectionView release];

// Set our "space" background image as the backgroundView.
UIImage *background = [UIImage imageNamed:@"space-background"];
UIImageView *backgroundView = [[UIImageView alloc] initWithImage:background];
[collectionView setBackgroundView:backgroundView];
[backgroundView release];


这个效果是由代码完成的,所以我们只需要一张图片,其他的在代码中进行处理。

下一步就是对背景的头部部分截图。我们可以使用 CGImageCreateWithImageInRect。这个功能可以对图片进行截图。


// First get a reference to our background image
UIImage *background = [(id)[collectionView backgroundView] image];

// This is the rectangle of the image that the status bar is covering
// we also need to adjust it for scale.
CGRect barRect = CGRectMake(0.0f, 0.0f, 320.0f, 28.0f);
barRect.size.width *= [background scale];
barRect.size.height *= [background scale];

// Create an image from the barRect area and convert it to a UIImage
CGImageRef imageRef = CGImageCreateWithImageInRect([background CGImage], barRect);
UIImage *topImage = [UIImage imageWithCGImage:imageRef
                                        scale:[background scale]
                                  orientation:UIImageOrientationUp];
CGImageRelease(imageRef);


如果你在topImage这行后增加一个断点,那么移动鼠标过去你就可以看到这个图片在内存中时什么样子的。

最后我们需要给这张图片创建一个view,让他覆盖到collection view的顶部,然后给他调用一个alpha gradient mask。我们可以使用CAGradientLayer的两种颜色,透明的以及 不透明的,可以通过设定startPoint和endPoint来覆盖半边底部。





// Create a gradient layer that goes transparent -> opaque
CAGradientLayer *alphaGradientLayer = [CAGradientLayer layer];
NSArray *colors = [NSArray arrayWithObjects:
                   (id)[[UIColor colorWithWhite:0 alpha:0] CGColor],
                   (id)[[UIColor colorWithWhite:0 alpha:1] CGColor],
                   nil];
[alphaGradientLayer setColors:colors];

// Start the gradient at the bottom and go almost half way up.
[alphaGradientLayer setStartPoint:CGPointMake(0.0f, 1.0f)];
[alphaGradientLayer setEndPoint:CGPointMake(0.0f, 0.6f)];

// Create a image view for the topImage we created above and apply the mask
statusBarView = [[UIImageView alloc] initWithImage:topImage];
[alphaGradientLayer setFrame:[statusBarView bounds]];
[[statusBarView layer] setMask:alphaGradientLayer];

// Finally, add the masked image view on top of our collection view
[[self view] addSubview:statusBarView];
[statusBarView release]



这么做第二张图片的效果就实现了。

收藏
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0
提示
sina weixin mail 回到顶部