类似 Twitter 的滚动标题

Question

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

我想知道如何实现类似的效果以及最好的方法是什么。 看起来好像：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

可能是一个不错的选择，但不完全确定如何让它滚动到视图中，而不是在达到特定的顶部偏移量时简单地对其进行动画处理。

我使用的是自定义标题视图而不是 UINavigationBar，因此不需要具体说明，但最好使用 UILabel。

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

可爱的示例图片：

Answer 1

在这里我得到了它的工作。这个 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

Answer 2

上面的代码很好，清晰，简单，只用于滚动标题。

但是如果你想制作一个和 Twitter 一样的视图，你可以使用这个教程：

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

本教程用swift实现。

您可以点击本教程末尾的“下载源代码”按钮下载源代码。

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

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

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

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

这里我们获取当前的垂直偏移量，并初始化两个转换，稍后我们将使用此函数设置。

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- 管理向上/向下滚动

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- 应用转换

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

Answer 3

感谢瑞恩的代码，它在我的项目中运行良好。代码有一些错误，但我修复了它，这是 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)

}