7

在最新的 snapchat 更新中，当您“向右滑动查看消息”时，状态栏会以一种渐变的方式从黑色变为白色。

http://imgur.com/osJI20u

他们如何在不使用私有 API 的情况下做到这一点，或者他们是否使用私有 API？

我调查的内容：

乍一看，我认为他们只是在做其他人所做的事情（就像 rdio 目前所做的那样），通过屏幕捕获整个屏幕，然后修改/动画化该屏幕截图。

但是...您无法从该屏幕捕获方法访问 UIImage 或为其设置动画，因此尽管您可以移动/裁剪该屏幕截图，但您无法更改其外观。

所以...我对其进行了测试，当状态栏处于该状态（半黑/半白）时，它仍然是 LIVE 的，因为它不是屏幕截图，并且它响应充电变化/信号变化等，至于如果不使用私有 API，我可以说这是不可能的。

4

2 回答 2

15

这让我很好奇，所以我稍微玩了一下这个应用程序，并在越狱设备上使用 Spark Inspector 检查了应用程序的视图层次结构，我发现了一些东西。

你对他们不使用屏幕截图是不正确的。您正在离开的那一侧的状态栏是一个快照，不会改变。一分钟后您可以轻松地看到这一点，您正在转换到的视图的新状态栏将发生变化，因为它是真实的，但旧状态栏不会因为它是快照。这使得这种错觉很容易解决。

以下是高层次上正在发生的事情：

  1. 当您开始转换时，应用程序会在其当前状态下拍摄状态栏的快照（很可能它实际上是在拍摄整个状态栏的快照UIScreen并只是从中裁剪状态栏），并将包含该快照的窗口附加到过渡中视图的顶部，锚定到最终过渡位置并被“来自”视图控制器的视图所掩盖。这个窗口似乎有一个windowLevel上面，UIWindowLevelStatusBar所以它能够覆盖真正的状态栏。

  2. 然后，“to”视图控制器接管实际状态栏并将其更改为“light content”状态。这呈现出一种巧妙的错觉，即单个状态栏会随着过渡边框改变颜色，但真正的状态栏实际上总是位于快照窗口下方，并且如果不是快照窗口坐在过渡开始时确实会立即可见在它的上面。

于 2014-05-11T07:21:36.117 回答
2

根据 Dima 的回答，我认为一些让人们开始的基本实施可能会有所帮助。正如 Dima 所说，它不是在移动状态栏，而是在移动状态栏的图像。

免责声明：我 YOLO 完成了这个实现，所以我不保证它是否能开箱即用

从 iOS7 开始，您可以使用

UIView *screen = [[UIScreen mainScreen] snapshotViewAfterScreenUpdates:NO];

所以基本上状态栏是从图片中裁剪出来的，并添加到上面的UIWindowa中，这样你就可以在真实的状态栏上看到它。就像是：windowLevelUIWindowStatusLevelBar

UIWindow *statusBarWindow = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
statusBarWindow.windowLevel = UIWindowLevelStatusBar + 1; // higher
statusBarWindow.hidden = NO; // fun fact you don't have to add a UIWindow to anything, just setting hidden = NO should display it
statusBarWindow.backgroundColor = [UIColor clearColor]; // since visible, make it clear until we actually add the screen shot to it so as to not block anything 

...

// The view that will hold the screen shot
// Later, I think we're going to need to play with contentInsets to make the view look like its staying still, so we're making it a UIScrollView in case
UIScrollView *statusBarView = [[UIScrollView alloc] initWithFrame:[UIApplication sharedApplication].statusBarFrame];
statusBarView.clipsToBounds = YES;

// Now we add the screen shot we took to this status bar view
[scrollingStatusBarView addSubview:statusBarView];
[statusBarView addSubview:screen]; // screen is the UIScrollView from previous code block (the screen shot)

// Now add this statusBarView with the image to the window we created
[statusBarWindow addSubview:statusBarView];

现在剩下的真的取决于你的实现是什么样的，但从这里你真的只需要使用平移或任何导致新视图从侧面进入的动作来处理移动视图。

滑动开始时，用任何样式、背景配置新的状态栏（下面的那个）：

[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];
// anything else you might feel like doing

现在我们在这里发生了一些有趣的事情。随着过渡的进行，您将不得不使用其滚动的数量来“剪断”该偏移量statusBarView。必须从statusBarView.framex=offset 开始，否则它将显示在实际状态栏上（因为它的窗口更高），但如果您不更改 contentInsets，那么图片将随着过渡而滑动。因此，要创建错觉，您需要将原点推到右侧，同时将左侧内容插入增加相同的数量，使其看起来位于同一位置。

所以在处理滑动动作的任何方法中：

注意：这在很大程度上取决于个人实施，可能需要一些实验

 // if you're using an animation to handle the transition you can match up this change in x position with the animation

// if you're doing via pan gesture you could try something like:
CGFloat offset = self.viewThatIsScrolling.contentOffset.x; // may be negative depending on direction that is being swiped

if (midTransition) { // you can use the offset value here to check
    // NOTE: again, will depend on which direction this animation is happening in. I'll assume a new view coming in from left (so swiping right)
    statusBarView.frame = CGRectMake(offset, 0, self.statusBarView.frame.width, 20.0f); // move the origin over to the right
    statusBarView.contentInsets = UIEdgeInsetsMake(0, offset, 0, 0); // make the picture start 'offset' pixels to the left so it'll look like it hasn't moved

}

（旁注：您也可以尝试使用转换而不是显式设置框架：statusBarView.transform = CGAffineTransformMakeTranslation(offset -previousOffsetAmount, 0);。我在那里使用previousOffsetAmount，因为您只希望它移动任何新数量以便它可以匹配。如果出现这种情况，则必须以某种方式进行跟踪你走这条路）

最后，一旦“滑动”完成，不要忘记从窗口中完全删除屏幕截图：

// if continuing from before:
if (midTransition) {
    ...
} else { // the view has been slid completely
    [statusBarView removeFromSuperview];
    statusBarView = nil;
    // I'm keeping the UIWindow where it is for now so it doesn't have to be recreated and because it has a clear background anyways
}

// if this is being done via animation the above can be called the animation finishes

我实际上可能有兴趣尝试让它工作，所以如果是这样，我会更新。

于 2016-01-24T06:46:00.323 回答