草庐IT

android - Gmail 三段动画场景的完整工作示例?

coder 2023-05-07 原文

TL;DR:我正在寻找我称之为“Gmail 三 fragment 动画”场景的完整工作示例。具体来说,我们希望从两个 fragment 开始,如下所示:

对于一些 UI 事件(例如,点击 fragment B 中的某物),我们希望:

  • fragment A 向左滑出屏幕
  • Fragment B 滑动到屏幕的左边缘并缩小以占据 Fragment A 腾出的位置
  • Fragment C 从屏幕右侧滑入并占据 Fragment B 腾出的位置

而且,在按下 BACK 按钮时,我们希望反转这组操作。

现在,我看到了很多部分实现;我将在下面回顾其中的四个。除了不完整之外,它们都有自己的问题。


@Reto Meier 贡献了 this popular answer相同的基本问题,表明您将使用 setCustomAnimations()FragmentTransaction .对于两个 fragment 的场景(例如,您最初只看到 fragment A,并希望将其替换为使用动画效果的新 fragment B),我完全同意。然而:

  • 由于您只能指定一个“进”和一个“出”动画,我看不出您将如何处理三 fragment 场景所需的所有不同动画
  • <objectAnimator>在他的示例代码中使用以像素为单位的硬连线位置,考虑到不同的屏幕尺寸,这似乎是不切实际的,但 setCustomAnimations()需要动画资源,排除了在 Java 中定义这些东西的可能性
  • 我不知道缩放的对象动画师如何与 android:layout_weight 之类的东西联系起来。在 LinearLayout按百分比分配空间
  • 我不知道一开始是如何处理 fragment C 的(GONEandroid:layout_weight0 ?预动画到 0 的比例?还有什么?)

@Roman Nurik 指出 you can animate any property ,包括您自己定义的那些。这可以帮助解决硬连线位置的问题,代价是发明您自己的自定义布局管理器子类。这对一些人有帮助,但我仍然对 Reto 的其他解决方案感到困惑。


this pastebin entry 的作者显示了一些诱人的伪代码,基本上说所有三个 fragment 最初都将驻留在容器中, fragment C 一开始通过 hide() 隐藏交易操作。然后我们show() C 和 hide() A 当 UI 事件发生时。但是,我看不出它如何处理 B 改变大小的事实。它还依赖于您显然可以将多个 fragment 添加到同一个容器的事实,我不确定这是否是长期可靠的行为(更不用说它应该打破 findFragmentById() ,尽管我可以忍受那个)。


this blog post 的作者表示 Gmail 未使用 setCustomAnimations()完全没有,而是直接使用对象动画器(“您只需更改 Root View 的左边距 + 更改右 View 的宽度”)。但是,这仍然是 AFAICT 的两 fragment 解决方案,并且再次显示的实现以像素为单位进行硬接线。


我将继续解决这个问题,所以有一天我可能会自己回答这个问题,但我真的希望有人已经为这个动画场景制定了三 fragment 解决方案并可以发布代码(或链接)。 Android 中的动画让我想拔掉我的头发,而那些看过我的人都知道,这在很大程度上是徒劳的。

最佳答案

将我的提案上传至 github (适用于所有 android 版本,但强烈建议对此类动画使用 View 硬件加速。对于非硬件加速设备,位图缓存实现应该更适合)

带有动画的演示视频是Here (投屏导致帧率慢,实际性能很快)


用法:

layout = new ThreeLayout(this, 3);
layout.setAnimationDuration(1000);
setContentView(layout);
layout.getLeftView();   //<---inflate FragmentA here
layout.getMiddleView(); //<---inflate FragmentB here
layout.getRightView();  //<---inflate FragmentC here

//Left Animation set
layout.startLeftAnimation();

//Right Animation set
layout.startRightAnimation();

//You can even set interpolators

说明:

创建了一个新的自定义RelativeLayout(ThreeLayout)和2个自定义动画(MyScalAnimation, MyTranslateAnimation)

ThreeLayout 获取左 Pane 的权重作为参数,假设另一个可见 View 具有 weight=1

所以 new ThreeLayout(context,3) 创建了一个包含 3 个 subview 的新 View ,左侧 Pane 占总屏幕的 1/3。另一个 View 占据了所有可用空间。

It calculates width at runtime,a safer implementation is that the dimentions are be calculated first time in draw(). instead of in post()

缩放和平移动画实际上是调整 View 大小和移动 View ,而不是伪 [scale,move]。请注意,fillAfter(true) 没有在任何地方使用。

View2 是 View1 的 right_of

View3 是 View2 的 right_of

设置这些规则后,RelativeLayout 会处理其他所有事情。动画改变 margins(移动)和 [width,height] 缩放

要访问每个 child (这样你就可以用你的 Fragment 给它充气,你可以调用

public FrameLayout getLeftLayout() {}

public FrameLayout getMiddleLayout() {}

public FrameLayout getRightLayout() {}

下面是2个动画演示


第一阶段

---IN Screen----------!-----OUT----

[View1][_____View2_____][_____View3_____]

第二阶段

--OUT-!--------IN Screen------

[View1][View2][_____View3_____]

关于android - Gmail 三段动画场景的完整工作示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12253965/

有关android - Gmail 三段动画场景的完整工作示例?的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  3. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  4. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  6. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是,在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  7. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  8. ruby - `rescue $!` 是如何工作的? - 2

    我知道全局变量$!包含最新的异常对象,但我对下面的语法感到困惑。谁能帮助我理解以下语法?rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回,这很有用。a=get_me_datarescue$!在此行之后,a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

  9. 「Python|Selenium|场景案例」如何定位iframe中的元素? - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时,对于使用了iframe的页面,如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候,可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签,如果直接查找是无法找到的,会抛出没有找到元素的异常。比如近在咫尺的例子就是,CSDN的登录窗体就是使用的iframe,大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素,会抛出NoSuchElementException异常。解决

  10. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

随机推荐