xcode 类似推特的滚动标题

Twitter-Like Scrolling Title

提问by Alex Saidani

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.

在 Twitter iOS 应用程序上，当您在导航栏下方的个人资料部分中滚动超过您的姓名时，您的姓名开始滚动到导航栏本身的视图中，如果您进一步向下滚动，您的姓名就会停留在那里。

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.

我使用的是自定义标题视图而不是 UINavigationBar，因此不需要特定于此，但最好与 UILabel 一起使用。

Would prefer Objective-C but Swift is welcome.

更喜欢Objective-C，但欢迎使用Swift。

Lovely example image:

可爱的示例图片：

采纳答案by Ryan Poolos

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

在这里，我得到了它的工作。这个 ViewController 以一个简单的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

回答by Mohamad Chami

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:

但如果你想制作与 Twitter 相同的视图，你可以使用本教程：

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

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

this tutorial is implemented in swift.

本教程是在 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

或者直接上github：https: //github.com/ariok/TB_TwitterUI

below we will explain how implement the fuction scrollViewDidScroll:

下面我们将解释如何实现scrollViewDidScroll功能：

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

1- 这些是 scrollViewDidScroll 函数的第一行：

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

2- 管理下拉操作

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

3-管理向上/向下滚动

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

4- 应用转换

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

回答by Victor Carre?o

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.

感谢代码 Ryan，它在我的项目中运行良好。代码有一点错误，但我修复了它，这里是 Swift 中的版本，以防有人需要它。

    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)

}