feat(android): parity for Ti.UI.View clipMode
Based on https://github.com/mbender74/clipview/tree/main/ti.clipview
Top: this PR with clipping disabled
bottom: default behavior
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_DISABLEDandTi.UI.iOS.CLIP_MODE_DISABLEDfor backwards compatibility
cc @prashantsaini1
@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
clipModefrom theroot yellow viewdespite that thered viewhas itclipMode: disabledalready.
Correct. Check the readme notes Android: This property is "creation only" and has to be on the top-level view..
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 😄
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:
The loop is running now. The only issue: we should stop it so it won't run to the root item:
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.