Twitter-Like滚动标题

在Twitter iOS应用程序上，当您在导航栏下方的配置文件部分中滚动浏览您的名称时，您的名称将开始滚动到导航栏本身的视图中，如果您向下滚动，则会粘在那里。

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

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 

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

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

更喜欢Objective-C但欢迎Swift。

可爱的示例图片：

Answer 1

我在这里工作了。 这个ViewController以简单的UINavigationController呈现。

 @interface ViewController ()  { 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

下面我们将解释如何实现functionscrollViewDidScroll：

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

感谢Code 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) }