[译]Android Material 搜索框实现详细说明

关于我的应用,我收到了一些用户的反馈,他们反馈最多的是缺少搜索功能。对于像 Memento Calendar 这种囊括了诸如社交时间,纪念日,银行休假日,信息来源错综复杂的应用,我很赞同搜索是这个应用最重要的功能之一。问题是这个功能已经被实现了。Toolbar 里的一个搜索图标引导用户到一个搜索界面。

A user can search by tapping the search icon on the Toolbar
A user can search by tapping the search icon on the Toolbar

我决定调研一些用户来看看问题究竟是什么。在和这些幸运的用户通过邮件往来交流了一番后,我总结出下面的内容:

人们似乎更加习惯于其他流行应用中的搜索栏,例如 Facebook,Swarm 以及其他的应用。在上述的应用中,搜索栏可以直接通过 Toolbar 访问到,这意味着用户可以从主界面开始搜索。

因为搜索的逻辑已经在应用里实现了,我有充裕的时间来尝试使用 Android 的动画 API 为我的应用增添生气。

试验的进程

这个点子是利用 transition 来衔接已经包含搜索栏的主界面,以及拥有神奇搜索功能的搜索界面。

从一个视图设计的角度,我想要这个 transition 尽可能的相似以便于用户可以聚焦于搜索,感觉不到他们正在看一个新的界面。从一个视图开发的角度,两个界面(Activities)不得不保持分离。每一个 Activity 处理它们自己的事务,从维护的角度来说把它们联合在一起完全是一个噩梦。

因为这是我第一次使用 Transition,我不得不做一些阅读。我觉得 Nick Butcher 和 Nick Weiss 的
有意义运动的谈话视频对我理解新的 API 是怎样工作的很有帮助,并且这个视频里的幻灯片曾经是(现在仍然是)我处理 Transition 相关内容的核心备忘单。

一个类似于我想要实现的特效可以在 Android 手机应用市场里被找到。一旦用户点击了搜索栏,当前的界面就会逐渐消失,搜索栏变大,用户可以开始搜索了。

The transition as seen in the Dialer app
The transition as seen in the Dialer app

不幸的是这个应用的实现跟我预期的完全不一样。所有的事情都是在一个单独的 activity 里完成的。即使这确实行得通,但我不喜欢把几个功能结合在一起,我希望在未来可以更加灵活的更新应用的设计。虽然这个实现不完全是我想要的,但是关于下一步我该怎么走,我从中获得了一个好主意。

我把期望的 transition 分解成三个简单步骤:

  1. 让 toolbar 的内容渐隐

  2. 把 toolbar 框变大

  3. 让内容逐渐显示回来。

这些步骤可以很容易的通过 TransitionManager 类来实现。通过简单调用 TransitionManager.beginDelayedTransition() ,然后修改这个视图的属性。这个框架会自动的把这些改变应用到视图里。这对搜索栏的扩展和折叠都起作用。渐隐的效果也是用这种方式实现的,但是我们所做的却是正在改变多个视图的可视性。现在唯一欠缺的事是如何在一个操作步骤里实现无缝隙地跳转到搜索 activity。

幸运的是,我记得在一个 Android 开发者视频里见过类似的东西。在名为 DevBytes: Custom Activity Animations 的视频里 Cheet Haase 展示了在 activity 开始或是结束的时候如何覆写系统的动画。最后一点,这点也很重要,我们可以对这个Transition 进一步的修饰让它进行的更快,在 Transition 一开始的时候就显示出键盘。实现这个的简单方式是在应用的 Manifest 文件里声明正确的 windowSoftInputMode。通过这种方式,当第二个 activity 开始的时候键盘就变得可见了。

最终的结果

综上所述,下面的结果被实现了。

The transition as seen in Memento Calendar
The transition as seen in Memento Calendar

你可能想知道这个设计决定是否真的有效。我对这个设计很满意,因为它为我的应用带来了额外的 30% 搜索量。这可能意味这个设计让用户更易于搜索,也可能用户喜欢这个动画效果。😄


还有一些细微的 UX 提升还可以去实现来达到一个更好的效果,例如返回按钮图标的颜色,或者是当用户返回的时候,如果没有在搜索栏里填入搜索内容,就把 activity 结束掉。如果你对学习如何实现此类的效果感兴趣的话, Memento Calendar 是开源的 你可以来看看这个应用里这块内容的实现原理。你可以在 github.com/alexstyl/Memento-Namedays 获得源码或者从 Google Play Store 下载这个应用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容