原文链接 : Music Player: From UI Proposal to Code（需科学上网）
原文作者 : André Mion
译者 : Siegen
一些开发者在遇到稍显复杂的UI方案时,会觉得很难编码实现。他们中的许多人会在写代码的时候跳过重要的UI或者动画，这导致最终的效果和原始方案相差甚远。
本文主要谈论的是针对一个UI方案如何编码的过程，在这个过程中跳过了一些基本的Android细节，主要聚焦于UI的过渡和动画上。
*** MaterialUp***
这是一个很棒的网站，设计师与开发者能够在这里找到和分享用于构建Material Design网站或app的资源。这里有许多用户界面设计，有趣的试验，开源app，库以及一些在Android，Web或者iOS上都很好用的产品。
浏览这个网站你可以找到这个由Anish Chandran创建的名为 Music Player 的用户界面资源。
这个设计方案给了我们一个好例子，它展示了一个音乐播放应用该如何以流畅和连续的方式运用Material和Motion 设计。
热身#
首先，我们需要做一些准备工作。
a. 把动态方案分解成帧
把动态方案文件转换成一个个单独的帧。这可以帮助我们查看动画与过渡的每一个步骤。
b. 按类型分解
我们有许多的视图都会有动画与过渡同时进行的情况，同时去思考这些内容，会让写代码变得非常的困难。我们可以把这些过渡与动画按照类型分解，比如：view滑动到底部，view淡出，view过渡到新的Activity，等等。
不管有没有动画，接下来的这个建议都值得在每一个布局中采用。
c. 简化你的视图结构
创建一个尽可能简单的视图结构，避免在同一个布局里使用过多的容器ViewGroup。这样可以使过渡动画的设计变得简单，使得维护起来更加方便，而且这样做会大幅度的提高应用在动画过程中的运行性能。
魔法是怎样发生的
在布局文件中，一些ViewGroup已经把 android:transitionGroup属性设置为true，这样可以让ViewGroup在Activity Transition期间被作为一个整体对待。比如这里的播放列表容器(main layout file)和控制按钮容器(detail layout file)。
<RelativeLayout
android:id="@+id/playlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/cover"
android:gravity="center_vertical"
android:padding="@dimen/activity_vertical_margin"
android:transitionGroup="true">
…
<LinearLayout
android:id="@+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:transitionGroup="true"
app:layout_marginBottomPercent="5%">
…
在styles.xml 中有我们在 MainActivity 和Detail Activity里面使用的主题.
-
AppTheme.Main
<item name="android:windowSharedElementsUseOverlay">false</item>
禁用共享元素视图的overlay。在 Music Player的布局中我们需要在shared element view从Main Activity到Detail Activity移动的时候禁用overlay。如果它是启用的，某些共享元素视图可能会以错误的方式覆盖到其它view上。
<pre><code><item name="android:windowExitTransition">@transition/list_content_exit_transition</item>
<item name="android:windowReenterTransition">@transition/list_content_reenter_transition</item>
</pre></code>
列表内容的退出和进入具有相同的过渡方式。
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@integer/anim_duration_default"
// 1
android:startDelay="@integer/anim_duration_default">
// 2
<fade>
<targets>
<target android:targetId="@id/pane" />
</targets>
</fade>
// 3
<slide android:slideEdge="bottom">
<targets>
<target android:excludeId="@android:id/statusBarBackground" />
<target android:excludeId="@id/pane" />
<target android:excludeId="@android:id/navigationBarBackground" />
</targets>
</slide>
</transitionSet> ```
1. 设置一个延迟让这些过渡和FAB的渐变动画保持同步。
2. 通过targetId属性指定的pane视图淡出或者淡入。
3. 把RecyclerView和播放列表滑倒底部，并使用excludeId属性把状态栏，pane以及navigation bar 排除在外。
<pre><code><item name="android:windowSharedElementExitTransition">@transition/list_shared_element_exit_transition</item>
<item name="android:windowSharedElementReenterTransition">@transition/list_shared_element_reenter_transition</item></pre></code>
播放按钮退出和重新进入的transition方法几乎相同。
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:duration="@integer/anim_duration_default">
// 1
<transition
class="com.sample.andremion.musicplayer.transition.PlayButtonTransition"
app:mode="play|pause" />
</transitionSet>
1.[PlayButtonTransition](https://github.com/andremion/Music-Player/blob/master/app/src/main/java/com/sample/andremion/musicplayer/transition/PlayButtonTransition.java) 是一个自定义的transition，它封装了一个[AnimatedVectorDrawable](https://github.com/andremion/Android-Animated-Icons) 来把播放按钮变为暂停或者反过来操作，这取决于mode的值。
* AppTheme.Detail
<pre><code><item name="android:windowEnterTransition">@transition/detail_content_enter_transition</item>
<item name="android:windowReturnTransition">@transition/detail_content_return_transition</item>
</pre></code>
详情内容页的进入和返回具有相同的transition方法。
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@integer/anim_duration_default">
// 1
<fade>
<targets>
<target android:targetId="@id/ordering" />
</targets>
</fade>
// 2
<slide android:slideEdge="bottom">
<targets>
<target android:targetId="@id/controls" />
</targets>
</slide>
</transitionSet>```
播放按钮容器按targetId属性指定的顺序淡出。
通过targetId属性指定，控制按钮容器滑到底部。
为transition的变化率定义一个interpolator，可以是非线性的。
ProgressViewTransition是一个自定义的transition，使用ProgressView 来实现从水平进度到弧形进度的变换。
CoverViewTransition 是另一个自定义的transition，使用CoverView 实现方形封面到圆形轨道线封面的变换。
对其他的共享元素使用默认的transition。
<pre><code><item name="android:windowSharedElementReturnTransition">@transition/detail_shared_element_return_transition</item></pre></code>
在这个transition中，我们使用和上面的detail_shared_element_enter_transition几乎相同的方法。不过对每部分添加了一些延时来配合UI上的效果。
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:duration="@integer/anim_duration_default"
android:interpolator="@android:interpolator/accelerate_quad">
// 1
<transitionSet>
<changeBounds />
<changeTransform />
<changeClipBounds />
<changeImageTransform />
<transition
class="com.sample.andremion.musicplayer.transition.ProgressViewTransition"
app:morph="1" />
<targets>
<target android:targetId="@id/progress" />
</targets>
</transitionSet>
// 2
<transitionSet android:startDelay="@integer/anim_duration_short">
<changeBounds />
<changeTransform />
<changeClipBounds />
<changeImageTransform />
<transition
class="com.sample.andremion.musicplayer.transition.CoverViewTransition"
app:shape="circle" />
<targets>
<target android:targetId="@id/cover" />
</targets>
</transitionSet>
// 3
<transitionSet android:startDelay="@integer/anim_duration_default">
<changeBounds />
<changeTransform />
<changeClipBounds />
<changeImageTransform />
</transitionSet>
</transitionSet>```
1. 使用相反的“变换”模式，从弧形进度到水平进度。
2. 使用相反的“变换”模式，从圆形封面到方形封面。
3. 对其他的共享元素使用默认的transition。
##最终结果
 coded by [André Mion](https://github.com/andremion)
](https://lh4.googleusercontent.com/kECd5Aw-Cr8ZllQaKX9wJf3TZTd5DmDArmBkFVpBbXtT9D4mGXgZlsSjSYH91oibOi9hv51jJ9XbjsMfcOZi8Zwrz_5pRs52ybKTRjAvCtDUk-RZGDFaRLNUMDd7YZLS6WXxmO0e)
最终的结果应该是这样。当然，在最终的项目中可能会漏掉一些小细节，不过这都是小事情。
完整的项目可以在[https://github.com/andremion/Music-Player ](https://github.com/andremion/Music-Player)找到。
你也可以在下面的链接阅读到更多关于Android上 meaningful motion的信息。
[Applying meaningful motion on Android](https://blog.prototypr.io/applying-meaningful-motion-on-android-a271a873bd78)
玩的愉快 ;)