SharedElementTransition неправильно анимирует масштаб изображения с Glide - PullRequest
Новая
       70

SharedElementTransition неправильно анимирует масштаб изображения с Glide

2 голосов
/ 02 апреля 2020

Я делаю переход с общим элементом из фрагмента с помощью RecyclerView в детальный вид, где изображение совместно используется двумя. Переход, в основном, в порядке, но поскольку два изображения имеют разные размеры, при нажатии на одно изображение масштабируется до окончательного размера, а затем анимирует границы ImageView, как и должно быть. Это приводит к тому, что изображение не соответствует размеру границ во время анимации.

Вот видео того, что я описываю

DetailFragment: 

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
        ViewCompat.setTransitionName(binding.podcastImage, "podcastImage_${args.podcastId}")

        postponeEnterTransition()
    }

// called from onStart
private fun observeViewModel() {
        viewModel.podcastObservable.observe(this, Observer { podcast ->
            Glide.with(requireContext())
                .load(podcast.image)
                .into(binding.podcastImage)

            // other stuff

            startPostponedEnterTransition()
        })
    }

GridFragment: 

fun navigateToPodcastDetailFragment(podcastId: String) {
        val args = Bundle()
        args.putString("podcast_id", podcastId)

        val directions = TopPodcastsFragmentDirections.viewPodcastDetails(podcastId)
        val extras = FragmentNavigatorExtras(
            podcast_image to "podcastImage_$podcastId"
        )

        Navigation.findNavController(requireActivity(), R.id.nav_host_fragment)
            .navigate(directions, extras)
    }

GridAdapter: 

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        getItem(position).let { podcast ->
            with(holder) {
                Glide.with(holder.itemView.context)
                    .load(podcastList[position].image)
                    .dontAnimate()
                    .dontTransform()
                    .into(binding.thumbnail)
                bind(createOnClickListener(binding, podcast.id), podcast)
            }
        }
    }

ViewHolder.bind() {
    // other stuff
    ViewCompat.setTransitionName(binding.thumbnail, "podcast${value.id}")
}

Элемент сетки ImageView: 

<ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:transitionName="@string/podcastImageTransition"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@drawable/ic_launcher_background" />

DetailFragment ImageView: 

<ImageView
            android:id="@+id/podcast_image"
            android:layout_width="164dp"
            android:layout_height="164dp"
            android:scaleType="centerCrop"
            android:layout_marginTop="24dp"
            android:transitionName="@string/podcastImageTransition"
            app:layout_constraintTop_toBottomOf="@id/toolbar"
            app:layout_constraintStart_toStartOf="parent"
            tools:src="@drawable/ic_launcher_background"/>

Я думаю, что переходная часть в основном правильная, но что-то в том, как изображение обрезается или масштабируется, неправильно во время перехода.

Заранее спасибо.

1 Ответ

1 голос
/ 12 апреля 2020

Убедитесь, что в DetailFragment включена функция .dontTransform () в Glide 

// called from onStart
private fun observeViewModel() {
        viewModel.podcastObservable.observe(this, Observer { podcast ->
            Glide.with(requireContext())
                .load(podcast.image)
                .dontTransform()
                .into(binding.podcastImage)

            // other stuff

            startPostponedEnterTransition()
        })
    }

Кроме того, я работал над этим весь день (для приложения, которое я делаю по совпадению), и я только что нашел что-то еще вы можете попробовать. Попробуйте удалить тип масштаба изображения в файлах xml.

...