--- theme: devui-blue highlight: atelier-forest-light --- # 前言一直想花时间复刻学习一下Apple产品的原生UI和动画，超级丝滑。今天，目标是AppStore首页的卡片流及其转场动画。 > 需要注意的是，若从静态布局、动态切换效果（动画函数曲线、模糊处理）、细节呈现等维度去评估这次复刻的结果，本篇文章仅实现了其中最主要的部分，后续有相当的优化空间。 ### AppStore及Android实现效果预览 ~~（视频转GIF导致像素压缩的比较厉害，还望见谅）~~ 1. AppStore官方的卡片切换效果： ![ios_present_gif.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/506b0af8281041eb8559c2b65e9854cf~tplv-k3u1fbpfcp-watermark.image?) 一个字，丝滑；且关闭卡片详情页的动画是可以用触摸操作打断的。 2. 本文用Android复刻的卡片切换效果： ![android_present_gif.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49243cca47cc4364958ff6860f2ea2bb~tplv-k3u1fbpfcp-watermark.image?) 最终实现不包含左侧滑动返回上一个页面的功能，且仍存在相当多可优化的细节，有很长的路要走。😥 # 1. 页面内容分析在开始前，我们不妨先仔细观察一下这个页面所涵盖的信息，再将其转换为我们的业务需求，提前整理好思路再开始上手写。我们边观察，边零碎地拎出基础实现思路，从现在开始会逐步提起一些Android关键词。 ## 1.1 静态布局

*上图分别为AppStore主页、卡片详情页* 我们先看静态布局涵盖的内容，整个AppStore首页其实主要由两个页面组成： 1. **首页** + 页面内容：**相同尺寸的卡片组成的卡片流**，每个卡片涵盖了这个页面的基础信息(主副标题、摘要、背景图) + 卡片的样式需求：**四周阴影**、**卡片圆角**、**展示背景图**、**内容扩展（后续添加正文）** 我们很自然地想到可以用``CardView``来实现这一需求，阴影可以借助``elevation``来设定，圆角可以用``cornerRadius``，展示背景图与内容拓展可以通过在其中添加``LinearLayout``和``ScrollView``来实现。嗯，很合适。此外，卡片流可以借助``RecyclerView``来承载，每一个``ViewHolder``都装着一个``卡片``，我们通过ArrayList来存储所有卡片的标题、摘要、背景图ID，这样就可以实现卡片流了。 2. **卡片详情页** + 页面内容：**复用**了首页卡片的所有元素，并将卡片展开，添加了正文进去。此外，有一个固定在右上角、不随ScrollView变动的页面关闭按钮。从视觉效果上来看，详情页只是卡片的一个复制，但添加了一个正文部分；从实现的角度上来看，我们也用一个``CardView``来作为详情页的基础，但在其中添加一个**ScrollView作为正文的承载**。这会方便我们实现后续的**共享元素动画**。看完静态页面，我们来整理一下思路： 1. 首先，我们创建卡片的基础样式，我们将其命名为***article_card_layout.xml*** 2. 接着，我们准备两个``Fragment``，其中，***HomeFragment***用于首页的卡片流，***DetailFragment***用于详情页的卡片流。 3. ***HomeFragment***中涵盖了一个RecyclerView，其ViewHolder中的itemView，就是我们上述创建的***article_card_layout***. 4. ***DetailFragment***将作为我们**不断复用的对象**，我们设置每个卡片的**点击监听事件**，在每张**卡片被点击的时候**，我们就确认了即将跳出的详情页的所有元素的内容，随及把数据加载进去，并渲染动画、开启这个新的页面。整体结构如下图所示： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af7519e039df4e63a7a6784a8499cf17~tplv-k3u1fbpfcp-watermark.image?) ## 1.2 页面切换动态效果我们先来看慢放5倍的AppStore**卡片开启的动画效果**： ![ios_open_slow_gif.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7602f8cdc8c8448c9f54266c58596685~tplv-k3u1fbpfcp-watermark.image?) 整体来看，就像是一张卡片的下端被慢慢拉长展开，跳出到我们眼前。在这里，我们来仔细观察，这个动画里有哪些需要我们处理的内容： + **共享元素**：卡片内的背景、主副标题等都应该自然地过渡到详情页中；这需要我们借助**共享元素动画**。详间Link：[使用过渡为布局变化添加动画效果 | Android 开发者 | Android Developers (google.cn)](https://developer.android.google.cn/training/transitions) + **卡片尺寸与轮廓**：卡片被点击/触摸的瞬间会首先缩小，然后弹出，**整体动画的视觉效果形如弹簧**，我们可以借助Android自带的**动画插值器 OverShootInterpolator**来实现形如弹簧的动画曲线；我们使用共享元素动画中的````与````来实现卡片尺寸、轮廓的变化。 + **卡片的圆角Corner**：卡片的Corner会逐步减小到0，这需要我们自己来实现。 + **首页其他卡片的模糊效果**：在点击卡片后，主页的其他元素会逐步变模糊，以此来突出主体。 # 2. 页面实现 > 思路理完，我们开写。为了保证文章的可读性，这里的代码都会只放核心部分，对代码确有需要的同学可以到文章末尾获取。我们将沿着前文理出的思路，一步步进行。 ## 2.1 卡片流&卡片详情页的静态布局制作 1. 首先，创建我们的卡片(***article_card_layout.xml***)，如前文提到，我们将使用CardView作为基础载体 + 创建一个CardView： + 默认的elevation=2帮助我们实现了阴影 + 设置cardCornerRadius=14dp，实现卡片的圆角效果 + 在CardView内部创建一个LinearLayout + 在其内部创建三个TextView，用于分别承载主副标题与摘要 + 将这个LinearLayout的backGround作为我们背景图的容器，我们先放一个默认的进去。至此，我们拥有的xml结构及其预览效果如下：

2. 创建***HomeFragment***，处理最重要的**RecyclerView** + 我们创建RecyclerView所需的Adapter及ViewHolder + 我们先创建一个数据类，ArticleCardData，用来存储每一个卡片的文字内容和背景图ID；当然，这里面也可以放任何你希望卡片能够方便被自定义的内容。 ```kotlin data class ArticleCardData( val backGroundImage: Int = R.drawable.testimg, val cardTitle: String = "Latest", val mainTitle: String = "Extraordinarily,\nundefeated.", val rootText: String = "i-Sense makes life better.", val contentText: String = "", val mainTitleColor: Int = Color.parseColor("#fafdfb") ) ``` + 我们需要ViewHolder每次在执行绑定(onBindViewHolder)的时候，把文章的主副标题、背景等都加载进去 + 初始化RecyclerView，设置adpater，layoutManager等。在这里，需要注意的是，RecyclerView中，如果希望能够实现每一个Item的上下左右间距，我们需要自己去创建一个**ItemDecoration**类来把item装进去，来实现间距效果。 ```kotlin class CardItemDecoration : RecyclerView.ItemDecoration() { private val itemSpaceDistance = 24f.dp.toInt() private val horizontalSpace = 18f.dp.toInt() override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) { super.getItemOffsets(outRect, view, parent, state) outRect.apply { this.left = horizontalSpace this.right = horizontalSpace this.bottom = itemSpaceDistance } if (parent.getChildAdapterPosition(view) == 0) { outRect.top = itemSpaceDistance } } } ``` + 给每一个卡片创建点击事件，跳转到DetailFragment，并将卡片对应的数据加载进去：这里，我使用ViewModel来实现Fragment之间的数据传输：将ViewModel的Provider设置为Activity，这样我们的ViewModel生命周期就跟随着Activity变化，以此帮助我们实现数据传输。 1. 初始化ViewModel，让其生命周期跟着activity走 ```kotlin //我们在HomeFragment.kt articleCardViewModel = ViewModelProvider(activity).get(ArticleDetailViewModel::class.java) ``` 2. 在这个activity内的任意fragment内，用同样的方式，获取这个viewModel ``` //我们在DetailFragment.kt viewModel = ViewModelProvider(activity!!).get(ArticleDetailViewModel::class.java) ``` 3. 卡片点击事件：当前卡片向viewModel传入这个卡片的值，随后由DetailFragment接收，它就能在渲染自身页面的时候获取这些值了，并成为了那个卡片的详情页。 ```kotlin //给recyclerView的每个Item添加点击事件 override fun onItemClick(viewHolder: RecyclerView.ViewHolder?) { var position = cardRecyclerView.getChildLayoutPosition(viewHolder!!.itemView) GlobalScope.launch(Dispatchers.Default) { //更新主副标题、摘要等 articleDetailViewModel.articleCardData = cardArray[position] //更新背景图片 articleDetailViewModel.updateBackGroundImage(resources, activity!!) //传入当前item的位置，position articleDetailViewModel.position = position.toString() } //使用Navigation跳转至下一个页面。 } ``` DetailFragment的布局在***article_detail_layout.xml***的基础上，外部添加了一层ScrollView来展示比较长的正文，并在内部添加了contentText的TextView，整体结构与预览如下所示：

DetailFragment接收数据，并渲染自己的画面： ```kotlin //in DetailFragment.kt //viewModel中传入的卡片相关数据 viewModel.articleCardData.apply { view.findViewById(R.id.mainTitle).text = this.mainTitle view.findViewById(R.id.cardTitle).text = this.cardTitle view.findViewById(R.id.rootText).text = this.rootText view.findViewById(R.id.mainTitle).setTextColor(this.mainTitleColor) //设置正文 if (this.contentText != "") { view.findViewById(R.id.contentText).text = this.contentText } //设置背景图 view.findViewById(R.id.cardLinearLayout).background = viewModel.backGroundImage } view.findViewById(R.id.backGroundCard).transitionName = "backGroundCard${viewModel.position}" ``` + 至此，我们完成了静态页面的布局。最后，再用图片的形式梳理一下流程！ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/269b199cb8a541aa9b4b15731554f945~tplv-k3u1fbpfcp-watermark.image?) ## 2.2 卡片与详情页之间的转场动画终于到了最有意思的部分，这一环节我们请出最核心的角色：``SharedElementTransition共享元素动画`` ### 共享元素动画的使用介绍 > 共享元素动画的官方介绍请跳转：[使用过渡为布局变化添加动画效果 | Android 开发者 | Android Developers (google.cn)](https://developer.android.google.cn/training/transitions) > 附一个用得比较多的共享元素动画库：[Material-Motion](https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md#customization) 这里，我用自己的方式介绍一下： + 共享元素动画既可以用于Fragment间，也可以用于Activity间，使用起来是相当便捷的，**只需要保证共享元素在两个Fragment的TransitionName一致，并在跳转前将其绑定即可。** + 在这个切换过程，我们可以指定一个Transition动画来实现我们想要的效果，比如Fade()可以渐入渐出，ChangeTransform()实现尺寸变化。 + **Transition动画的底层是属性动画**，他会获取FragmentA中共享元素的某个值**作为起点**，比如位置x=0,y=0，再获取到FragmentB中共享元素的位置x=100,y=100**作为终点**，接着执行一个属性动画，来让这个共享元素平滑地转移过去。 + 知道了这个原理，我们可以很轻松地自定义Transition，只需要重写几个方法，控制我们需要的起点和终点的值，再定义我们想要的属性动画就好。具体可以见官方文档：[创建自定义过渡动画 | Android 开发者 | Android Developers (google.cn)](https://developer.android.google.cn/training/transitions/custom-transitions) ### 在RecyclerView中，让Item作为共享元素进行动画在上面我们提到，想要执行属性动画的前提，是让两个Fragment的共享元素拥有相同的TransitionName，在RecycerView中，我们这样操作： 1. 在创建这些卡片流的时候，我们给**每个卡片的TransitionName赋值为"shared_card${position}"**，position使它的位次，以此保证他们的TransitionName是独一无二的。 2. 接着，我们在卡片被点击后，**给DetailFragment传入当前被点击卡片的TransitionName**，并让DetailFragment修改自己的那个卡片组件的TransitionName为"shared_card${position}" 如此，我们便实现了绑定。
接着，便是让每个Item的点击事件添加一条Navigation跳转！（当然也可以用FragmentManager）： a. 我们需要首先创建一个当前View到对应TransitionName的绑定（命名规则上面提过） ```kotlin //首先创建一个绑定，形式是 view to TransitionName val extras = FragmentNavigatorExtras( viewHolder.itemView.findViewById(R.id.backGroundCardView) to "backGroundCard${position}", ) ``` b. 然后，我们使用navigate()实现跳转，函数内部我们填入目标fragment ID与先前绑定的***extras*** ```kotlin view!!.findNavController().navigate( R.id.action_to_article, null, null, extras ) ```
完成共享元素动画的最后一步，在***DetailFragment***(目标Fragment)内设置我们需要的Transition效果。 sharedElementEnterTransition对象接受一个Transition类，Transition则包含了我们需要实现的动画效果。这里我们使用的R.transiton.shared是自定义的Transition集合。 ```kotlin //in DetailFragment.kt sharedElementEnterTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.shared) sharedElementReturnTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.shared) ``` ### 我们使用的共享元素动画Transition：R.transition.shared ``` ``` 在如上代码中，我们定义的Transition包括了三个内容，分别是：changeBounds, CornerTransiton(自己定义的)和changeTransform。我们借助他们来实现所需要的卡片展开效果。 ### 为什么使用OverShootInterpolator？前面提到，AppStore原生的动画函数曲线是类弹簧的，这与OverShootInterpolator的函数曲线是类似的：他们都会在到达目标值后，继续向前进一小步，然后再退回来，就像下方的函数曲线一样： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79d551c5bcdc493aa2ce369eb628fdc3~tplv-k3u1fbpfcp-watermark.image?) $f(t) = t * t * ((1.2 + 1) * t + 1.2) + 1.0$ ### 怎么实现其他卡片的模糊？这里，我借助了Github的开源库：[wasabeef/Blurry: Blurry is an easy blur library for Android (github.com)](https://github.com/wasabeef/Blurry) 它可以实现将当前context的画面转为模糊，并重新映射回rootViewGroup。 ```kotlin viewHolder.itemView.visibility=View.INVISIBLE Blurry.with(context).radius(25).sampling(1).animate(100).onto(NoiseConstraintLayout) viewHolder.itemView.visibility=View.VISIBLE ``` ### 最后，为保证共享动画返回时的效果，请注意：为了保证DetailFragment返回HomeFragment也能拥有共享动画的效果，请务必在HomeFragment的onCreate()内添加如下代码： ```kotlin postponeEnterTransition() view.doOnPreDraw { startPostponedEnterTransition() } ```
如果你觉得还挺有趣，可以点击下方链接浏览更多同类文章： [“用Android复刻Apple产品UI”(3)—优雅的数据统计图表 - 掘金 (juejin.cn)](https://juejin.cn/post/7077960004745199646) [“用Android复刻Apple产品UI”(1)—丝滑的噪声监测音量条 - 掘金 (juejin.cn)](https://juejin.cn/post/7073025019017691144)