CODEWITHSUNDEEP
iphoneiosobjective-cios7statusbar
DZenBot
DZenBot

Reputation: 4878

iOS7 Status Bar like the native weather app

Does anyone know how can I reproduce a similar effect from the native iOS7 weather app?

Basically, the status bar inherits the view's background underneath, but the content doesn't show up. Also, a 1 pixel line is drawn after the 20 pixels height of the status bar, only if some content is underlayed.

enter image description here

Upvotes: 4

Views: 1196

Answers (3)

andreikorniloff
andreikorniloff

Reputation: 1

Swift 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
            }
        }
    }
}

Starting Page: Starting Page

Scrolling First Item: Scrolling First Item

Scrolling Second Item: Scrolling Second Item

Upvotes: 0

invoodoo
invoodoo

Reputation: 3906

The best thing is to make it through the clipSubview of the view. You put your content into the view and make constraints to left/right/bottom and height. Height on scroll view you check is the cell has minus position and at that time you start to change the height of content (clip) view to get desired effect.

This is a real app you can download and take a look from www.fancyinteractive.com. This functionality will be available soon as next update.

- (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;
}

Starting Page

Scrolling first item

Scrolling second itme

Upvotes: 4

L&#233;o Natan
L&#233;o Natan

Reputation: 57050

You can accomplish this by setting a mask to the table view's layer. You will not be able however to render the animations inside the cells, but you can do those yourself behind the table view, and track their movement with the table view's scrollview delegate methods.

Here is some informations on CALayer masks: http://evandavis.me/blog/2013/2/13/getting-creative-with-calayer-masks

Upvotes: 1

Related Questions