Skip to content

Commit ac618bb

Browse files
MartoYankovMartoYankov
committed
feat: add background color css to tab strip
1 parent c2656a4 commit ac618bb

14 files changed

Lines changed: 266 additions & 18 deletions

File tree

‎e2e/ui-tests-app/app/bottom-navigation/background-color-page.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
BottomNavigation {
2+
background-color: gold;
3+
}
4+
5+
TabStrip {
6+
background-color: skyblue;
7+
}

‎e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@
33
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
44
</ActionBar>
55

6-
<BottomNavigation style="background-color: green;">
6+
<BottomNavigation>
77
<TabStrip>
88
<TabStripItem title="First"></TabStripItem>
99
<TabStripItem title="Second"></TabStripItem>
1010
</TabStrip>
1111

1212
<TabContentItem>
1313
<GridLayout>
14-
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
14+
<Label text="First View" />
1515
</GridLayout>
1616
</TabContentItem>
1717

1818
<TabContentItem>
1919
<GridLayout>
20-
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
20+
<Label text="Second View" />
2121
</GridLayout>
2222
</TabContentItem>
2323
</BottomNavigation>

‎e2e/ui-tests-app/app/tabs/background-color-page.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Tabs {
2+
background-color: gold;
3+
}
4+
5+
TabStrip {
6+
background-color: skyblue;
7+
}

‎e2e/ui-tests-app/app/tabs/main-page.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ export function pageLoaded(args: EventData) {
1111

1212
export function loadExamples() {
1313
const examples = new Map<string, string>();
14-
examples.set("default", "tabs/default-page");
15-
examples.set("issue-5470", "tabs/issue-5470-page");
14+
examples.set("tabs", "tabs/tabs-page");
15+
examples.set("issue-5470", "tabs/issue-5470");
1616
examples.set("background-color", "tabs/background-color-page");
17-
examples.set("color", "tabs/color-page");
18-
examples.set("icon-title-placement", "tabs/icon-title-placement-page");
19-
examples.set("icon-change", "tabs/icon-change-page");
20-
examples.set("swipe-enabled", "tabs/swipe-enabled-page");
21-
examples.set("tabs-position", "tabs/tabs-position-page");
17+
examples.set("color", "tabs/color");
18+
examples.set("icon-title-placement", "tabs/icon-title-placement");
19+
examples.set("icon-change", "tabs/icon-change");
20+
examples.set("swipe-enabled", "tabs/swipe-enabled");
21+
examples.set("tabs-position", "tabs/tabs-position");
2222

2323
return examples;
2424
}

‎e2e/ui-tests-app/app/tabs/tabs-page.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { SubMainPageViewModel } from "../sub-main-page-view-model";
3+
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
4+
import { Page } from "tns-core-modules/ui/page";
5+
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
6+
7+
export function goToFirst(args: EventData) {
8+
const page = <Page>(<any>args.object).page;
9+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
10+
11+
bottomNav.selectedIndex = 0;
12+
}
13+
14+
export function goToSecond(args: EventData) {
15+
const page = <Page>(<any>args.object).page;
16+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
17+
18+
bottomNav.selectedIndex = 1;
19+
}

‎e2e/ui-tests-app/app/tabs/tabs-page.xml‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<Page>
2+
3+
<ActionBar title="BottomNavigation" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<!-- w/o TabStrip -->
7+
<!-- <BottomNavigation>
8+
<TabContentItem>
9+
<GridLayout>
10+
<Label text="First View"/>
11+
</GridLayout>
12+
</TabContentItem>
13+
<TabContentItem>
14+
<GridLayout>
15+
<Label text="Second View"/>
16+
</GridLayout>
17+
</TabContentItem>
18+
</BottomNavigation> -->
19+
20+
<!-- w/ TabStrip -->
21+
<Tabs id="bottomNav">
22+
<TabStrip>
23+
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
24+
<TabStripItem>
25+
<!-- <Image src="res://icon" /> -->
26+
<Label text="News" />
27+
</TabStripItem>
28+
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
29+
<TabStripItem>
30+
<!-- <Image src="res://icon" /> -->
31+
<Label text="Places" />
32+
</TabStripItem>
33+
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
34+
</TabStrip>
35+
36+
<TabContentItem>
37+
<StackLayout backgroundColor="blue">
38+
<Label text="First View"/>
39+
<Button tap="goToSecond" text="go to second" />
40+
</StackLayout>
41+
</TabContentItem>
42+
<TabContentItem>
43+
<StackLayout backgroundColor="red">
44+
<Label text="Second View"/>
45+
<Button tap="goToFirst" text="go to first" />
46+
</StackLayout>
47+
</TabContentItem>
48+
<TabContentItem>
49+
<StackLayout backgroundColor="green">
50+
<Label text="First View"/>
51+
<Button tap="goToSecond" text="go to second" />
52+
</StackLayout>
53+
</TabContentItem>
54+
<!-- <TabContentItem>
55+
<StackLayout>
56+
<Label text="Second View"/>
57+
<Button tap="goToFirst" text="go to first" />
58+
</StackLayout>
59+
</TabContentItem>
60+
<TabContentItem>
61+
<StackLayout>
62+
<Label text="First View"/>
63+
<Button tap="goToSecond" text="go to second" />
64+
</StackLayout>
65+
</TabContentItem> -->
66+
</Tabs>
67+
68+
<!-- =============================================================================================== -->
69+
70+
<!-- Bottom Bar with TabStrip -->
71+
<!-- <BottomNavigationBar>
72+
<TabStrip>
73+
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
74+
<TabStripItem>
75+
<Image src="res://icon" />
76+
<Label text="Second Tab" />
77+
</TabStripItem>
78+
</TabStrip>
79+
</BottomNavigationBar> -->
80+
81+
<!-- Bottom Bar w/o TabStrip -->
82+
<!-- <BottomNavigationBar>
83+
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
84+
<TabStripItem>
85+
<Image src="res://icon" />
86+
<Label text="Second Tab" />
87+
</TabStripItem>
88+
</BottomNavigationBar> -->
89+
</Page>

‎tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TabContentItem } from "../tab-navigation-base/tab-content-item";
55

66
// Requires
77
import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
8-
import { CSSType } from "../core/view";
8+
import { CSSType, Color } from "../core/view";
99
import { Frame } from "../frame";
1010
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
1111
import { fromFileOrResource } from "../../image-source";
@@ -352,13 +352,30 @@ export class BottomNavigation extends TabNavigationBase {
352352
});
353353

354354
this._bottomNavigationBar.setItems(tabItems);
355+
this.tabStrip.setNativeView(this._bottomNavigationBar);
356+
this.tabStrip.items.forEach((item, i, arr) => {
357+
const tv = this._bottomNavigationBar.getTextViewForItemAt(i);
358+
item.setNativeView(tv);
359+
});
355360
}
356361
}
357362

358363
public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
359364
this._bottomNavigationBar.updateItemAt(index, spec);
360365
}
361366

367+
public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
368+
return this._bottomNavigationBar.getBackground();
369+
}
370+
371+
public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
372+
if (value instanceof Color) {
373+
this._bottomNavigationBar.setBackgroundColor(value.android);
374+
} else {
375+
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
376+
}
377+
}
378+
362379
[selectedIndexProperty.setNative](value: number) {
363380
// const smoothScroll = false;
364381

@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
383400
this.setAdapterItems([]);
384401
}
385402
}
403+
404+
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
405+
if (value) {
406+
const constantState = value.getConstantState();
407+
if (constantState) {
408+
return constantState.newDrawable(resources);
409+
}
410+
}
411+
412+
return value;
413+
}

‎tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,14 @@ export class BottomNavigation extends TabNavigationBase {
277277
super.onSelectedIndexChanged(oldIndex, newIndex);
278278
}
279279

280+
public getTabBarBackgroundColor(): UIColor {
281+
return this._ios.tabBar.barTintColor;
282+
}
283+
284+
public setTabBarBackgroundColor(value: UIColor | Color): void {
285+
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
286+
}
287+
280288
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
281289
const width = layout.getMeasureSpecSize(widthMeasureSpec);
282290
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
384392
const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
385393
const states = getTitleAttributesForStates(this);
386394

395+
if (this.tabStrip) {
396+
this.tabStrip.setNativeView(this._ios.tabBar);
397+
}
398+
387399
items.forEach((item, i) => {
388400
const controller = this.getViewController(item);
389401

@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
401413
applyStatesToItem(tabBarItem, states);
402414

403415
controller.tabBarItem = tabBarItem;
416+
tabStripItem.setNativeView(tabBarItem);
404417
}
405418

406419
controllers.addObject(controller);

‎tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,18 @@ export class TabNavigationBase extends View {
8282
* Method is intended to be overridden by inheritors and used as "protected"
8383
*/
8484
onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
85+
86+
/**
87+
* @private
88+
* Method is intended to be overridden by inheritors and used as "protected"
89+
*/
90+
getTabBarBackgroundColor(): any
91+
92+
/**
93+
* @private
94+
* Method is intended to be overridden by inheritors and used as "protected"
95+
*/
96+
setTabBarBackgroundColor(value: any): void
8597
}
8698

8799
export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;

‎tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
3434
}
3535
this.items.push(<TabContentItem>value);
3636
this._addView(value);
37-
selectedIndexProperty.coerce(this);
37+
// selectedIndexProperty.coerce(this);
3838
} else if (name === "TabStrip") {
3939
this.tabStrip = value;
40+
this._addView(value);
4041
}
4142
}
4243

@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
5960
callback(item);
6061
});
6162
}
63+
64+
const tabStrip = this.tabStrip;
65+
if (tabStrip) {
66+
callback(tabStrip);
67+
}
6268
}
6369

6470
public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
102108
// to be overridden in platform specific files
103109
this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex });
104110
}
111+
112+
public getTabBarBackgroundColor(): any {
113+
// overridden by inheritors
114+
return null;
115+
}
116+
117+
public setTabBarBackgroundColor(value: any): void {
118+
// overridden by inheritors
119+
}
105120
}
106121

107122
export interface TabNavigationBase {

0 commit comments

Comments
 (0)