从网格RecyclerView到详细信息活动的共享过渡效果

时间:2018-10-08 13:37:46

标签: android android-recyclerview android-transitions

我正在尝试在RecyclerView(具有网格布局)到详细信息活动之间进行首次共享转换。

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv_cryptocurrencies"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    android:overScrollMode="never" />

对于初学者,在详细信息布局和transitionName的布局中,RecyclerView都设置为“ cryptocurrency_name”。

<!-- RecyclerView's item layout -->
<TextView
    style="@style/CurrencyTextView"
    android:id="@+id/tv_cryptocurrency_name"
    android:textSize="20sp"
    android:maxLength="12"
    android:transitionName="cryptocurrency_name"
    tools:text="Bitcoin" />

...
<!-- Details -->
<TextView
    android:id="@+id/tv_cryptocurrency_detail_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bitcoin"
    android:textSize="32sp"
    android:transitionName="cryptocurrency_name"
    .../>

MainActivity从适配器覆盖的方法:

private var tvCryptocurrencyName: TextView? = null
tvCryptocurrencyName = rv_cryptocurrencies.findViewById(R.id.tv_cryptocurrency_name)

override fun onItemClick(cryptocurrency: Cryptocurrency) {
    val intent = Intent(this, DetailActivity::class.java)
    val options = ActivityOptions.makeSceneTransitionAnimation(this, tvCryptocurrencyName, "cryptocurrency_name")
    intent.putExtra(EXTRA_STRING_CRYPTOCURRENCY_DETAILS, cryptocurrency)
    startActivity(intent, options.toBundle())
}

按下项目时触发的方法被设置为适配器中的接口:

interface OnItemClickListener {
    fun onItemClick(cryptocurrency: Cryptocurrency)
}

override fun onBindViewHolder(holder: MainViewHolder, position: Int) {
    val cryptocurrency = cryptocurrenciesList[position]
    holder.populateUi(cryptocurrency)
    holder.itemView.setOnClickListener { onItemClickListener?.onItemClick(cryptocurrenciesList[position]) }
}

当我按一下以查看结果时,应用程序崩溃并显示以下消息

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.gabriel.cryptocurrencies, PID: 4416
    java.lang.IllegalArgumentException: Shared element must not be null
        at android.app.ActivityOptions.makeSceneTransitionAnimation(ActivityOptions.java:694)
        at android.app.ActivityOptions.makeSceneTransitionAnimation(ActivityOptions.java:649)
        at com.example.gabriel.cryptocurrencies.ui.main.MainActivity.onItemClick(MainActivity.kt:50)
        at com.example.gabriel.cryptocurrencies.ui.main.MainAdapter$onBindViewHolder$1.onClick(MainAdapter.kt:36)
        at android.view.View.performClick(View.java:6261)
        at android.view.View$PerformClick.run(View.java:23752)
        at android.os.Handler.handleCallback(Handler.java:751)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6776)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1518)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

以及其他教程,这就是我要做的全部。也许我尝试从RecyclerView的布局访问字段的方法是错误的?

修改

已更新但仍失败的代码。现在,动画似乎停滞了,因为当我按下后退按钮一次时,仅当我按下两次时它才不会离开应用程序。另外,在编辑代码并部署更改时,应用程序将在尝试切换到详细信息视图后加载详细信息视图。

MainActivity

override fun onItemClick(cryptocurrency: Cryptocurrency, field: View) {
    val intent = Intent(this, DetailActivity::class.java)
    intent.putExtra(EXTRA_CRYPTOCURRENCY_DETAILS, cryptocurrency)
    intent.putExtra(EXTRA_TRANSITION_NAME, cryptocurrency.id)

    val options = ActivityOptions.makeSceneTransitionAnimation(this, field, cryptocurrency.id)
    startActivity(intent, options.toBundle())
}

MainAdapter

val tvCryptocurrencyName = holder.itemView.tv_cryptocurrency_name

interface OnItemClickListener {
    fun onItemClick(cryptocurrency: Cryptocurrency, field: View)
}

holder.itemView.setOnClickListener { onItemClickListener?.onItemClick(cryptocurrenciesList[position], tvCryptocurrencyName) }

1 个答案:

答案 0 :(得分:1)

您必须使用RecyclerView方法为onBindViewHolder的适配器中的每个项目设置唯一的过渡名称。

类似这样的东西:

ViewCompat.setTransitionName(holder.ivIcon, cryptocurrency.id.toString())

通过transitionName发送Intent,在您的详细信息活动中获取此transitionName,然后将其设置为您的View

val iconTransitionName = intent.getStringExtra(EXTRA_TRANSITION_NAME)
ivIcon.transitionName = iconTransitionName

UPD:

Adapter的{​​{1}}方法中:

onBindViewHolder

ViewCompat.setTransitionName(holder.itemView, cryptocurrenciesList[position].id) 中:

onItemClick()

override fun onItemClick(cryptocurrency: Cryptocurrency, textView: TextView) { val transitionName = ViewCompat.getTransitionName(textView) val intent = Intent(this, DetailActivity::class.java) val options = ActivityOptions.makeSceneTransitionAnimation(this, textView, transitionName) // You should send exactly this instace of TextView, not by it's id intent.putExtra(EXTRA_STRING_CRYPTOCURRENCY_DETAILS, cryptocurrency) intent.putExtra(EXTRA_STRING_TRANSITION_NAME, cryptocurrency.id.toString()) startActivity(intent, options.toBundle()) } 的{​​{1}}中:

DetailActivity

onCreate()中添加:

val transitionName = intent.getStringExtra(EXTRA_STRING_TRANSITION_NAME)
tv_cryptocurrency_detail_name.transitionName = transitionName

并将其添加到您的values-v21/styles.xml s:

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowContentTransitions">true</item>
</style>

看那里简单的例子:Github Repo