titanium-sdk icon indicating copy to clipboard operation
titanium-sdk copied to clipboard

feat(android): parity for Ti.UI.View clipMode

Open m1ga opened this issue 8 months ago • 5 comments

Based on https://github.com/mbender74/clipview/tree/main/ti.clipview

Top: this PR with clipping disabled bottom: default behavior Screenshot_20250322-115430

Run the code and click the first view to toggle:

var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
	top: 0,
	backgroundColor: 'yellow',
	height: 300,
	width: 400,
});
var nonClippingView = Ti.UI.createView({
	backgroundColor: 'red',
	height: 200,
	width: 200,
	clipMode: Ti.UI.CLIP_MODE_DISABLED
});
var insideViewB = Ti.UI.createView({
	backgroundColor: 'blue',
	height: 10,
	width: 300,
});
view.add(nonClippingView)
nonClippingView.add(insideViewB);
win.add(view);

var contentView = Ti.UI.createView({
	top: 330,
	backgroundColor: 'yellow',
	height: 300,
	width: 400,
});
var clippingView = Ti.UI.createView({
	backgroundColor: 'red',
	height: 200,
	width: 200
});
var insideViewA = Ti.UI.createView({
	backgroundColor: 'blue',
	height: 10,
	width: 300
});
contentView.add(clippingView);
clippingView.add(insideViewA);
win.add(contentView);
var toggle = true;
view.addEventListener("click", function() {
	if (toggle) {
		nonClippingView.clipMode = Ti.UI.CLIP_MODE_ENABLED
	} else {
		nonClippingView.clipMode = Ti.UI.CLIP_MODE_DISABLED
	}
	toggle = !toggle;
});
win.open()

  • iOS works now too with Ti.UI.CLIP_MODE_DISABLED and Ti.UI.iOS.CLIP_MODE_DISABLED for backwards compatibility

m1ga avatar Mar 22 '25 10:03 m1ga

cc @prashantsaini1

hansemannn avatar Apr 28 '25 08:04 hansemannn

@m1ga I tested the PR and it does not work as intended. It does not allow to change property once set. Also it does not work if we remove the clipMode from the root yellow view despite that the red view has it clipMode: disabled already.

Correct. Check the readme notes Android: This property is "creation only" and has to be on the top-level view..

m1ga avatar Apr 30 '25 07:04 m1ga

Ok, I didn't check the readme notes, but rather compared this property with iOS where it properly works as expected. I believe we should do more testing around it as Android has a pretty different behaviour to both these properties. And yes, it requires to be on top-level view, which actually we can set ourselves in SDK.

I suggest that we introduce the padding property as well so we can give more flexibilities to use setClipToPadding() which allows to create more immersive scrolling/animation experience. Though a low priority for me 😄

prashantsaini1 avatar Apr 30 '25 07:04 prashantsaini1

And yes, it requires to be on top-level view, which actually we can set ourselves in SDK.

very good idea! Yeah, I'll do some more testing and adjust the code but thanks for the check and the feedback :+1:

m1ga avatar Apr 30 '25 07:04 m1ga

The loop is running now. The only issue: we should stop it so it won't run to the root item: Bildschirmfoto_20250522_185109 Here the marked TiCompositeLayout should be the last one, the next parent is Ti.UI.Window. Currently I've added a check for the API name but of course that should be more flexible.

m1ga avatar May 22 '25 16:05 m1ga