javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add background color css to tab strip (#7414)

Browse Source
This commit is contained in:
Martin Yankov
2019-06-28 10:07:33 +03:00
committed by GitHub
parent 62630337ef
commit 43534502f9
27 changed files with 334 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
e2e/ui-tests-app/app/bottom-navigation/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
BottomNavigation {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

6
e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
View File

@@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar"> <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation style="background-color: green;"> <BottomNavigation>
<TabStrip> <TabStrip>
<TabStripItem title="First"></TabStripItem> <TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="Second"></TabStripItem>
@@ -11,13 +11,13 @@
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="First View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </BottomNavigation>

16
e2e/ui-tests-app/app/bottom-navigation/color-page.xml
View File

@@ -4,20 +4,20 @@
<BottomNavigation style="color: green;"> <BottomNavigation style="color: green;">
<TabStrip> <TabStrip>
<TabStripItem title="First"></TabStripItem> <TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="Second"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="First View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
View File

@@ -1,7 +1,7 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation"; import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) { export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation; const bottomNav = <BottomNavigation>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex]; const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) { if (newItem) {

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View File

@@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo"> <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar"> <ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar> </ActionBar>

6
e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
View File

@@ -11,19 +11,19 @@
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Title and icon" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Only icon" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Only title" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </BottomNavigation>

2
e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
View File

@@ -23,5 +23,5 @@
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

7
e2e/ui-tests-app/app/tabs/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
Tabs {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

22
e2e/ui-tests-app/app/tabs/background-color-page.xml
View File

@@ -1,24 +1,24 @@
<Page class="page"> <Page class="page">
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar"> <ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation style="background-color: green;"> <Tabs>
<TabStrip> <TabStrip>
<TabStripItem title="First"></TabStripItem> <TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="Second"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="First View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </Tabs>
</Page> </Page>

22
e2e/ui-tests-app/app/tabs/color-page.xml
View File

@@ -1,23 +1,23 @@
<Page class="page"> <Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar"> <ActionBar title="Tabs color" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation style="color: green;"> <Tabs style="color: green;">
<TabStrip> <TabStrip>
<TabStripItem title="First"></TabStripItem> <TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="Second"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="First View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </Tabs>
</Page> </Page>

10
e2e/ui-tests-app/app/tabs/default-page.ts
View File

@@ -1,17 +1,17 @@
import { EventData } from "tns-core-modules/data/observable"; import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page"; import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation"; import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) { export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page; const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav"); const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 0; tabsNav.selectedIndex = 0;
} }
export function goToSecond(args: EventData) { export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page; const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav"); const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 1; tabsNav.selectedIndex = 1;
} }

4
e2e/ui-tests-app/app/tabs/default-page.xml
View File

@@ -1,6 +1,6 @@
<Page> <Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar"> <ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar> </ActionBar>
<!-- w/o TabStrip --> <!-- w/o TabStrip -->
@@ -18,7 +18,7 @@
</BottomNavigation> --> </BottomNavigation> -->
<!-- w/ TabStrip --> <!-- w/ TabStrip -->
<Tabs id="bottomNav"> <Tabs id="tabsNav">
<TabStrip> <TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem> <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem> <TabStripItem>

8
e2e/ui-tests-app/app/tabs/icon-change-page.ts
View File

@@ -1,14 +1,14 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation"; import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) { export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation; const tabsNav = <Tabs>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex]; const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) { if (newItem) {
newItem.iconSource = "res://icon"; newItem.iconSource = "res://icon";
} }
const oldItem = bottomNav.tabStrip.items[args.oldIndex]; const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) { if (oldItem) {
oldItem.iconSource = "res://testlogo"; oldItem.iconSource = "res://testlogo";
} }

8
e2e/ui-tests-app/app/tabs/icon-change-page.xml
View File

@@ -1,8 +1,8 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo"> <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar"> <ActionBar title="Tabs icon change" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged"> <Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip> <TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem> <TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem> <TabStripItem iconSource="res://testlogo"></TabStripItem>
@@ -19,5 +19,5 @@
<Label text="second tab"/> <Label text="second tab"/>
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </Tabs>
</Page> </Page>

30
e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
View File

@@ -1,30 +1,30 @@
<Page class="page"> <Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar"> <ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation> <Tabs>
<TabStrip> <TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem> <TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem> <TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem> <TabStripItem title="Title"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Title and icon" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Only icon" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/> <Label text="Only title" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </Tabs>
</Page> </Page>

8
e2e/ui-tests-app/app/tabs/issue-5470-page.xml
View File

@@ -1,9 +1,9 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page"> <Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar"> <ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation> <Tabs>
<TabStrip> <TabStrip>
<TabStripItem title="Tab1"></TabStripItem> <TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem> <TabStripItem title="Tab2"></TabStripItem>
@@ -22,6 +22,6 @@
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout> <StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </Tabs>
</Page> </Page>

14
e2e/ui-tests-app/app/tabs/main-page.ts
View File

@@ -11,14 +11,14 @@ export function pageLoaded(args: EventData) {
export function loadExamples() { export function loadExamples() {
const examples = new Map<string, string>(); const examples = new Map<string, string>();
examples.set("default", "tabs/default-page"); examples.set("tabs", "tabs/tabs-page");
examples.set("issue-5470", "tabs/issue-5470-page"); examples.set("issue-5470", "tabs/issue-5470");
examples.set("background-color", "tabs/background-color-page"); examples.set("background-color", "tabs/background-color-page");
examples.set("color", "tabs/color-page"); examples.set("color", "tabs/color");
examples.set("icon-title-placement", "tabs/icon-title-placement-page"); examples.set("icon-title-placement", "tabs/icon-title-placement");
examples.set("icon-change", "tabs/icon-change-page"); examples.set("icon-change", "tabs/icon-change");
examples.set("swipe-enabled", "tabs/swipe-enabled-page"); examples.set("swipe-enabled", "tabs/swipe-enabled");
examples.set("tabs-position", "tabs/tabs-position-page"); examples.set("tabs-position", "tabs/tabs-position");
return examples; return examples;
} }

17
e2e/ui-tests-app/app/tabs/tabs-page.ts Normal file
View File

@@ -0,0 +1,17 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 1;
}

89
e2e/ui-tests-app/app/tabs/tabs-page.xml Normal file
View File

@@ -0,0 +1,89 @@
<Page>
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="tabsNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="blue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="red">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="green">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<!-- <TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem> -->
</Tabs>
<!-- =============================================================================================== -->
<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->
<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>

30
tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
View File

@@ -5,7 +5,7 @@ import { TabContentItem } from "../tab-navigation-base/tab-content-item";
// Requires // Requires
import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base"; import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { CSSType } from "../core/view"; import { CSSType, Color } from "../core/view";
import { Frame } from "../frame"; import { Frame } from "../frame";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils"; import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import { fromFileOrResource } from "../../image-source"; import { fromFileOrResource } from "../../image-source";
@@ -352,6 +352,11 @@ export class BottomNavigation extends TabNavigationBase {
}); });
this._bottomNavigationBar.setItems(tabItems); this._bottomNavigationBar.setItems(tabItems);
this.tabStrip.setNativeView(this._bottomNavigationBar);
this.tabStrip.items.forEach((item, i, arr) => {
const tv = this._bottomNavigationBar.getTextViewForItemAt(i);
item.setNativeView(tv);
});
} }
} }
@@ -359,6 +364,18 @@ export class BottomNavigation extends TabNavigationBase {
this._bottomNavigationBar.updateItemAt(index, spec); this._bottomNavigationBar.updateItemAt(index, spec);
} }
public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
return this._bottomNavigationBar.getBackground();
}
public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
if (value instanceof Color) {
this._bottomNavigationBar.setBackgroundColor(value.android);
} else {
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
}
[selectedIndexProperty.setNative](value: number) { [selectedIndexProperty.setNative](value: number) {
// const smoothScroll = false; // const smoothScroll = false;
@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
this.setAdapterItems([]); this.setAdapterItems([]);
} }
} }
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
if (value) {
const constantState = value.getConstantState();
if (constantState) {
return constantState.newDrawable(resources);
}
}
return value;
}

13
tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@@ -277,6 +277,14 @@ export class BottomNavigation extends TabNavigationBase {
super.onSelectedIndexChanged(oldIndex, newIndex); super.onSelectedIndexChanged(oldIndex, newIndex);
} }
public getTabBarBackgroundColor(): UIColor {
return this._ios.tabBar.barTintColor;
}
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
const width = layout.getMeasureSpecSize(widthMeasureSpec); const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec); const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length); const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
const states = getTitleAttributesForStates(this); const states = getTitleAttributesForStates(this);
if (this.tabStrip) {
this.tabStrip.setNativeView(this._ios.tabBar);
}
items.forEach((item, i) => { items.forEach((item, i) => {
const controller = this.getViewController(item); const controller = this.getViewController(item);
@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
applyStatesToItem(tabBarItem, states); applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem; controller.tabBarItem = tabBarItem;
tabStripItem.setNativeView(tabBarItem);
} }
controllers.addObject(controller); controllers.addObject(controller);

12
tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts vendored
View File

@@ -82,6 +82,18 @@ export class TabNavigationBase extends View {
* Method is intended to be overridden by inheritors and used as "protected" * Method is intended to be overridden by inheritors and used as "protected"
*/ */
onSelectedIndexChanged(oldIndex: number, newIndex: number): void; onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
getTabBarBackgroundColor(): any
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarBackgroundColor(value: any): void
} }
export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>; export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;

17
tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
View File

@@ -34,9 +34,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
} }
this.items.push(<TabContentItem>value); this.items.push(<TabContentItem>value);
this._addView(value); this._addView(value);
selectedIndexProperty.coerce(this); // selectedIndexProperty.coerce(this);
} else if (name === "TabStrip") { } else if (name === "TabStrip") {
this.tabStrip = value; this.tabStrip = value;
this._addView(value);
} }
} }
@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
callback(item); callback(item);
}); });
} }
const tabStrip = this.tabStrip;
if (tabStrip) {
callback(tabStrip);
}
} }
public eachChildView(callback: (child: View) => boolean) { public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// to be overridden in platform specific files // to be overridden in platform specific files
this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex }); this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex });
} }
public getTabBarBackgroundColor(): any {
// overridden by inheritors
return null;
}
public setTabBarBackgroundColor(value: any): void {
// overridden by inheritors
}
} }
export interface TabNavigationBase { export interface TabNavigationBase {

6
tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts vendored
View File

@@ -3,13 +3,15 @@
* @module "ui/tab-navigation/tab-strip" * @module "ui/tab-navigation/tab-strip"
*/ /** */ */ /** */
import { ViewBase, Property } from "../../core/view"; import { View, Property } from "../../core/view";
import { Color } from "../../../color";
import { TabStripItem } from "../tab-strip-item"; import { TabStripItem } from "../tab-strip-item";
/** /**
* Represents a tab strip. * Represents a tab strip.
*/ */
export class TabStrip extends ViewBase { export class TabStrip extends View {
/** /**
* Gets or sets the items of the tab strip. * Gets or sets the items of the tab strip.
*/ */

28
tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
View File

@@ -1,15 +1,17 @@
// Types // Types
import { TabStrip as TabStripDefinition } from "."; import { TabStrip as TabStripDefinition } from ".";
import { TabStripItem } from "../tab-strip-item"; import { TabStripItem } from "../tab-strip-item";
import { TabNavigationBase } from "../tab-navigation-base";
import { Color } from "../../../color";
import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view"; import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
// Requires // Requires
import { ViewBase, Property, CSSType } from "../../core/view"; import { View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty } from "../../core/view";
export const traceCategory = "TabView"; export const traceCategory = "TabView";
@CSSType("TabStrip") @CSSType("TabStrip")
export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder { export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
public items: TabStripItem[]; public items: TabStripItem[];
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -29,7 +31,25 @@ export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFr
// selectedIndexProperty.coerce(this); // selectedIndexProperty.coerce(this);
} }
} }
}
[backgroundColorProperty.getDefault](): Color {
const parent = <TabNavigationBase>this.parent;
return parent && parent.getTabBarBackgroundColor();
}
[backgroundColorProperty.setNative](value: Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarBackgroundColor(value);
}
[backgroundInternalProperty.getDefault](): any {
return null;
}
[backgroundInternalProperty.setNative](value: any) {
// disable the background CSS properties
}
}
export const iosIconRenderingModeProperty = new Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "automatic" }); export const iosIconRenderingModeProperty = new Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "automatic" });
iosIconRenderingModeProperty.register(TabStrip); iosIconRenderingModeProperty.register(TabStrip);

25
tns-core-modules/ui/tabs/tabs.android.ts
View File

@@ -7,6 +7,7 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base"; import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common"; import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
import { Frame } from "../frame"; import { Frame } from "../frame";
import { Color } from "../core/view";
import { fromFileOrResource } from "../../image-source"; import { fromFileOrResource } from "../../image-source";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils"; import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import * as application from "../../application"; import * as application from "../../application";
@@ -529,6 +530,7 @@ export class Tabs extends TabsBase {
const tabLayout = this._tabLayout; const tabLayout = this._tabLayout;
tabLayout.setItems(tabItems, this._viewPager); tabLayout.setItems(tabItems, this._viewPager);
this.tabStrip.setNativeView(tabLayout);
items.forEach((item, i, arr) => { items.forEach((item, i, arr) => {
const tv = tabLayout.getTextViewForItemAt(i); const tv = tabLayout.getTextViewForItemAt(i);
item.setNativeView(tv); item.setNativeView(tv);
@@ -569,6 +571,18 @@ export class Tabs extends TabsBase {
this._tabLayout.updateItemAt(index, spec); this._tabLayout.updateItemAt(index, spec);
} }
public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
return this._tabLayout.getBackground();
}
public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
if (value instanceof Color) {
this._tabLayout.setBackgroundColor(value.android);
} else {
this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
}
[selectedIndexProperty.setNative](value: number) { [selectedIndexProperty.setNative](value: number) {
const smoothScroll = true; const smoothScroll = true;
@@ -610,3 +624,14 @@ export class Tabs extends TabsBase {
this._viewPager.setOffscreenPageLimit(value); this._viewPager.setOffscreenPageLimit(value);
} }
} }
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
if (value) {
const constantState = value.getConstantState();
if (constantState) {
return constantState.newDrawable(resources);
}
}
return value;
}

11
tns-core-modules/ui/tabs/tabs.ios.ts
View File

@@ -8,6 +8,7 @@ import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-n
import { TabsBase, swipeEnabledProperty } from "./tabs-common"; import { TabsBase, swipeEnabledProperty } from "./tabs-common";
import { Frame } from "../frame"; import { Frame } from "../frame";
import { ios as iosView, View } from "../core/view"; import { ios as iosView, View } from "../core/view";
import { Color } from "../../color";
import { /*ios as iosUtils,*/ layout } from "../../utils/utils"; import { /*ios as iosUtils,*/ layout } from "../../utils/utils";
// import { device } from "../../platform"; // import { device } from "../../platform";
import { fromFileOrResource } from "../../image-source"; import { fromFileOrResource } from "../../image-source";
@@ -845,11 +846,13 @@ export class Tabs extends TabsBase {
items.forEach((item: TabStripItem, i, arr) => { items.forEach((item: TabStripItem, i, arr) => {
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0); const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
tabBarItems.push(tabBarItem); tabBarItems.push(tabBarItem);
item.setNativeView(tabBarItem);
}); });
this.tabBarItems = tabBarItems; this.tabBarItems = tabBarItems;
if (this.viewController && this.viewController.tabBar) { if (this.viewController && this.viewController.tabBar) {
this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems); this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
this.tabStrip.setNativeView(this.viewController.tabBar);
} }
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([ // tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
@@ -934,6 +937,14 @@ export class Tabs extends TabsBase {
// this._updateIOSTabBarColorsAndFonts(); // this._updateIOSTabBarColorsAndFonts();
// } // }
public getTabBarBackgroundColor(): UIColor {
return this._ios.tabBar.barTintColor;
}
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
[selectedIndexProperty.setNative](value: number) { [selectedIndexProperty.setNative](value: number) {
// TODO // TODO
// if (traceEnabled()) { // if (traceEnabled()) {