feat(ios,android): expose Ti.UI.Slider „tintColor“ and „trackTintColo…

…r“ (#11074)

* feat(ios,android): support „tintColor“ and „trackTintColor“ on slider

* feat(android): allow slider tint colors to be set dynamically

Closes TIMOB-27272

android/modules/ui/src/java/ti/modules/titanium/ui/SliderProxy.java

@@ -24,6 +24,8 @@
 		TiC.PROPERTY_SPLIT_TRACK,
 		"leftTrackImage",
 		"rightTrackImage",
+		TiC.PROPERTY_TINT_COLOR,
+		TiC.PROPERTY_TRACK_TINT_COLOR,
 		TiC.PROPERTY_VALUE
 })
 // clang-format on

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

@@ -71,7 +71,7 @@ public void processProperties(KrollDict d)
 		if (d.containsKey(TiC.PROPERTY_TINT_COLOR)) {
 			handleSetTintColor(TiConvert.toColor(d, TiC.PROPERTY_TINT_COLOR));
 		}
-		if (d.containsKey(TiC.PROPERTY_TINT_COLOR)) {
+		if (d.containsKey(TiC.PROPERTY_TRACK_TINT_COLOR)) {
 			handleSetTrackTintColor(TiConvert.toColor(d, TiC.PROPERTY_TRACK_TINT_COLOR));
 		}
 		updateProgress();

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

@@ -18,6 +18,7 @@
 import org.appcelerator.titanium.util.TiUIHelper;
 import org.appcelerator.titanium.view.TiUIView;
 
+import android.content.res.ColorStateList;
 import android.graphics.Rect;
 import android.graphics.drawable.ClipDrawable;
 import android.graphics.drawable.Drawable;
@@ -101,6 +102,12 @@ public void processProperties(KrollDict d)
 		if (d.containsKey("leftTrackImage") || d.containsKey("rightTrackImage")) {
 			updateTrackingImages(seekBar, d);
 		}
+		if (d.containsKeyAndNotNull(TiC.PROPERTY_TINT_COLOR)) {
+			handleSetTintColor(TiConvert.toColor(d, TiC.PROPERTY_TINT_COLOR));
+		}
+		if (d.containsKeyAndNotNull(TiC.PROPERTY_TRACK_TINT_COLOR)) {
+			handleSetTrackTintColor(TiConvert.toColor(d, TiC.PROPERTY_TRACK_TINT_COLOR));
+		}
 		updateRange();
 		updateControl();
 		updateRightDrawable();
@@ -224,7 +231,12 @@ public void propertyChanged(String key, Object oldValue, Object newValue, KrollP
 		if (Log.isDebugModeEnabled()) {
 			Log.d(TAG, "Property: " + key + " old: " + oldValue + " new: " + newValue, Log.DEBUG_MODE);
 		}
+
 		SeekBar seekBar = (SeekBar) getNativeView();
+		if (seekBar == null) {
+			return;
+		}
+
 		if (key.equals(TiC.PROPERTY_VALUE)) {
 			pos = TiConvert.toFloat(newValue);
 			int curPos = (int) Math.floor(scaleFactor * (pos + offset));
@@ -268,6 +280,16 @@ public void propertyChanged(String key, Object oldValue, Object newValue, KrollP
 			updateControl();
 			int curPos = (int) Math.floor(scaleFactor * (pos + offset));
 			onProgressChanged(seekBar, curPos, true);
+		} else if (key.equals(TiC.PROPERTY_TINT_COLOR)) {
+			String stringValue = TiConvert.toString(newValue);
+			if (stringValue != null) {
+				handleSetTintColor(TiConvert.toColor(stringValue));
+			}
+		} else if (key.equals(TiC.PROPERTY_TRACK_TINT_COLOR)) {
+			String stringValue = TiConvert.toString(newValue);
+			if (stringValue != null) {
+				handleSetTrackTintColor(TiConvert.toColor(stringValue));
+			}
 		} else if (key.equals("thumbImage")) {
 			//updateThumb(seekBar, proxy.getDynamicProperties());
 			//seekBar.invalidate();
@@ -350,6 +372,26 @@ public void onStopTrackingTouch(SeekBar seekBar)
 		fireEvent(TiC.EVENT_STOP, data, false);
 	}
 
+	protected void handleSetTintColor(int color)
+	{
+		SeekBar seekBar = (SeekBar) getNativeView();
+
+		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+			ColorStateList singleColorStateList = ColorStateList.valueOf(color);
+			seekBar.setProgressTintList(singleColorStateList);
+		}
+	}
+
+	protected void handleSetTrackTintColor(int color)
+	{
+		SeekBar seekBar = (SeekBar) getNativeView();
+
+		ColorStateList singleColorStateList = ColorStateList.valueOf(color);
+		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+			seekBar.setProgressBackgroundTintList(singleColorStateList);
+		}
+	}
+
 	private float scaledValue()
 	{
 		return pos + min;

apidoc/Titanium/UI/Slider.yml

@@ -391,6 +391,18 @@ properties:
     type: [String, Titanium.Blob]
     platforms: [android, iphone, ipad]
 
+  - name: tintColor
+    summary: The color shown for the portion of the progress bar that is filled.
+    since: {iphone: "3.1.3", ipad: "3.1.3", android: "8.3.0"}
+    osver: {android: {min: "5.0"}}
+
+  - name: trackTintColor
+    summary: The color shown for the portion of the progress bar that is not filled.
+    type: String
+    platforms: [iphone, ipad, android]
+    since: {iphone: "8.3.0", ipad: "8.3.0", android: "8.3.0"}
+    osver: {android: {min: "5.0"}}
+
   - name: value
     summary: Current value of the slider.
     type: String

iphone/Classes/TiUISlider.m

@@ -253,6 +253,12 @@ - (void)setEnabled_:(id)value
   [[self sliderView] setEnabled:[TiUtils boolValue:value]];
 }
 
+- (void)setTrackTintColor_:(id)value
+{
+  UIColor *newColor = [[TiUtils colorValue:value] _color];
+  [[self sliderView] setMaximumTrackTintColor:newColor];
+}
+
 - (CGFloat)verifyHeight:(CGFloat)suggestedHeight
 {
   CGFloat result = [[self sliderView] sizeThatFits:CGSizeZero].height;

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

@@ -0,0 +1,21 @@
+/*
+ * Appcelerator Titanium Mobile
+ * Copyright (c) 2015-Present by Axway, Inc. All Rights Reserved.
+ * Licensed under the terms of the Apache Public License
+ * Please see the LICENSE included with this distribution for details.
+ */
+/* eslint-env mocha */
+/* eslint no-unused-expressions: "off" */
+'use strict';
+const should = require('./utilities/assertions');
+
+describe('Titanium.UI.Slider', function () {
+	it.windowsMissing('tintColor/trackTintColor', () => {
+		const slider = Ti.UI.createSlider({
+			tintColor: 'red',
+			trackTintColor: 'green'
+		});
+		should(slider.tintColor).be.eql('red');
+		should(slider.trackTintColor).be.eql('green');
+	});
+});