Twitter-Like滚动标题

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