共享元素从RecyclerView过渡到片段

时间:2018-08-19 11:25:55

标签: android android-recyclerview kotlin transactions shared-element-transition

我正在尝试使共享元素从recyclerView中的项目(在片段中)过渡到新片段。我无法通过动画进行过渡。

recyclerView项目的代码如下

@EViewGroup(R.layout.view_artists_element)
open class ArtistElementView : RelativeLayout {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    private var artist: Artist? = null

    fun setup(artist: Artist) {
        this.artist = artist

        Picasso.get()
                .load(artist.image)
                .error(R.drawable.as_shared_default_picture_offline_round)
                .into(artistDetailImage)

        artistNameTextView?.text = artist.name

        artistDetailImage?.transitionName = "sharedArtistTransition-${artist.id}"
    }

    @Click(R.id.container)
    fun onClick() {
        (context as? MSActivity)?.let { activity ->
            val fragment = ArtistDetailFragment_.builder().build()
            artistDetailImage?.transitionName?.let { transitionName ->
                fragment.setup(artist, transitionName)
            }
            fragment.postponeEnterTransition()

            activity.beginSharedTransitionTo(fragment, artistDetailImage)
        }
    }
}

其中的click事件应过渡到新的ArtistDetailFragment。该项目的过渡名称在设置方法中设置(在onCreate之前调用),并在click事件中赋予新片段。共享元素只是约束布局中大小为80x80dp

的imageView

下面显示了用于更改片段的beginSharedTransitionTo

fun beginSharedTransitionTo(newFragment: Fragment?, sharedView: ImageView) {
        if (newFragment?.isAdded == true) return
        val currentFrag = currentFragment

        val sharedTransition = TransitionInflater.from(applicationContext).inflateTransition(R.transition.default_transition)
        val noTransition = TransitionInflater.from(applicationContext).inflateTransition(android.R.transition.no_transition)

        currentFrag?.sharedElementReturnTransition = sharedTransition
        currentFrag?.exitTransition = noTransition
        newFragment?.sharedElementEnterTransition = sharedTransition
        newFragment?.enterTransition = noTransition

        val fragmentTransaction = supportFragmentManager.beginTransaction()
        ViewCompat.getTransitionName(sharedView)?.let { transitionName ->
            fragmentTransaction.addSharedElement(sharedView, transitionName)
        }
        newFragment?.let {
            fragmentTransaction.addToBackStack(currentFrag?.tag)
                .replace(R.id.fragmentPlaceholder, it)
                .commit()
        }
    }

currentFragment是来自的片段,newFragment是要去的片段。 sharedView是共享元素(imageView)。该方法位于所有活动都扩展的抽象类中。抽象类扩展了RxAppCompatActivity。

片段的代码(ArtistDetailFragment)如下所示

@EFragment(R.layout.fragment_atist_detail)
open class ArtistDetailFragment : MSFragment() {
    private var artist: Artist? = null

    @AfterViews
    internal fun afterView() {
        artist?.image?.let { image ->
            Picasso.get()
                    .load(image)
                    .into(artistDetailImage, object : Callback {
                        override fun onSuccess() {
                            startPostponedEnterTransition()
                        }

                        override fun onError(e: Exception?) {
                            startPostponedEnterTransition()
                        }
                    })
        }

        artistNameTextView?.text = artist?.name
    }

    fun setup(artist: Artist?, transitionName: String) {
        this.artist = artist

        artistDetailImage?.transitionName = transitionName
    }
}

使用的过渡只是默认过渡(R.transition.default_transition)

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform />
    <changeBounds />
</transitionSet>

并且windowContentTransitions的样式设置为true

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowContentTransitions">true</item>

    <item name="colorPrimary">@color/rose_main</item>
    <item name="colorPrimaryDark">@color/rose_dark</item>
</style>

所有视图和片段均正确显示。只是缺少的过渡。我对丢失或做错的事情一无所知,因此非常感谢您的帮助

0 个答案:

没有答案