一、简介

对于一个App来说，优秀的UI设计和交互设计无疑可以吸引更多的用户，作为一个安卓工程师，提升用户体验也是一个比较重要的部分。下面我会结合最近开发的一个第三方开眼客户端项目，来盘点一下开发中那些让App变得Awesome的工具和开源库。我会从沉浸式体验，Behavior，动效，页面刷新等方面一一介绍，最后我会放上项目的Github地址和App的酷安下载地址。Github里有抓包获取的最新的开眼api，欢迎大家star，fork和下载体验。

二、沉浸式体验

所谓沉浸式，就是对状态栏进行操作，或是半透明，或是全透明。如下图所示，在播放详情页，我们需要将状态栏彻底隐藏起来。我们只需要在Activity中onCreate()方法中插入如下代码：

window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                or View.SYSTEM_UI_FLAG_FULLSCREEN
                or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY)

网上对于这方面的文章已经很多，我就不一一赘述，这里我附上一篇讲解比较详细的博客和一个很方便的一个库。

Android关于沉浸式状态栏总结

轮子StatusBarUtil

三、Behavior

在谷歌2014年发布Material Design语言以来，最核心的布局就是CoordinatorLayout，使用这个布局可以很轻松的控制其内部的组件进行联动，产生这种效果主要用到了app:layout_behavior这个属性。我们可以利用自定义Behavior完成很多联动，如下图所示：

如上图所示，我们可以让滑动事件与各种控件交互，图一CardView的交互，图二与FloatingActionBar的交互，和图三仿知乎效果。都会让界面变得更加有活力。以图一为例，我们观察到CardView会随着CollapsingToolbarLayout而上下滑动但是速度并不同步，而且透明度也在变化。相信大家都对CollapsingToolbarLayout的使用了如指掌，我们这里重点分析一下CardView，下面是xml代码：

    <androidx.cardview.widget.CardView
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:layout_anchor="@id/topic_appbarlayout"
        app:layout_anchorGravity="center|bottom"
        app:cardElevation="1dp"
        app:layout_behavior=".ui.behaviors.CardViewScrollBehavior">
   </androidx.cardview.widget.CardView>

其中最重要的属性就是 app:layout_anchor="@id/topic_appbarlayout"和app:layout_anchorGravity="center|bottom"，不难理解，这里我们相当于把CardView固定在appbarlayout的中底部，接下来我们来自定义我们的Behavior，代码如下：

class CardViewScrollBehavior : CoordinatorLayout.Behavior<View> {
    val appBarHeight = 280
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    override fun layoutDependsOn(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        return dependency is AppBarLayout
    }
    override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        val alpha = (dependency.bottom - appBarHeight).toFloat() / (dependency.height - appBarHeight)
        child.alpha = alpha
        child.translationY = -((1 - alpha) * child.height) / 2
        return true
    }
}

代码的确只有这么一点，因为谷歌爸爸把很多东西都封装好了，对于这种一个控件依赖于另一个控件的联动，我们主要需要重写layoutDependsOn()和onDependentViewChanged()这两个方法，第一个方法中我们返回我们所依赖的目标View，这里我们返回的是AppBarLayout，在第二个方法中参数dependency便是我们返回的AppBarLayout，而child指的是我们需要随着目标view变动的view，在这里我们就可以进行透明度和位移的调整，从而达到图中的效果。

这里我附上讲解比较详细的三篇博客：

Android 一步一步分析CoordinatorLayout.Behavior

Behavior实现知乎首页效果

UI之自定义Behavior实现AppBarLayout越界弹性效果

四、动效

在交互设计中，动效是提高用户体验的一个关键点，控件可以随着交互发生透明度，大小等变化，如下图所示。

这里我推荐一个recyclerview的动效框架

用法Readme里讲的很清楚了。对于图片加载我们也可以进行渐变加载，不要让他突然显示，会显得比较突兀，在Glide中只需要一句话便可以完成了。 Glide.with(mContext!!).load(model.data.cover.detail).transition(DrawableTransitionOptions.withCrossFade(500)).into(holder.videoItemCover)

除了滚动特效外，还有点击动画，比如点赞效果等。如下图所示

完全使用代码完成这个动效可能会很复杂和困难，这里Airbnb开源了一个设计和代码无缝衔接的框架，我们只需要在AE中做出动效，然后生成json文件，便可以导入Android Studio中使用了，不过可能有的同学会发问，周边也没有设计，不会使用AE怎么办呢?Airbnb这里提供了已经做好的一些十分精美的动画，直接就可以下载json文件了。

LottieFiles

简单使用