我如何学习设计这样的 UI？答案

【问题标题】：How do I learn to design a UI like this?我如何学习设计这样的 UI？
【发布时间】：2014-08-21 11:26:35
【问题描述】：

我最近在使用应用程序Secret 并观察它具有的令人惊叹的用户界面。 如果您正在打开 Secret 的网页，请向下滚动一点以查看 UI。

作为一个仍然是 Android 新手并想学习的人，我想问一下这个 UI 是如何设计的。我可以在这篇文章中提出很多问题，但我会暂时把自己限制在一个。

当您单击其中一个图块时，它会打开并显示该特定图块的 cmets。下方和上方的其他图块消失。当您再次单击图块时，它会平滑地动画回到其位置，并且上方和下方的图块会出现。这是如何实现的？

到目前为止我尝试过什么？什么都没有，因为这是一个“我从哪里开始？”问题。

【问题讨论】：

无非就是一个自定义的 ListView...
@FrankN.Stein 那么让我们把它变成现实吧。更多:)
这里有一个关于自定义 ListView 的教程。它的行使用一个 ImageView 和两个 TextView。在您的情况下，该行应该被设计为在上面有一个大图像，中间有一个 Text，底部有一些控件 - RelativeLayout 将是一个完美的容器。 theopentutorials.com/tutorials/android/listview/…

标签： android user-interface

【解决方案1】：

关于布局：您可能会发现使用层次结构查看器很有帮助，它提供了捕获 UI 层并将它们存储在 Photoshop 文件中的功能。这可以让您很好地了解您的特定应用程序的布局是如何创建的以及使用了什么样的视图。

关于动画：查看 Chet Haase 和 Romain Guy 的视频，他们详细讨论了图形和动画。

【讨论】：

【解决方案2】：

您可以从 Android 培训指南开始。

This one 是使用媒体和动画进行设计的概述，但this one 使用 ViewPager 来实现您想要的效果。

【讨论】：

【解决方案3】：

这可能是自定义活动转换的一个实例（并且是一个特别完善的实例）。

一般情况下，你可以使用overridePendingTransition()来指定当前activity改变时必须运行的动画（一个经典的例子是从一个方向滑入一个新的Activity，而前一个Activity从相反的方向退出）。但是，这些转换通常不共享 UI 元素。

Chet Haase 已经完成了一些 DevBytes（特别是 this one）来“模拟”在调用者和被调用活动之间共享 UI 元素（即视图）的活动转换。例如，如果您有一个画廊，并且您单击图像以全屏显示，您可能希望图像平稳地“增长”直到它占据这个新位置。实现这一点的诀窍是实际上完全禁用标准转换，并在用于启动活动的Intent 中包含有关您要“共享”的视图的当前位置和尺寸的信息：

Intent subActivity = new Intent(this, PictureDetailsActivity.class);
subActivity.putExtra(PACKAGE + ".left", screenLocation[0]);
subActivity.putExtra(PACKAGE + ".top", screenLocation[1]);
subActivity.putExtra(PACKAGE + ".width", v.getWidth());
subActivity.putExtra(PACKAGE + ".height", v.getHeight());

startActivity(subActivity);
overridePendingTransition(0, 0);

因此，新的活动可以提取这些数据，并利用这些信息和视图应该在屏幕上的什么位置结束的知识，可以构建和执行模拟所需效果的动画。

如果你想要一个复杂的动画，这个技术可能很难实现，所以在 Android L 中它被嵌入到平台本身中：Activity Transitions 可以自动处理这个并提供一些内置的作用于剩余（即非共享）视图的动画。例如，explode 过渡似乎与您描述的非常相似。

【讨论】：

我阅读了发表的评论。这可以通过自定义列表视图轻松实现吗？我的意思是，getView() 魔法？单击时，列表项将移至顶部。每个列表项都有一个ViewStub，它变得可见等等？
@LittleChild 我不确定“容易”部分。这不是火箭科学，但也不是最简单的任务。 :/ 我建议你看看 DevByte 以更好地理解这项技术。