mirrors/element-android
1
0
Fork 0
mirror of https://github.com/element-hq/element-android synced 2024-11-27 11:59:12 +03:00
Code Issues Projects Releases Packages Wiki Activity

Better image fullscreen preview animation

Browse source
This commit is contained in:
Valere 2019-07-18 18:49:28 +02:00
parent c3d945d6bb
commit db88caf7fa
10 changed files with 242 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -5,7 +5,7 @@ Features:
-
Improvements:
-
- UX image preview screen transition (#393)
Other changes:
-

13
vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailFragment.kt
View file

@ -22,6 +22,7 @@ import android.content.Context
import android.content.Intent
import android.graphics.drawable.ColorDrawable
import android.net.Uri
import android.os.Build
import android.os.Bundle
import android.os.Parcelable
import android.text.Editable
@ -35,7 +36,9 @@ import android.widget.TextView
import android.widget.Toast
import androidx.annotation.DrawableRes
import androidx.appcompat.app.AlertDialog
import androidx.core.app.ActivityOptionsCompat
import androidx.core.content.ContextCompat
import androidx.core.view.ViewCompat
import androidx.lifecycle.ViewModelProviders
import androidx.recyclerview.widget.ItemTouchHelper
import androidx.recyclerview.widget.LinearLayoutManager
@ -618,8 +621,14 @@ class RoomDetailFragment :
override fun onImageMessageClicked(messageImageContent: MessageImageContent, mediaData: ImageContentRenderer.Data, view: View) {
// TODO Use navigator
val intent = ImageMediaViewerActivity.newIntent(vectorBaseActivity, mediaData)
startActivity(intent)
val intent = ImageMediaViewerActivity.newIntent(vectorBaseActivity, mediaData, ViewCompat.getTransitionName(view))
var bundle: Bundle? = null
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(), view, ViewCompat.getTransitionName(view)
?: "").toBundle()
}
startActivity(intent, bundle)
}
override fun onVideoMessageClicked(messageVideoContent: MessageVideoContent, mediaData: VideoContentRenderer.Data, view: View) {

2
vector/src/main/java/im/vector/riotx/features/home/room/detail/timeline/item/MessageImageVideoItem.kt
View file

@ -19,6 +19,7 @@ package im.vector.riotx.features.home.room.detail.timeline.item
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.core.view.ViewCompat
import com.airbnb.epoxy.EpoxyAttribute
import com.airbnb.epoxy.EpoxyModelClass
import im.vector.riotx.R
@ -45,6 +46,7 @@ abstract class MessageImageVideoItem : AbsMessageItem<MessageImageVideoItem.Hold
contentUploadStateTrackerBinder.bind(informationData.eventId, mediaData, holder.progressLayout)
holder.imageView.setOnClickListener(clickListener)
holder.imageView.setOnLongClickListener(longClickListener)
ViewCompat.setTransitionName(holder.imageView,"imagePreview_${id()}")
holder.mediaContentView.setOnClickListener(cellClickListener)
holder.mediaContentView.setOnLongClickListener(longClickListener)
// The sending state color will be apply to the progress text

47
vector/src/main/java/im/vector/riotx/features/media/ImageContentRenderer.kt
View file

@ -16,11 +16,16 @@
package im.vector.riotx.features.media
import android.graphics.drawable.Drawable
import android.net.Uri
import android.os.Parcelable
import android.widget.ImageView
import androidx.exifinterface.media.ExifInterface
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.load.resource.bitmap.RoundedCorners
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
import com.github.piasy.biv.view.BigImageView
import im.vector.matrix.android.api.session.content.ContentUrlResolver
import im.vector.matrix.android.internal.crypto.attachments.ElementToDecrypt
@ -87,6 +92,48 @@ class ImageContentRenderer @Inject constructor(private val activeSessionHolder:
.transform(RoundedCorners(dpToPx(8, imageView.context)))
.thumbnail(0.3f)
.into(imageView)
}
fun renderFitTarget(data: Data, mode: Mode, imageView: ImageView, callback :((Boolean) -> Unit)? = null) {
val (width, height) = processSize(data, mode)
val glideRequest = if (data.elementToDecrypt != null) {
// Encrypted image
GlideApp
.with(imageView)
.load(data)
} else {
// Clear image
val contentUrlResolver = activeSessionHolder.getActiveSession().contentUrlResolver()
val resolvedUrl = when (mode) {
Mode.FULL_SIZE -> contentUrlResolver.resolveFullSize(data.url)
Mode.THUMBNAIL -> contentUrlResolver.resolveThumbnail(data.url, width, height, ContentUrlResolver.ThumbnailMethod.SCALE)
}
//Fallback to base url
?: data.url
GlideApp
.with(imageView)
.load(resolvedUrl)
}
glideRequest
.listener(object: RequestListener<Drawable> {
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
callback?.invoke(false)
return false
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
callback?.invoke(true)
return false
}
})
.fitCenter()
.into(imageView)
}
fun render(data: Data, imageView: BigImageView) {

127
vector/src/main/java/im/vector/riotx/features/media/ImageMediaViewerActivity.kt
View file

@ -18,15 +18,30 @@ package im.vector.riotx.features.media
import android.content.Context
import android.content.Intent
import android.graphics.drawable.Drawable
import android.os.Build
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.ViewTreeObserver
import androidx.annotation.RequiresApi
import androidx.appcompat.widget.Toolbar
import androidx.core.transition.addListener
import androidx.core.view.ViewCompat
import androidx.core.view.isInvisible
import androidx.core.view.isVisible
import androidx.transition.Transition
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
import com.github.piasy.biv.indicator.progresspie.ProgressPieIndicator
import com.github.piasy.biv.view.GlideImageViewFactory
import im.vector.riotx.core.di.ScreenComponent
import im.vector.riotx.core.glide.GlideApp
import im.vector.riotx.core.platform.VectorBaseActivity
import kotlinx.android.synthetic.main.activity_image_media_viewer.*
import timber.log.Timber
import javax.inject.Inject
@ -34,6 +49,10 @@ class ImageMediaViewerActivity : VectorBaseActivity() {
@Inject lateinit var imageContentRenderer: ImageContentRenderer
private val mHideHandler = Handler()
lateinit var mediaData: ImageContentRenderer.Data
override fun injectWith(injector: ScreenComponent) {
injector.inject(this)
}
@ -41,11 +60,29 @@ class ImageMediaViewerActivity : VectorBaseActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(im.vector.riotx.R.layout.activity_image_media_viewer)
val mediaData = intent.getParcelableExtra<ImageContentRenderer.Data>(EXTRA_MEDIA_DATA)
mediaData = intent.getParcelableExtra<ImageContentRenderer.Data>(EXTRA_MEDIA_DATA)
intent.extras.getString(EXTRA_SHARED_TRANSITION_NAME)?.let {
ViewCompat.setTransitionName(imageTransitionView, it)
}
if (mediaData.url.isNullOrEmpty()) {
finish()
return
}
configureToolbar(imageMediaViewerToolbar, mediaData)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && addTransitionListener()) {
// Encrypted image
imageTransitionView.isVisible = true
imageMediaViewerImageView.isVisible = false
encryptedImageView.isVisible = false
supportPostponeEnterTransition()
imageContentRenderer.renderFitTarget(mediaData, ImageContentRenderer.Mode.THUMBNAIL, imageTransitionView) {
scheduleStartPostponedTransition(imageTransitionView)
}
} else {
configureToolbar(imageMediaViewerToolbar, mediaData)
imageTransitionView.isVisible = false
if (mediaData.elementToDecrypt != null) {
// Encrypted image
@ -78,13 +115,97 @@ class ImageMediaViewerActivity : VectorBaseActivity() {
}
}
override fun onBackPressed() {
//show again for exit animation
imageTransitionView.isVisible = true
super.onBackPressed()
}
private fun scheduleStartPostponedTransition(sharedElement: View) {
sharedElement.viewTreeObserver.addOnPreDrawListener(
object : ViewTreeObserver.OnPreDrawListener {
override fun onPreDraw(): Boolean {
sharedElement.viewTreeObserver.removeOnPreDrawListener(this)
supportStartPostponedEnterTransition()
return true
}
})
//Any how hide the transition image view after a delay
mHideHandler.postDelayed({ imageTransitionView.isInvisible = true }, 600)
}
/**
* Try and add a [Transition.TransitionListener] to the entering shared element
* [Transition]. We do this so that we can load the full-size image after the transition
* has completed.
*
* @return true if we were successful in adding a listener to the enter transition
*/
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
private fun addTransitionListener(): Boolean {
val transition = window.sharedElementEnterTransition
if (transition != null) {
// There is an entering shared element transition so add a listener to it
transition.addListener(
onEnd = {
if (mediaData.elementToDecrypt != null) {
// Encrypted image
GlideApp
.with(this)
.load(mediaData)
.dontAnimate()
.listener(object : RequestListener<Drawable> {
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
//TODO ?
Timber.e("TRANSITION onLoadFailed")
imageMediaViewerImageView.isVisible = false
encryptedImageView.isVisible = true
return false
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
Timber.e("TRANSITION onResourceReady")
imageTransitionView.isInvisible = true
imageMediaViewerImageView.isVisible = false
encryptedImageView.isVisible = true
return false
}
})
.into(encryptedImageView)
} else {
imageTransitionView.isInvisible = true
// Clear image
imageMediaViewerImageView.isVisible = true
encryptedImageView.isVisible = false
imageMediaViewerImageView.setImageViewFactory(GlideImageViewFactory())
imageMediaViewerImageView.setProgressIndicator(ProgressPieIndicator())
imageContentRenderer.render(mediaData, imageMediaViewerImageView)
}
},
onCancel = {
//Something to do?
}
)
return true
}
// If we reach here then we have not added a listener
return false
}
companion object {
private const val EXTRA_MEDIA_DATA = "EXTRA_MEDIA_DATA"
private const val EXTRA_SHARED_TRANSITION_NAME = "EXTRA_SHARED_TRANSITION_NAME"
fun newIntent(context: Context, mediaData: ImageContentRenderer.Data): Intent {
fun newIntent(context: Context, mediaData: ImageContentRenderer.Data, shareTransitionName: String?): Intent {
return Intent(context, ImageMediaViewerActivity::class.java).apply {
putExtra(EXTRA_MEDIA_DATA, mediaData)
shareTransitionName?.let { putExtra(EXTRA_SHARED_TRANSITION_NAME, it) }
}
}
}

39
vector/src/main/res/layout/activity_image_media_viewer.xml
View file

@ -12,18 +12,35 @@
android:layout_height="?attr/actionBarSize"
android:elevation="4dp" />
<com.github.piasy.biv.view.BigImageView
android:id="@+id/imageMediaViewerImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:failureImageInitScaleType="center"
app:optimizeDisplay="true" />
<ImageView
android:id="@+id/encryptedImageView"
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
tools:visibility="visible" />
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageTransitionView"
android:transitionName="imagePreview"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="visible"
android:visibility="gone"
/>
<com.github.piasy.biv.view.BigImageView
android:id="@+id/imageMediaViewerImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:failureImageInitScaleType="center"
app:optimizeDisplay="true" />
<ImageView
android:id="@+id/encryptedImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
tools:visibility="visible" />
</FrameLayout>
</LinearLayout>

15
vector/src/main/res/transition/image_preview_transition.xml Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?><!--
The transitions which us used for the entrance and exit of shared elements. Here we declare
two different transitions which are targeting specific views.
-->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200">
<!-- changeBounds is used for the TextViews which are shared -->
<changeBounds/>
<!-- changeImageTransform is used for the ImageViews which are shared -->
<changeImageTransform />
</transitionSet>

5
vector/src/main/res/values-v21/theme_black.xml
View file

@ -7,6 +7,11 @@
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify shared element enter and exit transitions -->
<item name="android:windowSharedElementEnterTransition">@transition/image_preview_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/image_preview_transition</item>
</style>
<style name="AppTheme.Black" parent="AppTheme.Black.v21" />

5
vector/src/main/res/values-v21/theme_dark.xml
View file

@ -7,6 +7,11 @@
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify shared element enter and exit transitions -->
<item name="android:windowSharedElementEnterTransition">@transition/image_preview_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/image_preview_transition</item>
</style>
<style name="AppTheme.Dark" parent="AppTheme.Dark.v21" />

4
vector/src/main/res/values-v21/theme_light.xml
View file

@ -7,6 +7,10 @@
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify shared element enter and exit transitions -->
<item name="android:windowSharedElementEnterTransition">@transition/image_preview_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/image_preview_transition</item>
</style>
<style name="AppTheme.Light" parent="AppTheme.Light.v21"/>