[TIMOB-17363] Android/iOS: Added "MaskedImage" support to Android. Moved BLEND_MODE constants to "Ti.UI". #10013

jquick-axway · 2018-04-26T05:27:26Z

JIRA:
https://jira.appcelerator.org/browse/TIMOB-17363

Summary:

Moved BLEND_MODE_* constants from Ti.UI.iOS to Ti.UI.
- Constants are still defined under Ti.UI.iOS for backward compatibility on iOS, but are documented as deprecated.
Added Ti.UI.MaskedImage support to Android.
- Intended as alternate solution to using rounded borders around images, which has hardware acceleration issues on Android.
Supports 9-patch images, but only if loaded from APK's "res" directory.
Supports base View class' tintColor and opacity properties. Applied to final result.
Super optimized masking via GPU shaders on Android for:
- mask and tint for all blend modes.
- mask and image for modes SOURCE_IN and DESTINATION_IN.
All other masking combinations not in above list resort to less optimized rendering on Android.
Android does not support the following blend modes (will log a warning):
- BLEND_MODE_COLOR
- BLEND_MODE_COLOR_BURN
- BLEND_MODE_COLOR_DODGE
- BLEND_MODE_DIFFERENCE
- BLEND_MODE_EXCLUSION
- BLEND_MODE_HARD_LIGHT
- BLEND_MODE_HUE
- BLEND_MODE_LUMINOSITY
- BLEND_MODE_PLUS_DARKER
- BLEND_MODE_SATURATION
- BLEND_MODE_SOFT_LIGHT
Known issues (to be written up later):
- Will not auto-rotate JPEGs based on EXIF orientation.
- toImage() renders bad image on Android 7.0 and higher when masking an image.

Test:
Run the below test procedure on...

Android 4.1
Android 4.4
Android 7.0 or higher

Test procedure...

Create a classic app and add the contents of "MaskedImageTest.zip" to it from TIMOB-17363.
On app startup, verify appc logo is masked within a circle like Screenshot1
Tap the "Size" button and select "Ti.UI.FILL".
Verify image stretches to fit container like Screenshot2.
Rotate device to landscape.
Verify image stretches to fit landscape container like Screenshot3.
Rotate device back to portrait.
Tap the "Mode" button and select "SOURCE_OUT".
Verify image is only displayed outside of circle like Screenshot4.
Tap the "Mask" button and select "MaskCircleLock".
Tap the "Image" button and select "None".
Tap the "Tint" button and select "Red".
Verify lock is red, within a white circle, and outside of circle is red like Screenshot5.
Tap the "Mode" button and select "SOURCE_IN".
Verify lock is white with a red circle like Screenshot6.
Tap the "Size" button and select "300dp".
Verify circle image is no longer stretched like Screenshot7.
Tap the "Image" button and select "MaskVerticalGradient".
Verify circle has a gradient (light red on top; full red on bottom) like Screenshot8.

…ved BLEND_MODE constants from "Ti.UI.iOS" to "Ti.UI".

hansemannn

Left some review changes, mainly about docs and iOS.

hansemannn · 2018-04-26T20:05:46Z

apidoc/Titanium/UI/UI.yml

    type: Number
    permission: read-only
-    platforms: [iphone, ipad]
+    since: "7.2.0"
+    platforms: [android, iphone, ipad]


If it is not supported on Android, I would just leave out the android key. If we would be very exact here, we would leave the iOS only constants on the iOS namespace and put the parity ones here.

I still define the constant on Android, but log a warning instead. I think it's better than letting the app crash.

It is possible to add the other modes on Android, but we would have to manipulate the bitmap pixels ourselves the slow way. (yuck)

I'll remove the "android" platform keys from the unsupported constants.

hansemannn · 2018-04-26T20:10:08Z

iphone/Classes/UIModule.m

@@ -164,6 +164,35 @@ - (TiUIActivityIndicatorStyleProxy *)ActivityIndicatorStyle
 MAKE_SYSTEM_PROP(PICKER_TYPE_TIME, UIDatePickerModeTime);
 MAKE_SYSTEM_PROP(PICKER_TYPE_COUNT_DOWN_TIMER, UIDatePickerModeCountDownTimer);

+MAKE_SYSTEM_PROP(BLEND_MODE_NORMAL, kCGBlendModeNormal);


Please deprecate the old ones. We have a macro for this:

// Definition MAKE_SYSTEM_PROP_DEPRECATED_REPLACED(name, map, api, in, newapi); // Example MAKE_SYSTEM_PROP_DEPRECATED_REPLACED(BLEND_MODE_NORMAL, kCGBlendModeNormal, @"UI.iOS.BLEND_MODE_NORMAL", @"7.3.0", @"UI.BLEND_MODE_NORMAL");

Note: The Ti / Titanium is not included into the log as it is replaced by the app name during project generation. For the log, it's manually constructed to avoid being replaced, so we leave it out in every log.

hansemannn · 2018-04-26T20:10:30Z

tests/Resources/ti.ui.maskedimage.addontest.js

+			image: '/SplashScreen.png',
+			mode: Ti.UI.BLEND_MODE_SOURCE_IN,
+			width: Ti.UI.FILL,
+			height: Ti.UI.FILL,


It should fill by default. How does this behave on iOS?

Android currently auto-sizes by default. I'll double check the iOS handling.

I just re-tested this on iOS. You're right. An iOS MaskedImage does a Ti.UI.FILL by default. I'll change Android to make it match.

Also, our iOS MaskedImage doesn't appear to support Ti.UI.SIZE. I get a 0x0 size view when attempting to auto-size it. On Android, I made this work. I auto-size based on the image if available, otherwise I fallback to auto-sizing based on the mask size. (I'll keep this behavior.)

jquick-axway · 2018-04-26T22:00:26Z

@hansemannn, do you know if we need to do anything on the Alloy side after moving the BLEND_MODE constants?

garymathews · 2018-04-27T18:24:24Z

android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIMaskedImage.java

+						// Android 4.4 has a bug where if bitmap byte width does not fit a 4 byte packing alignment,
+						// then mask will appear skewed. Resizing bitmap doesn't work. So, give up if this happens.
+						if ((Build.VERSION.SDK_INT == 19) || (Build.VERSION.SDK_INT == 20)) {
+							if ((bitmap.getWidth() % 4) != 0) {


Could this be moved above the bitmap.extractAlpha() to fail before reaching bitmap.extractAlpha() ?

Ahh, good catch. I was trying to "fix" the resulting grayscaled bitmap, but later gave up.

garymathews · 2018-04-27T18:33:37Z

android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIMaskedImage.java

+	{
+		if (this.maskedDrawable != null) {
+			if (value != null) {
+				int color = TiConvert.toColor(TiConvert.toString(value));


Maybe validate if value is a string?

garymathews · 2018-04-27T18:33:51Z

android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIMaskedImage.java

+	{
+		if (this.maskedDrawable != null) {
+			if (value != null) {
+				int color = TiConvert.toColor(TiConvert.toString(value));


- Ti.UI.iOS BLEND_MODE constants will now log a warning if used. - Modified Android's MaskedImage to be Ti.UI.FILL by default like iOS. (Was Ti.UI.SIZE) - Now logs a warning if a non-string type was given to MaskedImage color properties. - Modified Android to support mask, image, and tint all at the same time like iOS. * Used to not support both tint and image at the same time. - Fixed dynamic changes of "mask" and "tint" properties on Android. (Would not always update onscreen.) - Updated docs to indicate which BLEND_MODE constants are not supported by the Android platform.

jquick-axway · 2018-04-28T04:26:12Z

Updated PR:

Ti.UI.iOS BLEND_MODE constants will now log a warning if used.
Modified Android's MaskedImage to be Ti.UI.FILL by default like iOS. (Was Ti.UI.SIZE.)
Now logs a warning if a non-string type was given to tint and tintColor properties.
Modified Android to support mask, image, and tint all at the same time like iOS.
- Used to not support both tint and image at the same time.
Fixed dynamic changes of mask, tint, and mode properties on Android. (Would not always update onscreen.)
Updated docs to indicate which BLEND_MODE constants are not supported by the Android platform.

build · 2018-05-17T10:19:50Z

	Messages
📖	💾 Here's the generated SDK zipfile.

Generated by 🚫 dangerJS

jquick-axway added 2 commits April 25, 2018 21:01

[TIMOB-17363] Android/iOS: Added "MaskedImage" support on Android. Mo…

64a27cd

…ved BLEND_MODE constants from "Ti.UI.iOS" to "Ti.UI".

Android/iOS: Added "Ti.UI.MaskedImage" unit tests.

793d5be

jquick-axway added ios android feature docs parity 👯‍♀️ labels Apr 26, 2018

jquick-axway added this to the 7.2.0 milestone Apr 26, 2018

jquick-axway requested review from garymathews and hansemannn April 26, 2018 05:27

build added android docs ios labels Apr 26, 2018

Android: Updated code formatting for [TIMOB-17363]

abfa281

build added android docs ios labels Apr 26, 2018

Merge branch 'master' into TIMOB-17363

760790a

build added android docs ios labels Apr 26, 2018

Android/iOS: Updated formatting of MaskedImage unit test.

828d5b9

build added android docs ios labels Apr 26, 2018

hansemannn requested changes Apr 26, 2018

View reviewed changes

garymathews reviewed Apr 27, 2018

View reviewed changes

build added android docs ios labels Apr 28, 2018

jquick-axway mentioned this pull request May 2, 2018

[TIMOB-16878] Android: Refactored ScrollableView #9696

Merged

build added android docs ios labels May 7, 2018

sgtcoolguy modified the milestones: 7.2.0, 7.3.0 May 16, 2018

hansemannn added 4 commits May 17, 2018 12:03

Merge branch 'master' into TIMOB-17363

d9372fc

Update UI.yml

cdc60bc

Update iOS.yml

8b65e86

Update TiUIiOSProxy.m

4bb03ef

hansemannn approved these changes May 17, 2018

View reviewed changes

hansemannn merged commit a69b61a into tidev:master May 17, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TIMOB-17363] Android/iOS: Added "MaskedImage" support to Android. Moved BLEND_MODE constants to "Ti.UI". #10013

[TIMOB-17363] Android/iOS: Added "MaskedImage" support to Android. Moved BLEND_MODE constants to "Ti.UI". #10013

jquick-axway commented Apr 26, 2018 •

edited

hansemannn left a comment

hansemannn Apr 26, 2018

jquick-axway Apr 26, 2018

hansemannn Apr 26, 2018

jquick-axway Apr 26, 2018

hansemannn Apr 26, 2018

jquick-axway Apr 26, 2018

jquick-axway Apr 26, 2018

jquick-axway commented Apr 26, 2018

garymathews Apr 27, 2018

jquick-axway Apr 28, 2018

garymathews Apr 27, 2018

garymathews Apr 27, 2018

jquick-axway commented Apr 28, 2018

build commented May 17, 2018 •

edited

[TIMOB-17363] Android/iOS: Added "MaskedImage" support to Android. Moved BLEND_MODE constants to "Ti.UI". #10013

[TIMOB-17363] Android/iOS: Added "MaskedImage" support to Android. Moved BLEND_MODE constants to "Ti.UI". #10013

Conversation

jquick-axway commented Apr 26, 2018 • edited

hansemannn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquick-axway commented Apr 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquick-axway commented Apr 28, 2018

build commented May 17, 2018 • edited

jquick-axway commented Apr 26, 2018 •

edited

build commented May 17, 2018 •

edited