kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-17 23:04:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support customizing thumb, track and progress colors for slider on Android

Browse Source 
Summary:
**Motivation**

Ability to customize slider colors is desirable to match the brand. Currently iOS allows using images for slider parts, but android doesn't have any customization options. This PR adds support for customizing `thumbTintColor`, `trackTintColor` and `progressTintColor`.

**Test plan (required)**

Run UIExplorer example with the changes and verify everything works fine.

![image](https://cloud.githubusercontent.com/assets/1174278/22020752/f32a6eec-dcdf-11e6-928d-481bb28bd0a3.png)

cc brentvatne
Closes https://github.com/facebook/react-native/pull/11946

Differential Revision: D4427474

fbshipit-source-id: ec3a38db600bac6108691a4cfa15e2409143b9f3
This commit is contained in:
Satyajit Sahoo
2017-02-01 00:36:08 -08:00
committed by Facebook Github Bot
parent d1990f8fc4
commit 295a0150d4
5 changed files with 66 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java
View File

@@ -9,16 +9,16 @@
package com.facebook.react.views.slider;
import java.util.Map;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SeekBar;
import com.facebook.yoga.YogaMeasureMode;
import com.facebook.yoga.YogaMeasureFunction;
import com.facebook.yoga.YogaNodeAPI;
import com.facebook.yoga.YogaMeasureOutput;
import com.facebook.react.R;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.LayoutShadowNode;
@@ -27,6 +27,12 @@ import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.yoga.YogaMeasureFunction;
import com.facebook.yoga.YogaMeasureMode;
import com.facebook.yoga.YogaMeasureOutput;
import com.facebook.yoga.YogaNodeAPI;
import java.util.Map;
/**
* Manages instances of {@code ReactSlider}.
@@ -145,6 +151,37 @@ public class ReactSliderManager extends SimpleViewManager<ReactSlider> {
view.setStep(value);
}
@ReactProp(name = "thumbTintColor", customType = "Color")
public void setThumbTintColor(ReactSlider view, Integer color) {
if (color == null) {
view.getThumb().clearColorFilter();
} else {
view.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
}
}
@ReactProp(name = "minimumTrackTintColor", customType = "Color")
public void setMinimumTrackTintColor(ReactSlider view, Integer color) {
LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
Drawable background = drawable.findDrawableByLayerId(android.R.id.background);
if (color == null) {
background.clearColorFilter();
} else {
background.setColorFilter(color, PorterDuff.Mode.SRC_IN);
}
}
@ReactProp(name = "maximumTrackTintColor", customType = "Color")
public void setMaximumTrackTintColor(ReactSlider view, Integer color) {
LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
Drawable progress = drawable.findDrawableByLayerId(android.R.id.progress);
if (color == null) {
progress.clearColorFilter();
} else {
progress.setColorFilter(color, PorterDuff.Mode.SRC_IN);
}
}
@Override
protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSlider view) {
view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);