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>
<BottomNavigation style="background-color: green;">
<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
@@ -11,13 +11,13 @@
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>

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

@@ -4,20 +4,20 @@
<BottomNavigation style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</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";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;
const bottomNav = <BottomNavigation>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
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>

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

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

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

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

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

@@ -1,23 +1,23 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
<ActionBar title="Tabs color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="color: green;">
<Tabs style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</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 { 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) {
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) {
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>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
@@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="bottomNav">
<Tabs id="tabsNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></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) {
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) {
newItem.iconSource = "res://icon";
}
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) {
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">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="Tabs icon change" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>
@@ -19,5 +19,5 @@
<Label text="second tab"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

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

@@ -1,30 +1,30 @@
<Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
<ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</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">
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
<ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
@@ -22,6 +22,6 @@
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</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() {
const examples = new Map<string, string>();
examples.set("default", "tabs/default-page");
examples.set("issue-5470", "tabs/issue-5470-page");
examples.set("tabs", "tabs/tabs-page");
examples.set("issue-5470", "tabs/issue-5470");
examples.set("background-color", "tabs/background-color-page");
examples.set("color", "tabs/color-page");
examples.set("icon-title-placement", "tabs/icon-title-placement-page");
examples.set("icon-change", "tabs/icon-change-page");
examples.set("swipe-enabled", "tabs/swipe-enabled-page");
examples.set("tabs-position", "tabs/tabs-position-page");
examples.set("color", "tabs/color");
examples.set("icon-title-placement", "tabs/icon-title-placement");
examples.set("icon-change", "tabs/icon-change");
examples.set("swipe-enabled", "tabs/swipe-enabled");
examples.set("tabs-position", "tabs/tabs-position");
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
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 { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import { fromFileOrResource } from "../../image-source";
@@ -352,6 +352,11 @@ export class BottomNavigation extends TabNavigationBase {
});
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);
}
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) {
// const smoothScroll = false;
@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
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);
}
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 {
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
const states = getTitleAttributesForStates(this);
if (this.tabStrip) {
this.tabStrip.setNativeView(this._ios.tabBar);
}
items.forEach((item, i) => {
const controller = this.getViewController(item);
@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem;
tabStripItem.setNativeView(tabBarItem);
}
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"
*/
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[]>;

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._addView(value);
selectedIndexProperty.coerce(this);
// selectedIndexProperty.coerce(this);
} else if (name === "TabStrip") {
this.tabStrip = value;
this._addView(value);
}
}
@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
callback(item);
});
}
const tabStrip = this.tabStrip;
if (tabStrip) {
callback(tabStrip);
}
}
public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// to be overridden in platform specific files
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 {

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"
*/ /** */
import { ViewBase, Property } from "../../core/view";
import { View, Property } from "../../core/view";
import { Color } from "../../../color";
import { TabStripItem } from "../tab-strip-item";
/**
* Represents a tab strip.
*/
export class TabStrip extends ViewBase {
export class TabStrip extends View {
/**
* 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 { TabStripItem } from "../tab-strip-item";
import { TabNavigationBase } from "../tab-navigation-base";
import { Color } from "../../../color";
import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
// Requires
import { ViewBase, Property, CSSType } from "../../core/view";
import { View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty } from "../../core/view";
export const traceCategory = "TabView";
@CSSType("TabStrip")
export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
public items: TabStripItem[];
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -29,7 +31,25 @@ export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFr
// 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" });
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 { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
import { Frame } from "../frame";
import { Color } from "../core/view";
import { fromFileOrResource } from "../../image-source";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import * as application from "../../application";
@@ -529,6 +530,7 @@ export class Tabs extends TabsBase {
const tabLayout = this._tabLayout;
tabLayout.setItems(tabItems, this._viewPager);
this.tabStrip.setNativeView(tabLayout);
items.forEach((item, i, arr) => {
const tv = tabLayout.getTextViewForItemAt(i);
item.setNativeView(tv);
@@ -569,6 +571,18 @@ export class Tabs extends TabsBase {
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) {
const smoothScroll = true;
@@ -610,3 +624,14 @@ export class Tabs extends TabsBase {
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 { Frame } from "../frame";
import { ios as iosView, View } from "../core/view";
import { Color } from "../../color";
import { /*ios as iosUtils,*/ layout } from "../../utils/utils";
// import { device } from "../../platform";
import { fromFileOrResource } from "../../image-source";
@@ -845,11 +846,13 @@ export class Tabs extends TabsBase {
items.forEach((item: TabStripItem, i, arr) => {
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
tabBarItems.push(tabBarItem);
item.setNativeView(tabBarItem);
});
this.tabBarItems = tabBarItems;
if (this.viewController && this.viewController.tabBar) {
this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
this.tabStrip.setNativeView(this.viewController.tabBar);
}
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
@@ -934,6 +937,14 @@ export class Tabs extends TabsBase {
// 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) {
// TODO
// if (traceEnabled()) {