Twitter-Like Scrolling Title

Question

On the Twitter iOS app when you scroll past your name in the profile section below the navigation bar, your name begins to scroll into view on the navigation bar itself and sticks there if you scroll further down.

I'm wondering how to go about implementing a similar effect and what the best method would be. It looks as if:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

Might be a good bet, but not entirely sure how to make it scroll into view rather than simply animating it when reaching a particular top offset.

I'm using a custom header view rather than the UINavigationBar, so doesn't need to be specific to that, but would work best with a UILabel.

Would prefer Objective-C but Swift is welcome.

Lovely example image:

Answer 1

Thanks for the Code Ryan, It works fine in my project. The code has a little mistakes but I fixed it and here is the version in Swift in case anybody need it.

    self.title = "My Title"
    titleView = UIScrollView(frame: CGRectMake(0.0, 0.0, 100.0, 44.0))
    titleView.contentSize = CGSizeMake(0.0, 88.0)
    self.view.addSubview(titleView)

    var titleLabel:UILabel = UILabel(frame: CGRectMake(0.0, 44.0, CGRectGetWidth(titleView.frame), 44.0))
    titleLabel.textAlignment = NSTextAlignment.Center
    titleLabel.font = UIFont(name: "HelveticaNeue-UltraLight", size: 17)
    titleLabel.text = self.title
    titleView.addSubview(titleLabel)

    self.navigationItem.titleView = titleView

    contentView = UIScrollView(frame: self.view.bounds)
    contentView.contentSize = CGSizeMake(0.0, 4000.0)
    contentView.delegate = self
    self.view.addSubview(contentView)

    var contentLabel:UILabel = UILabel(frame: CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.bounds), 44.0))
    contentLabel.textAlignment = NSTextAlignment.Center
    contentLabel.font = UIFont(name: "HelveticaNeue-UltraLight", size: 17)
    contentLabel.text = self.title
    contentView.addSubview(contentLabel)

override func scrollViewDidScroll(scrollView: UIScrollView){

    var contentnOffset:CGPoint = CGPointMake(0.0, min(scrollView.contentOffset.y + 64.0, 44.0))
    titleView.setContentOffset(contentnOffset, animated: true)

}

Answer 2

Here I got it working. This ViewController is presented in a simple UINavigationController.

@interface ViewController () <UIScrollViewDelegate>
{
    UIScrollView *titleView;
    UIScrollView *contentView;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self.view setBackgroundColor:[UIColor lightGrayColor]];

    [self setTitle:@"My Title"];

    titleView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 44.0)];
    [titleView setContentSize:CGSizeMake(0.0, 88.0)];
    [self.view addSubview:contentView];

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 44.0, CGRectGetWidth(titleView.frame), 44.0)];
    [titleLabel setTextAlignment:NSTextAlignmentCenter];
    [titleLabel setFont:[UIFont boldSystemFontOfSize:17.0]];
    [titleLabel setText:self.title];
    [titleView addSubview:titleLabel];


    self.navigationItem.titleView = titleView;


    contentView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    [contentView setContentSize:CGSizeMake(0.0, 4000.0)];
    [contentView setDelegate:self];
    [self.view addSubview:contentView];

    UILabel *contentLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.bounds), 44.0)];
    [contentLabel setTextAlignment:NSTextAlignmentCenter];
    [contentLabel setFont:[UIFont boldSystemFontOfSize:17.0]];
    [contentLabel setText:self.title];
    [contentView addSubview:contentLabel];
}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint contentOffset = CGPointMake(0.0, MIN(scrollView.contentOffset.y + 64.0, 44.0));
    [titleView setContentOffset:contentOffset];
}

@end

Answer 3

the code above is good, clear and simple for scrolling of title only.

but if you want to make a view same as Twitter, you can use this tutorial:

http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/

this tutorial is implemented in swift.

you can download the source code by clicking on button "Download Source" in end of this tutorial.

or go directly to github: https://github.com/ariok/TB_TwitterUI

below we will explain how implement the fuction scrollViewDidScroll:

1- These are the first lines for the scrollViewDidScroll function:

var offset = scrollView.contentOffset.y
var avatarTransform = CATransform3DIdentity
var headerTransform = CATransform3DIdentity

Here we get the current vertical offset and we initialize two transformations that we are going to setup later on with this function.

2- manage the Pull Down action

if offset < 0 {

     let headerScaleFactor:CGFloat = -(offset) / header.bounds.height
     let headerSizevariation = ((header.bounds.height * (1.0 + headerScaleFactor)) - header.bounds.height)/2.0
     headerTransform = CATransform3DTranslate(headerTransform, 0, headerSizevariation, 0)
     headerTransform = CATransform3DScale(headerTransform, 1.0 + headerScaleFactor, 1.0 + headerScaleFactor, 0)

     header.layer.transform = headerTransform
}

3- manage the scroll up/down

else{
  // Header -----------

   headerTransform = CATransform3DTranslate(headerTransform, 0, max(-offset_HeaderStop, -offset), 0)

//  ------------ Label

   let labelTransform = CATransform3DMakeTranslation(0, max(-distance_W_LabelHeader, offset_B_LabelHeader - offset), 0)
            headerLabel.layer.transform = labelTransform

//  ------------ Blur

   headerBlurImageView?.alpha = min (1.0, (offset - offset_B_LabelHeader)/distance_W_LabelHeader)

// Avatar -----------

   let avatarScaleFactor = (min(offset_HeaderStop, offset)) / avatarImage.bounds.height / 1.4 // Slow down the animation
   let avatarSizeVariation = ((avatarImage.bounds.height * (1.0 + avatarScaleFactor)) - avatarImage.bounds.height) / 2.0
   avatarTransform = CATransform3DTranslate(avatarTransform, 0, avatarSizeVariation, 0)
   avatarTransform = CATransform3DScale(avatarTransform, 1.0 - avatarScaleFactor, 1.0 - avatarScaleFactor, 0)

   if offset <= offset_HeaderStop {

      if avatarImage.layer.zPosition < header.layer.zPosition{
                    header.layer.zPosition = 0
                }

      }else {
        if avatarImage.layer.zPosition >= header.layer.zPosition{
                    header.layer.zPosition = 2
                }
            }}

4- Apply Transformations

header.layer.transform = headerTransform
avatarImage.layer.transform = avatarTransform