android中选择控件与选择界面自然过度效果的实现–一种新的交互设计[通俗易懂]

android中选择控件与选择界面自然过度效果的实现–一种新的交互设计

大家好,又见面了,我是全栈君。

转载请标明出处: http://blog.csdn.net/jianghejie123/article/details/40648931

在安卓中经常遇到须要选择一个东西的功能,比方选择日期。选择文件,选择地点等,通常我们的做法是使用选择对话框。比方选择日期用datepicker,有时候也使用activity,可是这两种方式都有一个缺点,就是用户非常明显的感觉到了界面之间的切换。

有时候。以下这样的选择数据的交互方式应该会更好些:

事实上上面的app效果来自与CapitaineTrain应用,好像是一个乘火车的app,而该app的作者也将这样的效果在他的博客中做了介绍,同一时候开放了实现这一效果的源代码。

本文就是在作者那篇博文的基础上写的。

我并没有直接翻译,由于这里面的思路较为复杂,我没有看懂作者的意思,我看原文以下的非常多评论也说自己没看懂作者的意思。预计作者本身并没有阐述清楚。 在自己依据作者的源代码实现了一个demo之后。我写点关于自己的理解。文章最后我会贴出原文的地址以及代码下载的地址。

android中选择控件与选择界面自然过度效果的实现--一种新的交互设计[通俗易懂]

在上面那张图片中,当选点击“选择日期的button”之后。日期选择界面就会渐渐额显示出来。同一时候“选择日期的button”会慢慢移到最上面的位置。而“选择日期的button”以下的部分则会慢慢下移同一时候还有个透明度低直至消失的过程。

当动画结束,仅仅留下“选择日期的button”以及日期选择界面。整个过程就像是界面上的全部元素依照一定的规则将空间让给即将呈现的界面。过度很自然。并且不同位置的选择控件触发的上下平移动画是不同的(比方当选择控件本身在顶部时,控件不会再有上移的动画效果)。很灵活, 用户在两种界面切换的过程中。思路是紧密联系的。

或许仅仅有国外的开发人员才会这么细心了。

说完了效果,我们再来看看源代码结构:

android中选择控件与选择界面自然过度效果的实现--一种新的交互设计[通俗易懂]

当中FormAnimatorDemoActivity.java是我自己加入的示例。由于作者本身的样例看的让人眼花缭乱。

MainWithAnimatorActivity和MainWithoutAnimatorActivity各自是该效果的两种实现方式:属性动画方式和一般的渐变动画方式渐变动画方式效果很不理想,可是他的详细代码有助于我们去理解实现的逻辑。

CustomAnimator是一个自己定义动画类,他是属性动画方式实现的核心代码。

Positions封装了一些列的不同对象的属性。

PositionTypeEvaluator为属性动画的自己定义估算方法。这个概念要參考属性动画的使用方法。

使用属性动画方式仅仅需例如以下三行代码:

animator.setAnimatorViews(mMainContainer, localfrom, mFirstGroup, Arrays.asList(new View[]{mSecondGroup,mFirstSpacer,mThirdGroup}), null, mEditModeContainer, Arrays.asList(new View[]{}));
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
animator.prepareAnimation();
animator.start();

当中animator的定义例如以下:

 
private CustomAnimator animator =
new
CustomAnimator();

这里最难理解的是animator.setAnimatorViews的7个參数。没明确这7个參数的意思。既无法知道怎样调用,也无法去研究CustomAnimator的源代码。

我们来看CustomAnimator中setAnimatorViews的定义:

public void setAnimatorViews(ViewGroup mainContainer, View focusedView, View focusedViewContainer, List<View> fadedOutToBottomViews, View stickyTo, ViewGroup editModeView, List<View> slideToTop)

mainContainer:整个布局的最上层容器。

focusedView:被点击的控件,也就是上面说道的选择控件。

focusedViewContainerfocusedView所在的父容器。

fadedOutToBottomViews:动画过程中将消失究竟部去的view列表

stickyTo:不知道干嘛的。

editModeView:被隐藏的选择界面。

slideToTop:动画过程中将滑动到顶部的view列表。

说到这里我想说的是在api设计这个层面来说,作者设计的是非常糟糕的。

只是这样做也是最节省代码的,并且作者处理属性动画方面有非常多技巧。

当中。mainContainerfocusedView、focusedViewContainer、editModeView四个參数是必须的。可是fadedOutToBottomViews以及slideToTop假设同一时候为空效果将大打折扣。实际上fadedOutToBottomViews和slideToTop列表里面详细须要哪些view全然取决与开发人员自己依据当前UI的情况推断。

我的理解就到此为止了。并没有深入的去研究代码。

原文地址:http://www.cyrilmottier.com/2014/05/20/custom-animations-with-fragments/

最后是源代码,作者在自己的demo中并没有全然实现上面gif图片中的效果,而是做了个简单的能说明用法的demo,个人认为这个demo做的不好,作者demo的下载地址在:

https://git.mika-dev.com/Mika/custom-animations-with-fragment

另外为了能更直观的看到效果,我模仿了gif图中的布局自己做了个demo

http://download.csdn.net/detail/jianghejie123/8102407

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115608.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 基于Eclipse的Android开发环境搭建「建议收藏」

    基于Eclipse的Android开发环境搭建「建议收藏」对于才接触Android开发的人员来说,复杂的开发环境搭建,各种新知识,新内容要接触总是让人无从下手。通过这篇文章,让零基础开发人员成功搭建基于Eclipse的android开发环境。Android使用Java语言进行开发,首先我们需要搭建Java开发环境,在此基础上搭建Android开发环境。如果开发者有Java开发经验,并有基于Eclipse的Java开发环境,可以跳过Java开发环境搭建。

  • 无穷小分析理论_无穷小是一个过程

    无穷小分析理论_无穷小是一个过程一般读者对无穷小微积分只是略知一二,其实这是不够的。现将有关文章引用如下,供读者参考。袁萌 12月23日非标准分析概念又可称为实无穷小分析)(英语:Non-standardanalysis)是一个数学分支,它用严格定义的无穷小的数(infinitesimalnumber)的概念来构建数学分析大厦。1历史2动机2.1历史上的原因2.2教学上的原因2.3技术上的原因3无穷小分析的各种建立

  • getcomponent_getsocketopt

    getcomponent_getsocketoptGetMessage函数功能GetMessage是计算机编程中的一个函数,从调用线程的消息队列里取得一个消息并把其放于指定的结构。GetMessage函数可取得与指定窗口联系的消息和由PostThreadMesssge寄送的线程消息,接收一定范围的消息值,不接收属于其他线程或应用程序的消息。GetMessage获取消息成功后,线程把从消息队列中删除该消息,函数会一直等待直到有消息到来才有返回值。函数声明WINUSERAPIBOOLWINAPIGetMessage(_Out_LPMS

  • 微信公众号平台开发测试怎么做_软件测试怎么测小程序

    微信公众号平台开发测试怎么做_软件测试怎么测小程序微信公众号与微信客户端之间的通信机制如下图所示:公众账号需要根据不同微信用户的不同消息做出不同的响应,所以每一个公众账号需要开发自己独有的系统,这套系统需要运行在公网环境下,但是我们通常普通开发人员没有这个条件,所以我选择了新浪云(天真的我以为是免费的,结果花了10个小洋)。第一步注册微信公众账号我用已有的微信号,扫码即可得到一个第二步注册新浪云

  • (数据库)数据库分类

    (数据库)数据库分类1.面向操作的关系型数据库典型性应用领域:ERP,CRM,信用卡交易,中小型电商数据储存方法:表格流行厂商:OracleDatabase,MicrosoftSQLServer,IBMDB2,EnterpriseDB(PostgreSQL),MySQL优点:完善的生态环境保护,事务保证/数据一致性缺点:严苛的数据模型界定,数据库拓展限制,和非结构型的结合应用较难。2.面向数据分析的关系型数据库典型性应用领域:数据仓库,商务智能,数据科学研究数据储存方法:表格流行厂商:OracleE

  • 365xav.cf/forum.php,jupyterlab-latex

    365xav.cf/forum.php,jupyterlab-latex#THISISANAUTOGENERATEDFILE.DONOTEDITTHISFILEDIRECTLY.#yarnlockfilev1″@babel/code-frame@^7.0.0″:version”7.8.3″resolved”https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3….

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号