乐趣区

关于android:四步通过Glide实现共享元素无缝转场效果

jiezi

读完这篇文章, 你就会晓得应用 Glide 等图片加载库实现共享元素转场成果，以及如何解决各种可能加载状态。通过共享转场动画，能够晋升利用交互体验，让用户应用起来更愉悦。共享元素转场成果是 Material Design 的一个重要的转场成果. 如果图片资源是动态本地的，那么实现起来是容易的。然而通过网络下载图片并且创立一个无缝的动画成果就比拟辣手了。

开始之前

此篇文章是在开发 Toast App 时，对于转场成果的一个总结. 该 app 是 TOAST – Android 开发者团聚（波兰最大的 Android 开发者团聚网站）的客户端 app. app 中蕴含了每个 TOAST 事件，定期讲座和流动照片。咱们次要用共享元素转场作为页面切换成果。同时应用 Glide 来获取所有的图片。本文中介绍的办法也应实用于其余图像加载库，例如 Picasso 或者 Fresco (您须要找到 Glide 特定性能的绝对应的代码实现). 为此我制作了一个示例演示程序, 公布在 Github 上. 所有代码段均来自此示例程序。咱们应用一组网格图片作为开始. 当用户点击一张图片, 会关上一个新的 Activity，图片会裁剪并填充整个屏幕。上面是应用 Glide 加载图片的相干代码:

fun ImageView.load(url: String) {Glide.with(this)
            .load(url)
            .apply(RequestOptions.placeholderOf(R.drawable.placeholder))
            .into(this)
}

咱们想要的成果：

第一步: 共享过渡

咱们能够通过增加正确 options 来创立过渡成果，批改 goToDetails 办法如下:

MainActivity.kt

fun goToDetails(url: String, imageView: View) {val options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, imageView.transitionName).toBundle()
    Intent(this, DetailActivity::class.java)
            .putExtra(IMAGE\_URL\_KEY, url)
            .let {startActivity(it, options)
            }
}

当初, 咱们在下面的办法中传入要共享的 view，并设置 transitionName。这个名称在每个 activity 中必须是惟一的，主视图和详情页面相对应的 view 的 transitionName 则要雷同，在此为了简化，咱们应用图片 url 作为 transitionName:
DetailActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)
    setContentView(R.layout.activity\_detail)
    val url = intent.getStringExtra(IMAGE\_URL\_KEY)
    detailImage.transitionName = url
    detailImage.load(url)
}

ImageAdapter.kt

inner class ImageViewHolder(view: View) : RecyclerView.ViewHolder(view) {fun bind(url: String) {(itemView as ImageView).apply {load(url)
            transitionName = url
            setOnClickListener {onClick(url, it) }
        }
    }
}

好了, 咱们有了过渡动画如下:

但的是这并不是咱们想要的成果????

第二步: 推延过渡成果

Glide 须要工夫将图片加载到 ImageView. 这就是为什么在 onCreate 中 咱们不得不推延过过渡动画成果，直到图片下载实现才能够开始进行过渡成果:

DetailActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    supportPostponeEnterTransition()
    detailImage.load(url) {supportStartPostponedEnterTransition()
    }
}

GlideLoader.kt

fun ImageView.load(url: String, onLoadingFinished: () -> Unit = {}) {
    val listener = object : RequestListener<Drawable> {override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {onLoadingFinished()
            return false
        }

        override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {onLoadingFinished()
            return false
        }
    }
    Glide.with(this)
            .load(url)
            .apply(RequestOptions.placeholderOf(R.drawable.placeholder))
            .listener(listener)
            .into(this)
}

当初咱们在过渡前图片曾经加载了，但能够看到的是在进入过渡之前以及退出过渡之后会有奇怪的毛刺，咱们将在下一步解决它。第三步: 禁止转换 之所以有这个毛刺成果是因为 Glide 在加载时进行的优化。默认的, Glide 为了匹配指标 view 会调整图片大小并裁剪图片。然而 Android 过渡框架在过渡开始时会从指标视图获取图像，并且将它转换到源视图的图像。咱们能够让 Glide 不进行这些优化:

GlideLoader.kt

`fun ImageView.load(url: String, onLoadingFinished: () -> Unit = {}) {
    ...
    val requestOptions = RequestOptions.placeholderOf(R.drawable.placeholder)
            .dontTransform()
    Glide.with(this)
            .load(url)
            .apply(requestOptions)
            .listener(listener)
            .into(this)
}`

咱们也能够在 Glide 中应用原始图片大小。这会缩小过渡提早，因为原始图片会存在于内存中，不会在磁盘缓存中。留神：此操作会让你的的程序变慢，须要小心应用。

当初能够失常应用了, 但在一些谬误链接图片获取未加载实现但图片就会有一个小问题。

第四步: 仅在 Cache 时传输

咱们要在任何条件下都能够无缝过渡，最简略的形式是从缓存中获取图片 (或者如果图片未加载实现时, 就应用占位图)。

DetailActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    detailImage.load(url, loadOnlyFromCache = true) {supportStartPostponedEnterTransition()
    }
}

GlideLoader.kt

fun ImageView.load(url: String, loadOnlyFromCache: Boolean = false, onLoadingFinished: () -> Unit = {}) {
    ...
    val requestOptions = RequestOptions.placeholderOf(R.drawable.placeholder)
            .dontTransform()
            .onlyRetrieveFromCache(loadOnlyFromCache)
    ...
}

当然，这意味着用户关上详情页面时，在图片加载实现之前，只会显示占位图。它会在过渡完结后通过第二次申请来修复：

DetailActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    window.sharedElementEnterTransition = TransitionSet()
            .addTransition(ChangeImageTransform())
            .addTransition(ChangeBounds())
            .apply {doOnEnd { detailImage.load(url) }
            }
}

最终，咱们有了一个十分棒的过渡转场成果，它能够工作在各种条件下。您能够在 GitHub 上查看整个示例，也能够在 Toast App 中查看更多示例。

相干链接
Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes
Meaningful Motion with Shared Element Transition and Circular Reveal Animation Workcation App – Part 1. Fragment custom transition How to Learn Android Development Programming – 6 Steps for Beginners 6 Misconceptions about TDD – Part 4. There is one right granularity of steps

最初

一点题外话：

咱们有《Android 学习、面试；文档、视频资源收费获取》，可复制链接后用石墨文档 App 或小程序关上链接或者私信我材料支付。

https://shimo.im/docs/TG8PDh9…

退出移动版