[TIMOB-10805] iOS: ScrollView should adjust contentSize appropriately when zoomed
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Low |
Status | Open |
Resolution | Unresolved |
Affected Version/s | Release 3.0.0 |
Fix Version/s | n/a |
Components | iOS |
Labels | api |
Reporter | Arthur Evans |
Assignee | Unknown |
Created | 2012-09-06T15:15:00.000+0000 |
Updated | 2018-02-28T20:03:55.000+0000 |
Description
This issue occurs because of the interaction of contentWidth/contentHeight with the the size of the scrollview. On iOS, content size can't be less than the size of the scrollview. i.e., the content size is padded to the size of the scrollview. When zoomScale is increased, it is this *padded* content size that's zoomed. Consequently, we get twice as much padding.
Consider the following test case:
imageWin = Ti.UI.createWindow({
backgroundColor:'red',
});
var scrollView = Ti.UI.createScrollView({
contentWidth: Ti.UI.SIZE,
contentHeight: Ti.UI.SIZE,
backgroundColor: 'white',
maxZoomScale:2,
minZoomScale:1,
zoomScale: 1,
scale: 1
});
scrollView.add(Ti.UI.createImageView({
image: 'http://www.nypost.com/rw/nypost/2012/09/05/pagesix/web_photos/red_foo_wireimage--300x300.jpg',
preventDefaultImage: true,
}));
scrollView.addEventListener('dblclick', function(e) {
if(scrollView.zoomScale == 1) {
scrollView.zoomScale = 2;
scrollView.setContentOffset({x: e.x, y : e.y});
}
else if(scrollView.zoomScale > 1) scrollView.zoomScale = 1;
});
imageWin.add(scrollView);
imageWin.open();
Initially, the image is 300x300, smaller than the screen, and scrolling is disabled.
When zoomScale is set to 2, the image is zoomed, but there is a great deal of padding around the image, so it's possible to scroll past the edge of the image and have the scrollview stay there.
Expected results:
- When zoomed, the scrollview should have an effective content size of 600 x 600. Scrolling past the edge of the image would cause the scrollview to snap back to the image edge.
Actual results:
- When zoomed, the effective content size is 640x920, and there's about 160 pixels of padding on the top and bottom of the image.
There is workaround for this: if the scrollview has only a single child, like here, the child can either be resized manually (by setting width and height) or scaled using a transform.
No comments