Page MenuHomePhabricator

[SPIKE] Investigate image zoom function
Closed, ResolvedPublic

Description

  1. Images are zoomable. Ideally, zoom behavior will work like in this example. Why?
    • It will ensure that zooming is not interfering with the main interaction model of Suggested edits (swiping left/right).
    • In addition, it will also guarantee that previously learned interaction patterns (tapping a card in V1/V2 to add) will continue to work seamlessly in V3.

Zoom behavior affects T240197.

Event Timeline

Charlotte renamed this task from Image zoom function to [SPIKE] Investigate image zoom function.Jan 7 2020, 5:49 PM
Charlotte triaged this task as Medium priority.
Charlotte lowered the priority of this task from Medium to Low.
Charlotte updated the task description. (Show Details)
Charlotte raised the priority of this task from Low to Medium.

By looking at Instagram's pinch to zoom feature, we can notice the following things:

  1. The image view becomes a full-screen view and overlays other views.
  2. By releasing the image view, it will have a transition animation back to its original position.

I've created a simple project (pretty rough) to try to implement it and looks like we will need to rewrite the ZoomableController.Listener events.

The DefaultZoomableController has complete code of detecting onTransformBegin and onTransformEnd.

If we are going to set the custom ZoomableController.Listener, we will need to copy the most part of the sample code and add a few codes to make the image view becomes full screen (or overlay) when onTransformBegin and transit to its original place when onTransformEnd

Note:

  • Create a full-screen dialog with transparent background might work but will need to think about an issue when losing focus on the image
  • setTapListener does not work on multiple touch event, so it could be ignored.

Also found this repository that implement exactly the same feature, but unfortunately it is using Glide

https://github.com/okaybroda/ImageZoom

Found an ImageZoomHelper class inside the repo above, and it nicely makes the instagram-style pinch-zoom work!

Demo video: https://www.youtube.com/watch?v=sw-7MrK5nTw
Demo repo: https://github.com/cooltey/InstagramLikePinchZoom

scblr updated the task description. (Show Details)