LargeDraweeView

Preview

Hero animations	Long image

English | 中文

Several years ago, I created the PhotoDraweeView project, but it was not suitable in the production environment, more like a demo for learning gesture zooming.

In most cases, Apps use Cloud Object Storage Service (OSS) to load web images. Usually, small images (processed by OSS) are displayed in App Feeds, The original image is loaded only after being clicked. This is a reasonable way to use network resources and mobile memory.

SubscaleView is excellent in terms of image zooming and BitmapRegionDecoder. We only need to integrate Fresco's image cache and user interaction experience.

In fact, LargeDraweeView has been used in our app for many years, Its user interaction experience for viewing images is basically similar to that of WeChat and Weibo.

• For Hero animations, using Activity/Fragment + TransitionLayout is better than Activity + ChangeImageTransform in terms of compatibility and intrusiveness, especially when viewing multiple images.

• Long image can be auto scaled to fit the view size and provide a smooth vertical scrolling experience

• Supports custom LoadingViewProvider

• Supports custom ScaleValueHook

• Additional pull-down gesture for exiting

We initially use some "magic" to handle immersive status bar/navigation bar and back pressed listening. However, with the later introduction of WindowInsetsControllerCompat and OnBackPressedDispatcher, LargeDraweeView has gradually become more generalized.

Inspired by Fresco 3.4.0's new file cache invocation, I decided to rewrite this project using Kotlin and open-source it.

Usage

Dependencies

implementation('com.facebook.fresco:fresco:3.4.0')
implementation('com.davemorrissey.labs:subsampling-scale-image-view-androidx:3.10.0')
implementation('me.relex:large-drawee-view:1.0.2')

XML

<me.relex.largeimage.LargeDraweeView
    android:id="@+id/image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:show_loading="true"
    app:loading_view_provider=".loading.ImageLoadingViewProvider"
    app:enable_pull_down_gesture="true"
    app:exit_duration="300"
    app:long_image_animation="true" />

LargeDraweeView	Description
show_loading	Default True
loading_view_provider	Custom LoadingViewProvider class
enable_pull_down_gesture	Enable pull-down gesture, default False
exit_duration	Exit duration including pull-down exit, double-tap reset and image reset
long_image_ratio	Ratio for long image, default 2.5
long_image_min_width	Minimum width for long image, default 400
long_image_animation	Initial animation display for long images, default False

Code

LargeDraweeView loads image using LargeImageInfo data object. LargeImageInfo.Builder providing a better way to configure parameters.

val info = LargeImageInfo.Builder().apply {
    lowImageUrl(lowUrl)
    imageUrl(heightUrl)
}.build()

largeDraweeView.load(info)

LargeImageInfo	Description
imageUri	Uri of the large image
lowImageUri	Uri of the low-resolution image (optional)
sharedTransitionRect	Shared element rect, used with TransitionLayout (optional)
imageSize	Original image dimensions for calculated shared element, used with TransitionLayout (optional)

Principles

LargeDraweeView is a ViewGroup that combines the features of 3 Views.

Top layer: LoadingView

Middle layer: Fresco PreviewDraweeView, for low-resolution preview and animated image support

Bottom layer: SubscaleView

When loading a web image, LoadingView and PreviewDraweeView are displayed first. At the same time, FrescoImageLoader is used to query Fresco’s file cache or handle downloading. And then, it provides a file for SubscaleView. Finally, LoadingView and PreviewDraweeView are hidden.

If you wish to adapt it to other image libraries such as Glide or Coil, it may be easy to accomplish.

The Hero animations implemented by TransitionLayout can refer to LargePhotoActivity and LargeGalleryActivity. Basically, it can be used in the production environment.