iOS7 状态栏就像原生天气应用

Posted

技术标签:

【中文标题】iOS7 状态栏就像原生天气应用【英文标题】:iOS7 Status Bar like the native weather app 【发布时间】:2013-10-02 14:42:51 【问题描述】:

有谁知道如何从原生 ios7 天气应用中重现类似的效果?

基本上,状态栏会继承下面的视图背景,但内容不会显示出来。 此外,状态栏的 20 像素高度之后会绘制一条 1 像素的线,但前提是某些内容被覆盖。

【问题讨论】:

我的猜测是它不是专门的状态栏效果,而是当 UITableView 向上滚动时他们正在做一个自定义转换(基本上是一个透明的状态栏)。 我也是这么想的。但是你怎么能隐藏/掩盖单元格内容呢? 你能达到效果吗,我也在找答案。 【参考方案1】:

最好的办法是通过视图的clipSubview。您将内容放入视图中并对左/右/底部和高度进行约束。您检查的滚动视图上的高度是单元格的负位置,此时您开始更改内容(剪辑)视图的高度以获得所需的效果。

这是一个真正的应用程序,您可以从 www.fancyinteractive.com 下载并查看。此功能将在下次更新时提供。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 
NSArray *visibleCells = [convertorsTableView visibleCells];

if (visibleCells.count) 
    for (CVConverterTableViewCell *cell in visibleCells) 
        CGFloat positionYInView = [convertorsTableView convertRect:cell.frame toView:self.view].origin.y;

        [self clipLayoutConstraint:cell.clipHeightLayoutConstraint withPosition:positionYInView defaultHeight:cell.frameHeight];

        [cell.converterLabel layoutIfNeeded];
        [cell.iconImageView layoutIfNeeded];
    


[self checkStatusBarSeperator:scrollView.contentOffset.y];


- (void)clipLayoutConstraint:(NSLayoutConstraint *)constraint withPosition:(CGFloat)position defaultHeight:(CGFloat)defaultHeight 
if (position < 0) 
    constraint.constant = (defaultHeight - -position - 20 > 10) ? defaultHeight - -position - 20 : 10;
 else
    constraint.constant = defaultHeight;

【讨论】:

什么是clipHeightLayoutConstraint @AVEbrahimi 希望我通过电子邮件对您有所帮助。【参考方案2】:

您可以通过为表格视图的图层设置遮罩来完成此操作。但是,您将无法在单元格内渲染动画,但您可以自己在表格视图后面执行这些操作,并使用表格视图的滚动视图委托方法跟踪它们的移动。

以下是有关CALayer 掩码的一些信息: http://evandavis.me/blog/2013/2/13/getting-creative-with-calayer-masks

【讨论】:

听起来是一个非常不错的解决方案,也是很好的挑战!但我想知道,如果我在表格视图的图层上应用蒙版,它也会屏蔽单元格的背景,不是吗? 是的。正如我所说,您必须自己管理单元格背景。我可以想到一个相当简单的解决方案,其中一个单元格有文本,另一个有背景,当一个单元格滚动时,另一个单元格也滚动。 我认为这是通过屏蔽 contentView 并将 backgroundView 与动画一起完成的。 contentView 中的所有内容都将被隐藏。 也许在剪辑内容的同时最小化框架也可以解决问题。你有什么流程吗?我目前正在弄清楚如何从细节视图过渡。 @Mark 由手势识别器控制的两个集合视图控制器布局之间的交互转换怎么样?【参考方案3】:

斯威夫特 5:

override func scrollViewDidScroll(_ scrollView: UIScrollView) 
    guard let visibleCells = tableView.visibleCells as? [TableViewCell] else  return 

    let defaultClipHeight: CGFloat = 24
    let statusBarHeight: CGFloat = UIApplication.statusBarHeight
    
    if !visibleCells.isEmpty 
        for cell in visibleCells 
            let topSpace = cell.frame.size.height - defaultClipHeight - cell.clipBottomConstraint.constant
            let cellOffsetY = tableView.contentOffset.y - cell.frame.origin.y + statusBarHeight
            
            if cellOffsetY > topSpace 
                let clipOffsetY = cellOffsetY - topSpace
                let clipHeight = defaultClipHeight - clipOffsetY
                
                cell.clipHeightConstraint.constant = max(clipHeight, 0)
             else 
                cell.clipHeightConstraint.constant = defaultClipHeight
            
        
    

起始页:

滚动第一项:

滚动第二项:

【讨论】:

以上是关于iOS7 状态栏就像原生天气应用的主要内容,如果未能解决你的问题,请参考以下文章

从PhoneGap Camera API返回时如何隐藏iOS7状态栏?

iOS 隐藏状态栏

Snapchat更新状态栏iOS7更新

重叠视图iOS7上的状态栏

状态栏 iOS7

iOS7如何隐藏状态栏?