[TIMOB-12262] iOS: enable native Photos gallery-like zoomable image

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-02-12T20:06:42.000+0000
Affected Version/s	n/a
Fix Version/s	Release 3.1.0, 2013 Sprint 04 API, 2013 Sprint 04
Components	iOS
Labels	module_imageview, qe-review, qe-testadded
Reporter	Davide Cassenti
Assignee	Vishal Duggal
Created	2013-01-10T04:08:46.000+0000
Updated	2013-03-04T21:44:19.000+0000

Description

Problem description

ImageView should support a Photos gallery-like pan and zoom; this means, the image should be centered at first, then should bounce back on all sides when is bigger than the screen. For more information, we are currently using the following code:

var win1 = Titanium.UI.createWindow({
    backgroundColor:'#fff'
});

var scrollView = Ti.UI.createScrollView({
  maxZoomScale: 4.0,
  minZoomScale: 1.0,
  zoomScale: 1.0,
});

var wrapper = Ti.UI.createView({
    width:'100%',
    height:'100%',
    backgroundColor:'pink'
})
var imageView = Ti.UI.createImageView({
  image: 'http://www.naturewalls.org/wp-content/uploads/2010/06/mirror_lake_in_the_mountains_wallpaper.jpg'
});

wrapper.add(imageView);
scrollView.add(wrapper);
win1.add(scrollView);

win1.open();

This works fairly well, but when zooming in, the "borders" on top and bottom (or left-right if the image is portrait) will not disappear, but will be zoomed as well. Need something that behaves as the native gallery pan and zoom.

Comments

Pedro Enrique 2013-02-07

This works as expected in Ti SDK 3.0.2 and 3.1.0 from the CI builds:

   var win = Ti.UI.createWindow({
       backgroundColor: 'white'
   });
   
   var scrollView = Ti.UI.createScrollView({
       maxZoomScale: 3,
       contentWidth: 'auto',
       contentHeight: 'auto'
   });
   
   var img = Ti.UI.createImageView({
       image: 'photo.jpg',
       width:Ti.UI.SIZE,
       hight: Ti.UI.SIZE
   });
   
   function onImageLoad(e) {
       var scaleWidth = win.size.width / img.size.width;
       var scaleHeight = win.size.height / img.size.height;
       // Set the initial ZoomScale
       // And the MinZoomScale
       scrollView.zoomScale = scrollView.minZoomScale = Math.min(scaleWidth, scaleHeight);
   }
   
   img.addEventListener('load', onImageLoad);
   
   scrollView.add(img);
   win.add(scrollView);
   win.open();

This ticket can be closed.

Vishal Duggal 2013-02-07

This should work on 3.1.0 CI. Might not work on 3.0.2 CI because of issue reported in TIMOB-11610
Blain Hamon 2013-02-08

Natively, there is no zooming of an imageview. Native implementations involve putting zooming scroll views (Ti.UI.ScrollView) inside a paging scroll view (Ti.UI.ScrollableView), which is exactly what Pedro's code does. If we were to put ALL image views inside scroll views, it would significantly negatively impact performance for all image views. Moving to make this a won't fix, given that the proper code is to implement this in JS and not add bloat to ImageView.
Vishal Duggal 2013-02-12

Fixed through JS
Olga Romero 2013-03-04

Tested the fix with: Titanium Studio, build: 3.0.2.201302191606 Titanium SDK, build: 3.1.0.v20130303194855 Devices: iPad mini iOS 6.0 iPhone5 iOS 6.1.2

JSON Source