fix: item color setting in android

This commit is contained in:
Vasil Trifonov
2020-03-13 18:35:38 +02:00
parent 6d129eca3e
commit d03d91d468
4 changed files with 98 additions and 48 deletions

View File

@@ -169,10 +169,12 @@ function initializeNativeClasses() {
if (position >= 0 && tabStripItems && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.selectEvent);
owner._setItemColor(tabStripItems[position]);
}
if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
owner._setItemColor(tabStripItems[prevPosition]);
}
}
@@ -742,31 +744,51 @@ export class BottomNavigation extends TabNavigationBase {
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
const isSelected = (tabStripItem._index === this.selectedIndex);
if (isSelected) {
value = this._selectedItemColor || value;
} else {
value = this._unSelectedItemColor || value;
public _setItemColor(tabStripItem: TabStripItem) {
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (!itemColor) {
return;
}
if (typeof value === "number") {
tabStripItem.nativeViewProtected.setTextColor(value);
} else {
tabStripItem.nativeViewProtected.setTextColor(value.android);
// set label color
tabStripItem.nativeViewProtected.setTextColor(itemColor.android);
// set icon color
this._setIconColor(tabStripItem, itemColor);
}
private _setIconColor(tabStripItem: TabStripItem, color?: Color) {
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index);
const drawableInfo = this.getIconInfo(tabStripItem, color);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
imgView.setImageDrawable(drawableInfo.drawable);
if (color) {
imgView.setColorFilter(color.android);
}
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (itemColor) {
// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
// so it does not respect the css color
return;
}
const androidColor = value instanceof Color ? value.android : value;
tabStripItem.nativeViewProtected.setTextColor(androidColor);
}
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
const index = tabStripItem._index;
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (itemColor) {
// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
// so it does not respect the css color
return;
}
const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
const drawableInfo = this.getIconInfo(tabStripItem, color);
imgView.setImageDrawable(drawableInfo.drawable);
this._setIconColor(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {

View File

@@ -300,10 +300,12 @@ function initializeNativeClasses() {
if (position >= 0 && tabStripItems && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.selectEvent);
owner._setItemColor(tabStripItems[position]);
}
if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
owner._setItemColor(tabStripItems[prevPosition]);
}
}
@@ -834,31 +836,51 @@ export class Tabs extends TabsBase {
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
const isSelected = (tabStripItem._index === this.selectedIndex);
if (isSelected) {
value = this._selectedItemColor || value;
} else {
value = this._unSelectedItemColor || value;
public _setItemColor(tabStripItem: TabStripItem) {
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (!itemColor) {
return;
}
if (typeof value === "number") {
tabStripItem.nativeViewProtected.setTextColor(value);
} else {
tabStripItem.nativeViewProtected.setTextColor(value.android);
// set label color
tabStripItem.nativeViewProtected.setTextColor(itemColor.android);
// set icon color
this._setIconColor(tabStripItem, itemColor);
}
private _setIconColor(tabStripItem: TabStripItem, color?: Color) {
const tabBarItem = this._tabsBar.getViewForItemAt(tabStripItem._index);
const drawable = this.getIcon(tabStripItem, color);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
imgView.setImageDrawable(drawable);
if (color) {
imgView.setColorFilter(color.android);
}
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (itemColor) {
// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
// so it does not respect the css color
return;
}
const androidColor = value instanceof Color ? value.android : value;
tabStripItem.nativeViewProtected.setTextColor(androidColor);
}
public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
const index = tabStripItem._index;
const tabBarItem = this._tabsBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
if (itemColor) {
// the itemColor is set through the selectedItemColor and unSelectedItemColor properties
// so it does not respect the css color
return;
}
const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
const drawable = this.getIcon(tabStripItem, color);
imgView.setImageDrawable(drawable);
this._setIconColor(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {

View File

@@ -198,6 +198,9 @@ public class BottomNavigationBar extends LinearLayout {
} else if (tabItem.iconDrawable != null) {
imgView.setImageDrawable(tabItem.iconDrawable);
imgView.setVisibility(VISIBLE);
if (tabItem.color != 0) {
imgView.setColorFilter(tabItem.color);
}
} else {
imgView.setVisibility(GONE);
}

View File

@@ -160,7 +160,7 @@ public class TabsBar extends HorizontalScrollView {
* {@link TabsBar} you are required to set any
* {@link ViewPager.OnPageChangeListener} through this method. This is so
* that the layout can update it's scroll position correctly.
*
*
* @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
*/
public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
@@ -196,25 +196,25 @@ public class TabsBar extends HorizontalScrollView {
TextView textView = (TextView)ll.getChildAt(1);
this.setupItem(ll, textView, imgView, tabItem);
}
/**
* Gets the TextView for tab item at index
*/
public TextView getTextViewForItemAt(int index){
LinearLayout ll = this.getViewForItemAt(index);
return (ll != null) ? (TextView)ll.getChildAt(1) : null;
return (ll != null) ? (TextView)ll.getChildAt(1) : null;
}
/**
* Gets the LinearLayout container for tab item at index
*/
public LinearLayout getViewForItemAt(int index){
LinearLayout result = null;
if(this.mTabStrip.getChildCount() > index){
result = (LinearLayout)this.mTabStrip.getChildAt(index);
}
return result;
}
@@ -262,16 +262,19 @@ public class TabsBar extends HorizontalScrollView {
ll.addView(textView);
return ll;
}
private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, TabItemSpec tabItem){
float density = getResources().getDisplayMetrics().density;
if (tabItem.iconId != 0) {
imgView.setImageResource(tabItem.iconId);
imgView.setVisibility(VISIBLE);
} else if (tabItem.iconDrawable != null) {
imgView.setImageDrawable(tabItem.iconDrawable);
imgView.setVisibility(VISIBLE);
if (tabItem.color != 0) {
imgView.setColorFilter(tabItem.color);
}
} else {
imgView.setVisibility(GONE);
}
@@ -283,14 +286,14 @@ public class TabsBar extends HorizontalScrollView {
if (tabItem.typeFace != null) {
textView.setTypeface(tabItem.typeFace);
}
if (tabItem.fontSize != 0) {
textView.setTextSize(tabItem.fontSize);
}
if (tabItem.color != 0) {
textView.setTextColor(tabItem.color);
mTabStrip.setShouldUpdateTabsTextColor(false);
mTabStrip.setShouldUpdateTabsTextColor(false);
}
} else {
textView.setVisibility(GONE);
@@ -305,7 +308,7 @@ public class TabsBar extends HorizontalScrollView {
} else {
ll.setMinimumHeight((int) (SMALL_MIN_HEIGHT * density));
}
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
lp.width = 0;