fix: android Tabs selected item color incorrectly applied (#9040)

* fix: selected-item-color gets applied to wrong TabStripItems

* chore: Added selection colors to 2 ui examples.

* chore: Removing used for testing.
This commit is contained in:
Dimitris - Rafail Katsampas
2020-12-28 14:50:23 +02:00
committed by GitHub
parent e16bc606ef
commit b47ce0a97c
8 changed files with 42 additions and 39 deletions

View File

@ -0,0 +1,15 @@
import { EventData, Page, Tabs } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabs');
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById('tabs');
tabsNav.selectedIndex = 1;
}

View File

@ -4,7 +4,7 @@
</ActionBar>
<Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation" >
<TabStrip>
<TabStrip selectedItemColor="red" unSelectedItemColor="black">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->

View File

@ -4,7 +4,7 @@
</ActionBar>
<Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation" >
<TabStrip>
<TabStrip selectedItemColor="blue" unSelectedItemColor="gray">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->

View File

@ -141,6 +141,7 @@ function initializeNativeClasses() {
public items: Array<TabContentItem>;
private mCurTransaction: androidx.fragment.app.FragmentTransaction;
private mCurrentPrimaryItem: androidx.fragment.app.Fragment;
private mCurrentPosition = -1;
constructor(public owner: Tabs) {
super();
@ -238,9 +239,27 @@ function initializeNativeClasses() {
}
this.mCurrentPrimaryItem = fragment;
this.owner.selectedIndex = position;
const previousPosition = this.mCurrentPosition;
this.mCurrentPosition = position;
const tab = this.owner;
tab.selectedIndex = position;
// Update tabstrip items
if (position != previousPosition) {
const tabStripItems = tab.tabStrip && tab.tabStrip.items;
if (position >= 0 && tabStripItems && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.selectEvent);
tab._setItemColor(tabStripItems[position]);
}
if (previousPosition >= 0 && tabStripItems && tabStripItems[previousPosition]) {
tabStripItems[previousPosition]._emit(TabStripItem.unselectEvent);
tab._setItemColor(tabStripItems[previousPosition]);
}
}
const tabItems = tab.items;
const newTabItem = tabItems ? tabItems[position] : null;
@ -290,25 +309,6 @@ function initializeNativeClasses() {
return global.__native(this);
}
public onSelectedPositionChange(position: number, prevPosition: number): void {
const owner = this.owner;
if (!owner) {
return;
}
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
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]);
}
}
public onTap(position: number): boolean {
const owner = this.owner;
if (!owner) {
@ -952,11 +952,9 @@ export class Tabs extends TabsBase {
}
[selectedIndexProperty.setNative](value: number) {
// TODO
// if (Trace.isEnabled()) {
// Trace.write("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
// }
this._viewPager.setCurrentItem(value, this.animationEnabled);
if (this._viewPager.getCurrentItem() != value) {
this._viewPager.setCurrentItem(value);
}
}
[itemsProperty.getDefault](): TabContentItem[] {

View File

@ -12,7 +12,7 @@ export * from '../tab-navigation-base/tab-navigation-base';
export * from '../tab-navigation-base/tab-strip';
export * from '../tab-navigation-base/tab-strip-item';
export const traceCategory = 'TabView';
export const traceCategory = 'Tabs';
@CSSType('Tabs')
export class TabsBase extends TabNavigationBase implements TabsDefinition {

View File

@ -56,7 +56,7 @@ public class TabViewPager extends ViewPager {
@Override
public void setCurrentItem(int item) {
boolean smoothScroll = this.animationEnabled && this.swipePageEnabled;
boolean smoothScroll = this.animationEnabled;
super.setCurrentItem(item, smoothScroll);
}
}

View File

@ -317,10 +317,6 @@ public class TabsBar extends HorizontalScrollView {
return true;
}
public void onSelectedPositionChange(int position, int prevPosition) {
// to be overridden in JS
}
private void populateTabStrip() {
final PagerAdapter adapter = mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
@ -394,12 +390,6 @@ public class TabsBar extends HorizontalScrollView {
return;
}
int prevPosition = mTabStrip.getSelectedPosition();
if (prevPosition != position) {
onSelectedPositionChange(position, prevPosition);
}
mTabStrip.onTabsViewPagerPageChanged(position, positionOffset);
View selectedTitle = mTabStrip.getChildAt(position);