ios - 类似 Twitter 的滚动标题

coder 2023-07-29 原文

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

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

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

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

我使用的是自定义标题 View 而不是 UINavigationBar，因此不需要特定于此，但与 UILabel 配合使用效果最佳。

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

可爱的示例图像:

最佳答案

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

但是如果你想做一个和推特一样的 View ，你可以使用这个教程:

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

关于ios - 类似 Twitter 的滚动标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27237757/

有关ios - 类似 Twitter 的滚动标题的更多相关文章

ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
ruby - 如何验证 IO.copy_stream 是否成功 - 2
这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下
Ruby 文件 IO 定界符？ - 2
我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？最佳答案接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的
Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2
1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里
ruby - Ruby 是否有类似于 Perl 的 "perl -d"的逐步调试器？ - 2
Ruby是否有逐步调试器，类似于Perl的“perl-d”？最佳答案 ruby-debug(对于ruby1.8)，debugger(对于ruby1.9)，byebug(对于ruby2.0)以及trepanning系列都有一个-x或--trace选项。在调试器内部，命令setlinetrace将打开或关闭线路跟踪。这是themanualforruby-debug原来的答案已经修改，因为数据噪声文章的链接，唉，不再有效了。还添加了ruby-debug的后继者关于ruby-Ruby
ruby - 使对象的行为类似于 ruby 中并行分配的数组 - 2
假设您在Ruby中执行此操作:ar=[1,2]x,y=ar然后，x==1和y==2。是否有一种方法可以在我自己的类中定义，从而产生相同的效果？例如rb=AllYourCode.newx,y=rb到目前为止，对于这样的赋值，我所能做的就是使x==rb和y=nil。Python有这样一个特性:>>>classFoo:...def__iter__(self):...returniter([1,2])...>>>x,y=Foo()>>>x1>>>y2 最佳答案是的。定义#to_ary。这将使您的对象被视为要分配的数组。irb>o=Obje
ruby - 为什么不能使用类IO的实例方法noecho？ - 2
print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上
语法类似于 GitHub Flavored Markdown 的 Ruby markdown 解释器？ - 2
我使用Jekyll运行博客，并认为我会解决RedcarpetMarkdown解释器，因为它是developedandusedbyGitHub.好吧，我只是碰巧遇到了一个错误，去检查问题，然后foundthis.Maintainersays,"Asyouprobablyhavenoticed(harharharhar)Idon'thavetimetomaintainRedcarpetanymore.It'snotapriorityforme(IfindMarkdownthoroughlyboring)andit'snotapriorityforGitHub,becausewenolong
ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2
有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。最佳答案根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|
ruby - Dropbox 类似 git 的服务——没有 rsync 和 inotify - 2
关于如何使用git设置类似Dropbox的服务，您有什么建议吗？您认为git是解决此问题的合适工具吗？我在考虑使用git+rush解决方案，你觉得怎么样？最佳答案检查这个开源项目:https://github.com/hbons/SparkleShare来自项目的自述文件:Howdoesitwork?SparkleSharecreatesaspecialfolderonyourcomputer.Youcanaddremotelyhostedfolders(or"projects")tothisfolder.Theseprojec

ios - 类似 Twitter 的滚动标题

有关ios - 类似 Twitter 的滚动标题的更多相关文章

随机推荐