我如何学会设计这样的用户界面？ [英] How do I learn to design a UI like this?

问题描述

我最近使用的应用程序 揭秘 并是观察惊人的用户界面，它有。 如果您要打开秘密的网页，请向下滚动一点点地看到用户界面。的

I was recently using the app Secret and was observing the amazing user-interface that it has. If you are opening Secret's webpage, please scroll down a little to see the UI.

被别人谁仍是一个新手，在Android和想学习，我想问一下怎么说UI的设计。我问了很多在这一个职位很多问题，但我会限制自己只是一个现在。

Being someone who is still a novice in Android and wants to learn, I would like to ask how that UI has been designed. I could ask a lot many questions in this one post but I will limit myself to just one for now.

每当你点击这些瓷砖之一，它打开了，并显示该特定瓦片的评论。下方和上方的其他瓦片消失。当您再次在瓷砖上按一下，就顺利动画回到它的位置，上方和下方的地砖映入眼帘。这是如何实现的？

Whenever you click on one of those tiles, it opens up and shows the comments for that particular tile. The other tiles below and above disappear. When you click on the tile again, it smoothly animates back to its position and the tiles above and below come into view. How is this achieved?

有什么我想这么远吗？的没有什么，因为它是我在哪里开始？的问题。

What have I tried so far? Nothing, because it is a "where do I begin?" question.

推荐答案

这可能是一个自定义活动转变（和特别抛光的一种）的一个实例。

This is probably an instance of a custom activity transition (and a particularly well polished one).

在一般情况下，你可以使用<一个href="http://developer.android.com/reference/android/app/Activity.html#overridePendingTransition%28int,%20int%29"相对=nofollow> overridePendingTransition（） 指定在当前的活动改变必须运行的动画（一个典型的例子是滑动的新活动从一个方向，而在相反方向上的previous活性退出）。然而，这些过渡通常不共享UI元素

In general, you can use the overridePendingTransition() to specify an animation that must be run when the current activity is changed (a classic example is sliding in a new Activity from a direction, while the previous Activity exits in the opposite direction). However, these transitions generally do not share UI elements.

切特·哈泽做了一些DevBytes（尤其这个 ），以模拟的活动转变了的共享主叫和被叫活动之间的UI元素的（即视图）。例如，如果你有一个画廊，并单击图片以显示它的全屏，你可能会希望图像成长顺利，直到它占据这个新的位置。实现这一目标的关键是要真正的禁用标准的过渡完全的，包括在意图用于启动活动有关当前位置的信息和所需的视图尺寸共享：

Chet Haase has done a few DevBytes (in particular this one) to "simulate" an activity transition that shares an UI element (i.e. a view) between the caller and called activities. For example, if you have a Gallery, and you click on an image to show it full-screen, you would probably want the image to "grow" smoothly until it occupies this new position. The trick to achieve this is to actually disable the standard transitions entirely and include in the Intent used to start the activity the information about the current position and dimensions of the view that you want to "share":

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);

因此​​，新的活动可以提取该数据，并用该信息和知识的其中屏幕上的视图应该结束的，可以构建和执行模拟所期望的效果的动画。

Therefore, the new activity can extract this data, and with this information and the knowledge of where on the screen the view should end up, can build and execute an animation that simulates the desired effect.

所以在安卓→的这被烤成的平台本身这种技术可能很难实现，如果你想有一个复杂的动画，：的活动转变可以自动处理这一点，并提供了一​​些内置的动画作用于剩余（即非共享）的意见。例如，爆的转变似乎非常像你描述的那个。

This technique can be difficult to implement if you want a complex animation, so in Android L this was baked into the platform itself: Activity Transitions can handle this automatically and provide a few built-in animations to act on the remaining (i.e. non shared) views. For example, the explode transition seems to be very much like the one you describe.

这篇关于我如何学会设计这样的用户界面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！