[译]Music Player:从UI方案到代码实现（Andro

作者: siegen | 来源:发表于2016-07-25 20:49 被阅读965次

原文链接 : Music Player: From UI Proposal to Code（需科学上网）
原文作者 : André Mion
译者 : Siegen

（译者注：这是github最近很火的一个项目，目前star人数1800 。在原作者的帮助与支持之下，完成了这篇译文，希望对大家能有所帮助。）

一些开发者在遇到稍显复杂的UI方案时,会觉得很难编码实现。他们中的许多人会在写代码的时候跳过重要的UI或者动画，这导致最终的效果和原始方案相差甚远。

本文主要谈论的是针对一个UI方案如何编码的过程，在这个过程中跳过了一些基本的Android细节，主要聚焦于UI的过渡和动画上。

* MaterialUp*

这是一个很棒的网站，设计师与开发者能够在这里找到和分享用于构建Material Design网站或app的资源。这里有许多用户界面设计，有趣的试验，开源app，库以及一些在Android，Web或者iOS上都很好用的产品。

[Music Player](https://dribbble.com/shots/1850527-Music-Player-Transition) transition by [Anish Chandran](https://dribbble.com/anish_chandran)

浏览这个网站你可以找到这个由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>

![](https://lh6.googleusercontent.com/qvzqNccKcVP1rkIZrhcTbS4t8e2vMGlFixh9lwNIKFjI40mRsGCjw31V5xxCTUnQ0wyrmiG592dyW3L1IdcVYxIQ-Txr94G6EjEb12HkhC-rZgM4BwD-iAWOfbwOitJgoWL6m-ea)
播放按钮退出和重新进入的transition方法几乎相同。

// 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>
![](https://lh4.googleusercontent.com/rfmnoIfP4-vJ_I-yb1Jonbb3L1DZ4OLLuf6HwyUgXFHzgdK8h_Ius1rQImaJaEKZ-WXjfIAsfWKr-ilxDK_hyWCIVqXchLWuECCbN66GnEBBgfu7WhrIXskE0a1rAyL-YYa96U7V)
详情内容页的进入和返回具有相同的transition方法。

// 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。

##最终结果
![[Music Player](https://github.com/andremion/Music-Player) 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)

玩的愉快 ;)

网友评论

本文标题：[译]Music Player:从UI方案到代码实现（Andro

本文链接：https://www.haomeiwen.com/subject/zbzgjttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

[译]Music Player:从UI方案到代码实现（Andro

* MaterialUp*

热身#

a. 把动态方案分解成帧

b. 按类型分解

c. 简化你的视图结构

魔法是怎样发生的

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android开发经验谈

程序员

Android知识

[译]Music Player:从UI方案到代码实现（Andro

*** MaterialUp***

热身#

a. 把动态方案分解成帧

b. 按类型分解

c. 简化你的视图结构

魔法是怎样发生的

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android开发经验谈

程序员

Android知识

* MaterialUp*