[TIMOB-9469] Android: TiUIView does not clip children

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-09-14T17:04:37.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	Sprint 2012-14 Core, Release 2.1.3, Release 3.0.0
Components	Android
Labels	core, module_view, parity, qe-review, qe-testadded
Reporter	Max Stepanov
Assignee	Allen Yeung
Created	2012-06-08T11:39:52.000+0000
Updated	2012-11-16T06:03:03.000+0000

Description

Running the code below on iOS, the image gets clipped at scroll view border, while on Android the whole image is visible.

var win = Ti.UI.createWindow({ fullscreen: true, backgroundColor: 'white'});
     
	var view = Ti.UI.createScrollView({
		backgroundColor:'#000',
		borderRadius:150,
		height:300,
		width:300,
		contentHeight:'auto',
		contentWidth:'auto',
		minZoomScale:0.05,
		maxZoomScale:3.0,
		zoomScle:1.0
	});
	
	var image = Ti.UI.createImageView({
		image:'beach.jpg',
		height:'auto',
		width:'auto'
	});
	view.add(image);
	win.add(view);


win.open();

Attachments

File	Date	Size
flower.jpg	2012-09-14T16:58:30.000+0000	17766

Comments

Allen Yeung 2012-07-05

Another test case:

   var win = Ti.UI.createWindow({
   	fullscreen : true,
   	backgroundColor : 'white'
   });
   
   var view = Ti.UI.createScrollView({
   	backgroundColor : '#000',
   	borderRadius : 150,
   	height : 300,
   	width : 300,
   	contentHeight : 'auto',
   	contentWidth : 'auto',
   });
   
   var image = Ti.UI.createImageView({
   	image : 'flower.jpg',
   	height : 'auto',
   	width : 'auto'
   });
   view.add(image);
   win.add(view);
   
   win.addEventListener('click', function() {
   	view.borderRadius = view.borderRadius - 10;
   	image.borderWidth = 5;
   	image.borderColor = 'red';
   });
   
   win.open();

Run the test code and click the window multiple times. Expected Results: The image view should have a red border after the first time you touch it. The border radius on the scroll view should also decrease each time you click the window.

Tamila Smolich 2012-08-17

Closing as fixed. Tested and verified on: Titanium Studio, build: 2.1.1.201208091713 Titanium SDK, build: 2.2.0.v20120817135712 Devices: Nexus 7 tab (4.1.1)
Anshu Mittal 2012-09-07

Reopening to update labels
Allen Yeung 2012-09-14

Backport PR: https://github.com/appcelerator/titanium_mobile/pull/2965
Allen Yeung 2012-09-14

Opening to attach image
Ping Wang 2012-09-14

Reopen to modify Labels.

Etienne Champetier 2012-09-19

it broke my app !!!

   var row = Ti.UI.createTableViewRow({
   	height:'100dp',
   	layout:'vertical'
   });
   
   var imageAvatar = Ti.UI.createImageView({
   	height: '80dp',
   	image: "KS_nav_ui.png",
   	borderRadius:12
   });
   row.add(imageAvatar);
   var text = Ti.UI.createLabel({
   	text:"doesnt work"
   });
   row.add(text);
   
   var tableView = Ti.UI.createTableView({
     data:[row]
   });
   
   var win = Ti.UI.createWindow({backgroundColor: 'black',exitOnClose: true});
   win.add(tableView);
   win.open();

if i use the "borderRadius" propertie it break, if i comment it it work, if i revert https://github.com/appcelerator/titanium_mobile/commit/8e4d23f3e8882d0365619f96a9d1c95eee9e8e7b (backport pr) it also work

Etienne Champetier 2012-09-19

JSON Source