Fragment中的RecycleView的转场动画与保存焦点
Fragment中的RecycleView的转场动画与保存焦点
这一周鄙渣都被一个需求困扰，这个需求就是给FAQ列表添加一个shareElement的转场过度动画，并且在切回来的时候保存焦点。其中FAQ列表是Fragment下的一个RecycleView，FAQ详情页是另一个Fragment。
实际上这个需求完成非常的简单，贴一下代码
fun showDetailFragment(position: Int, faqInfo: FaqInfo, view: View) {
val faqContentFragment = FaqContentFragment().apply {
faqTitle = faqInfo.title
faqContent = faqInfo.content
transitionName = "faqTitle$position"
}
//SDK21以上设置共享内容的转场动画
//21以下转场动画需要在这设置，不然无进入的动画效果
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
fragmentManager?.apply {
beginTransaction()
.addSharedElement(view, ViewCompat.getTransitionName(view)
?: "faqTitle$position")
.replace(R.id.fl_faq_container, faqContentFragment)
.addToBackStack(null)
.commit()
}
} else {
fragmentManager?.apply {
beginTransaction()
.setTransition((FragmentTransaction.TRANSIT_FRAGMENT_FADE))
.addToBackStack(null)
.commit()
}
}
}
接下来说一说在其中踩过的坑
使用supportFragmentManager与fragmentManager的效用不一致
这个问题鄙渣也只是知其然不知其所以然，只知道效果确实不一样。
鄙渣使用的均是androidx.fragment.app下面的FragmentManager类，不存在一个是被deprecated的v4包中的getFragmentManager()，一个是support包下的getSuppotrFragmentManager()的的情况。
前者是在activity中获得的supportFragmentManager，后者是在fragment中获得的fragmentManager。
并且通过hashcode()进行比对，两个fragmentManager拥有一样的hashCode。但是前者就是无法正确添加SharedElement。
如果有大佬看到这篇文章，麻烦告诉一下鄙渣具体原因。或者之后鄙渣研究出来了再贴结果。
保存RecycleView跳转前的焦点
这个需求大多数开发者都用不上，只有鄙渣在的这个行当需要，也简单地说一下思路。一开始鄙渣想的是利用hide和show对第一个Fragment进行操作，第二个Fragment手动add和remove。并且覆写onBackPressed()，根据Fragment的存在与否决定增删改等操作。
这个思路并没有完全解决焦点的问题，依旧需要通过存一个全局变量来保存焦点，从而在view绘制后重新调用requestFocus()。
但这样一来就完全可以使用replace与addToBackStack操作，不需要进行上述那么繁琐的操作。
但是这个时候又出现了另外一个问题，即使是在Fragment的onStart回调中，RecycleView也并没有绘制，其中获取到的ChildView数量为0。查阅了网上的资料，有一种比较麻烦的方法进行实现，就是使用viewTreeObserver。给RecycleView绑定一个onDrawListner，即可在此时找到子view。
只是此处也是伴随着一个棘手的问题：何时解绑onDrawListner。如果不进行解绑，每一次滑动RecycleView都会进行一次绘制，那么焦点就被固定死了，无法移动；规范要求也不能在onDrawListner内部进行解绑操作；如果进行delay后再解绑，那我也一样可以delay后再找到焦点，一点也不优雅精致。最后我放弃了这种方法。
接下来是最终使用的方法，在viewHolder内部进行操作，贴一下代码
class FaqAdapter(val data: List<FaqInfo>, private val faqItemClickListener: FaqItemClickListener) : RecyclerView.Adapter<FaqViewHolder>() {
var thisRecyclerView: RecyclerView? = null
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FaqViewHolder {
val itemView: View = LayoutInflater.from(parent.context).inflate(R.layout.faq_item, parent, false)
return FaqViewHolder(itemView)
}
override fun getItemCount(): Int {
return data.size
}
override fun onBindViewHolder(holder: FaqViewHolder, position: Int) {
holder.setText(R.id.tv_faq_item_title, data[position].title)
val faqItemTitle = holder.getView<TextView>(R.id.tv_faq_item_title)
val faqItemContainer = holder.itemView.findViewById<ConstraintLayout>(R.id.cl_faq_item_container)
/*
* 设置转场动画所需
* */
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
faqItemTitle.transitionName = "faqTitle$position"
}
/*
* 点击事件的回调
* */
faqItemContainer.setOnClickListener {
faqItemClickListener.onFaqItemClickListener(position, data[position], faqItemTitle)
}
/*
* 回来recycleView找到上次的焦点
* */
if (position == latestPosition) {
thisRecyclerView?.smoothScrollToPosition(latestPosition)
faqItemContainer.requestFocus()
}
/*
* 记录焦点变换的位置
* */
faqItemContainer.setOnFocusChangeListener { _, hasFocus ->
if (hasFocus) {
latestPosition = position
}
}
}
override fun onAttachedToRecyclerView(recyclerView: RecyclerView) {
super.onAttachedToRecyclerView(recyclerView)
thisRecyclerView = recyclerView
}
override fun onDetachedFromRecyclerView(recyclerView: RecyclerView) {
super.onDetachedFromRecyclerView(recyclerView)
thisRecyclerView = null
}
companion object {
var latestPosition = 0
}
}
其实代码已经很清晰明朗了。首先在attach的时候获取此时的RecycleView(detach的时候同样要记得施放)，然后在绑定ViewHolder的时候进行判断，如果是记录中的位置，那么就滑动到该位置并获取焦点。并且附带一个焦点变化监听器，如果某个位置的view获得了焦点，就记录该控件的位置。这样一来代码就十分简洁优雅了。
动画的进入效果消失
这个其实是一个版本问题。由于往上要兼容到8.0，向下最低兼容到4.4，而sharedElement是21(5.0)后才有，所以之前需要统一设置成淡入淡出的效果。而此时却有一个莫名其妙的问题：在Fragment中的设置对进入动画不生效。贴一下设置代码。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
sharedElementEnterTransition = DetailTransition()
sharedElementReturnTransition = DetailTransition()
}
allowEnterTransitionOverlap = true
allowReturnTransitionOverlap = true
enterTransition = Fade()
returnTransition = Fade()
exitTransition = Fade()
}
实际上这个的解决方法并不是难题，低版本有自己对应的设置方法。鄙渣疑惑的地方是，退出动画生效，那么为什么进入动画会不生效？这个问题鄙渣也没有研究出结果，希望有大佬能够提点一下，顺带贴一下现在的解决设置。
fragmentManager?.apply {
beginTransaction()
.setTransition((FragmentTransaction.TRANSIT_FRAGMENT_FADE))
.addToBackStack(null)
.commit()
}
其中setTransition((FragmentTransaction.TRANSIT_FRAGMENT_FADE))就是设置动画效果的语句。
最后贴一下示意图
transition.gif
