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

feat: flexbile font icon usage in tab navigation (#7672)

Browse Source
This commit is contained in:
Martin Yankov
2019-08-15 17:32:48 +03:00
committed by GitHub
parent 4d76fc691e
commit c0b8db4098
34 changed files with 727 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
e2e/ui-tests-app/app/bottom-navigation/color-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
color: yellowgreen; color: yellowgreen;
} }
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

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

@ -3,10 +3,13 @@
<ActionBar title="BottomNavigation color" icon="" class="action-bar"> <ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation style="color: green;" automationText="tabNavigation" > <BottomNavigation automationText="tabNavigation">
<TabStrip> <TabStrip>
<TabStripItem title="First" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

32
e2e/ui-tests-app/app/bottom-navigation/font-icons-page.css
View File

@ -6,6 +6,34 @@
font-size: 36; font-size: 36;
} }
.color { TabStrip {
color: blue; color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
}
TabStripItem.special Image {
color: lightgreen;
}
TabStripItem.special:active Image {
color: darkgreen;
}
TabStripItem.special Label {
color: gold;
}
TabStripItem.special:active Label {
color: darkgoldenrod;
}
TabStripItem:active .font-size {
font-size: 10;
} }

55
e2e/ui-tests-app/app/bottom-navigation/font-icons-page.xml
View File

@ -3,32 +3,61 @@
<ActionBar title="BottomNavigation font icons" icon="" class="action-bar"> <ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed --> <BottomNavigation automationText="tabNavigation" >
<TabStrip> <TabStrip>
<!-- font family + font size + color --> <!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem> <TabStripItem class="special">
<Label text="All Set"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
<!-- default font + valid char code --> <!-- default font + valid char code -->
<TabStripItem title="Second" iconSource="font://&#xF10B;"></TabStripItem> <TabStripItem>
<Label text="Invalid Font" />
<Image src="font://&#xF10B;" />
</TabStripItem>
<!-- font family + invalid char code --> <!-- font family + invalid char code -->
<TabStripItem title="Third" iconSource="font://&#xF556;" class="font-awesome font-size"></TabStripItem> <TabStripItem>
<Label text="Invalid Char" />
<Image src="font://&#xF556;" class="font-awesome font-size"/>
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
<GridLayout> <StackLayout>
<Label text="First View" /> <Label text="char code: phone" />
</GridLayout> <Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: lightgreen" />
<Label text="icon color active: darkgreen" />
<Label text="title color inactive: gold" />
<Label text="title color active: darkgoldenrod" />
</StackLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <StackLayout>
<Label text="Second View" /> <Label text="char code: phone" />
</GridLayout> <Label text="font: default/invalid" />
<Label text="font size: default" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <StackLayout>
<Label text="Third View" /> <Label text="char code: invalid" />
</GridLayout> <Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem> </TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

8
e2e/ui-tests-app/app/bottom-navigation/font-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
font: 16 monospace; font: 16 monospace;
} }
TabStripItem.nested Label {
font: 12 monospace;
}
TabStripItem.nested:active Label {
font: 16 monospace;
}

17
e2e/ui-tests-app/app/bottom-navigation/font-page.xml
View File

@ -1,12 +1,15 @@
<Page class="page"> <Page class="page">
<ActionBar title="BottomNavigation FONT" icon="" class="action-bar"> <ActionBar title="BottomNavigation font" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation automationText="tabNavigation" > <BottomNavigation automationText="tabNavigation">
<TabStrip> <TabStrip>
<TabStripItem title="First" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

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

@ -6,10 +6,12 @@ export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const newItem = bottomNav.tabStrip.items[args.newIndex]; const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) { if (newItem) {
newItem.iconSource = "res://icon"; newItem.iconSource = "res://icon";
newItem.title = "selected";
} }
const oldItem = bottomNav.tabStrip.items[args.oldIndex]; const oldItem = bottomNav.tabStrip.items[args.oldIndex];
if (oldItem) { if (oldItem) {
oldItem.iconSource = "res://testlogo"; oldItem.iconSource = "res://testlogo";
oldItem.title = "unselected";
} }
} }

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

@ -4,8 +4,8 @@
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" > <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip> <TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem> <TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem> <TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>

8
e2e/ui-tests-app/app/bottom-navigation/text-transform-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
text-transform: uppercase; text-transform: uppercase;
} }
TabStripItem.nested Label {
text-transform: lowercase;
}
TabStripItem.nested:active Label {
text-transform: uppercase;
}

13
e2e/ui-tests-app/app/bottom-navigation/text-transform-page.xml
View File

@ -1,12 +1,15 @@
<Page class="page"> <Page class="page">
<ActionBar title="BottomNavigation Text Transform" icon="" class="action-bar"> <ActionBar title="BottomNavigation text-transform" class="action-bar">
</ActionBar> </ActionBar>
<BottomNavigation automationText="tabNavigation" > <BottomNavigation automationText="tabNavigation">
<TabStrip> <TabStrip>
<TabStripItem title="first" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation> </BottomNavigation>
</Page> </Page>

8
e2e/ui-tests-app/app/tabs/color-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
color: yellowgreen; color: yellowgreen;
} }
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

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

@ -1,12 +1,15 @@
<Page class="page"> <Page class="page">
<ActionBar title="Tabs color" icon="" class="action-bar"> <ActionBar title="Tabs color" class="action-bar">
</ActionBar> </ActionBar>
<Tabs automationText="tabNavigation" > <Tabs automationText="tabNavigation">
<TabStrip> <TabStrip>
<TabStripItem title="First" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs> </Tabs>
</Page> </Page>

32
e2e/ui-tests-app/app/tabs/font-icons-page.css
View File

@ -6,6 +6,34 @@
font-size: 36; font-size: 36;
} }
.color { TabStrip {
color: blue; color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
}
TabStripItem.special Image {
color: lightgreen;
}
TabStripItem.special:active Image {
color: darkgreen;
}
TabStripItem.special Label {
color: gold;
}
TabStripItem.special:active Label {
color: darkgoldenrod;
}
TabStripItem:active .font-size {
font-size: 10;
} }

55
e2e/ui-tests-app/app/tabs/font-icons-page.xml
View File

@ -3,32 +3,61 @@
<ActionBar title="Tabs font icons" icon="" class="action-bar"> <ActionBar title="Tabs font icons" icon="" class="action-bar">
</ActionBar> </ActionBar>
<Tabs class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed --> <Tabs automationText="tabNavigation">
<TabStrip> <TabStrip>
<!-- font family + font size + color --> <!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem> <TabStripItem class="special">
<Label text="All Set"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
<!-- default font + valid char code --> <!-- default font + valid char code -->
<TabStripItem title="Second" iconSource="font://&#xF10B;"></TabStripItem> <TabStripItem>
<Label text="Invalid Font" />
<Image src="font://&#xF10B;" />
</TabStripItem>
<!-- font family + invalid char code --> <!-- font family + invalid char code -->
<TabStripItem title="Third" iconSource="font://&#xF556;" class="font-awesome font-size"></TabStripItem> <TabStripItem>
<Label text="Invalid Char" />
<Image src="font://&#xF556;" class="font-awesome font-size"/>
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
<GridLayout> <StackLayout>
<Label text="First View" /> <Label text="char code: phone" />
</GridLayout> <Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: lightgreen" />
<Label text="icon color active: darkgreen" />
<Label text="title color inactive: gold" />
<Label text="title color active: darkgoldenrod" />
</StackLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <StackLayout>
<Label text="Second View" /> <Label text="char code: phone" />
</GridLayout> <Label text="font: default/invalid" />
<Label text="font size: default" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem> </TabContentItem>
<TabContentItem> <TabContentItem>
<GridLayout> <StackLayout>
<Label text="Third View" /> <Label text="char code: invalid" />
</GridLayout> <Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem> </TabContentItem>
</Tabs> </Tabs>
</Page> </Page>

8
e2e/ui-tests-app/app/tabs/font-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
font: 16 monospace; font: 16 monospace;
} }
TabStripItem.nested Label {
font: 12 monospace;
}
TabStripItem.nested:active Label {
font: 16 monospace;
}

15
e2e/ui-tests-app/app/tabs/font-page.xml
View File

@ -1,12 +1,15 @@
<Page class="page"> <Page class="page">
<ActionBar title="Tabs font" icon="" class="action-bar"> <ActionBar title="Tabs font" class="action-bar">
</ActionBar> </ActionBar>
<Tabs automationText="tabNavigation" > <Tabs automationText="tabNavigation" >
<TabStrip> <TabStrip>
<TabStripItem title="First" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs> </Tabs>
</Page> </Page>

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

@ -6,10 +6,12 @@ export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const newItem = tabsNav.tabStrip.items[args.newIndex]; const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) { if (newItem) {
newItem.iconSource = "res://icon"; newItem.iconSource = "res://icon";
newItem.title = "selected";
} }
const oldItem = tabsNav.tabStrip.items[args.oldIndex]; const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) { if (oldItem) {
oldItem.iconSource = "res://testlogo"; oldItem.iconSource = "res://testlogo";
oldItem.title = "unselected";
} }
} }

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

@ -4,8 +4,8 @@
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" > <Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip> <TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem> <TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem> <TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem> <TabContentItem>

8
e2e/ui-tests-app/app/tabs/text-transform-page.css
View File

@ -17,3 +17,11 @@ TabStripItem.special {
TabStripItem.special:active { TabStripItem.special:active {
text-transform: uppercase; text-transform: uppercase;
} }
TabStripItem.nested Label {
text-transform: lowercase;
}
TabStripItem.nested:active Label {
text-transform: uppercase;
}

13
e2e/ui-tests-app/app/tabs/text-transform-page.xml
View File

@ -1,12 +1,15 @@
<Page class="page"> <Page class="page">
<ActionBar title="Tabs text-transform" icon="" class="action-bar"> <ActionBar title="Tabs text-transform" class="action-bar">
</ActionBar> </ActionBar>
<Tabs automationText="tabNavigation" > <Tabs automationText="tabNavigation">
<TabStrip> <TabStrip>
<TabStripItem title="first" class="special"></TabStripItem> <TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem> <TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip> </TabStrip>
<TabContentItem class="special"> <TabContentItem class="special">
@ -20,5 +23,11 @@
<Label text="Second View" /> <Label text="Second View" />
</GridLayout> </GridLayout>
</TabContentItem> </TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs> </Tabs>
</Page> </Page>

13
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java
View File

@ -201,6 +201,19 @@ public class BottomNavigationBar extends LinearLayout {
if (tabItem.title != null && !tabItem.title.isEmpty()) { if (tabItem.title != null && !tabItem.title.isEmpty()) {
textView.setText(tabItem.title); textView.setText(tabItem.title);
textView.setVisibility(VISIBLE); textView.setVisibility(VISIBLE);
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);
}
} else { } else {
textView.setVisibility(GONE); textView.setVisibility(GONE);
} }

4
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabItemSpec.java
View File

@ -1,10 +1,14 @@
package org.nativescript.widgets; package org.nativescript.widgets;
import android.graphics.drawable.Drawable; import android.graphics.drawable.Drawable;
import android.graphics.Typeface;
public class TabItemSpec { public class TabItemSpec {
public String title; public String title;
public int fontSize;
public Typeface typeFace;
public int iconId; public int iconId;
public Drawable iconDrawable; public Drawable iconDrawable;
public int backgroundColor; public int backgroundColor;
public int color;
} }

28
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabStrip.java
View File

@ -52,6 +52,8 @@ class TabStrip extends LinearLayout {
private int mSelectedTabTextColor; private int mSelectedTabTextColor;
private float mTabTextFontSize; private float mTabTextFontSize;
private boolean mShouldUpdateTabsTextColor;
TabStrip(Context context) { TabStrip(Context context) {
this(context, null); this(context, null);
} }
@ -87,6 +89,8 @@ class TabStrip extends LinearLayout {
// Default selected color is the same as mTabTextColor // Default selected color is the same as mTabTextColor
mSelectedTabTextColor = mTabTextColor; mSelectedTabTextColor = mTabTextColor;
mShouldUpdateTabsTextColor = true;
setMeasureWithLargestChildEnabled(true); setMeasureWithLargestChildEnabled(true);
} }
@ -120,16 +124,22 @@ class TabStrip extends LinearLayout {
return mSelectedTabTextColor; return mSelectedTabTextColor;
} }
void setShouldUpdateTabsTextColor(boolean value) {
mShouldUpdateTabsTextColor = value;
}
private void updateTabsTextColor(){ private void updateTabsTextColor(){
final int childCount = getChildCount(); if (mShouldUpdateTabsTextColor) {
for (int i = 0; i < childCount; i++){ final int childCount = getChildCount();
LinearLayout linearLayout = (LinearLayout)getChildAt(i); for (int i = 0; i < childCount; i++){
TextView textView = (TextView)linearLayout.getChildAt(1); LinearLayout linearLayout = (LinearLayout)getChildAt(i);
if (i == mSelectedPosition){ TextView textView = (TextView)linearLayout.getChildAt(1);
textView.setTextColor(mSelectedTabTextColor); if (i == mSelectedPosition){
} textView.setTextColor(mSelectedTabTextColor);
else { }
textView.setTextColor(mTabTextColor); else {
textView.setTextColor(mTabTextColor);
}
} }
} }
} }

14
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java
View File

@ -252,7 +252,6 @@ public class TabsBar extends HorizontalScrollView {
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP); textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
textView.setTypeface(Typeface.DEFAULT_BOLD); textView.setTypeface(Typeface.DEFAULT_BOLD);
textView.setEllipsize(TextUtils.TruncateAt.END); textView.setEllipsize(TextUtils.TruncateAt.END);
textView.setAllCaps(true);
textView.setMaxLines(2); textView.setMaxLines(2);
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
textView.setPadding(padding, 0, padding, 0); textView.setPadding(padding, 0, padding, 0);
@ -280,6 +279,19 @@ public class TabsBar extends HorizontalScrollView {
if (tabItem.title != null && !tabItem.title.isEmpty()) { if (tabItem.title != null && !tabItem.title.isEmpty()) {
textView.setText(tabItem.title); textView.setText(tabItem.title);
textView.setVisibility(VISIBLE); textView.setVisibility(VISIBLE);
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);
}
} else { } else {
textView.setVisibility(GONE); textView.setVisibility(GONE);
} }

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

@ -167,43 +167,58 @@ function initializeNativeClasses() {
} }
function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec { function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
let iconSource;
const tabItemSpec = new org.nativescript.widgets.TabItemSpec(); const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
// Image and Label children of TabStripItem if (tabStripItem.isLoaded) {
// take priority over its `iconSource` and `title` properties const titleLabel = tabStripItem.label;
iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource; let title = titleLabel.text;
tabItemSpec.title = tabStripItem.label ? tabStripItem.label.text : tabStripItem.title;
if (tabStripItem.backgroundColor instanceof Color) { // TEXT-TRANSFORM
tabItemSpec.backgroundColor = tabStripItem.backgroundColor.android; const textTransform = titleLabel.style.textTransform;
} if (textTransform) {
title = getTransformedText(title, textTransform);
}
tabItemSpec.title = title;
if (iconSource) { // BACKGROUND-COLOR
if (iconSource.indexOf(RESOURCE_PREFIX) === 0) { const backgroundColor = tabStripItem.style.backgroundColor;
tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length)); if (backgroundColor) {
if (tabItemSpec.iconId === 0) { tabItemSpec.backgroundColor = backgroundColor.android;
// TODO: }
// traceMissingIcon(iconSource);
} // COLOR
} else { const color = titleLabel.style.color;
let is = new ImageSource(); if (color) {
if (isFontIconURI(tabStripItem.iconSource)) { tabItemSpec.color = color.android;
const fontIconCode = tabStripItem.iconSource.split("//")[1]; }
const font = tabStripItem.style.fontInternal;
const color = tabStripItem.style.color; // FONT
is = fromFontIconCode(fontIconCode, font, color); const fontInternal = titleLabel.style.fontInternal;
if (fontInternal) {
tabItemSpec.fontSize = fontInternal.fontSize;
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
}
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
if (iconSource.indexOf(RESOURCE_PREFIX) === 0) {
tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length));
if (tabItemSpec.iconId === 0) {
// TODO:
// traceMissingIcon(iconSource);
}
} else { } else {
is = fromFileOrResource(tabStripItem.iconSource); const icon = _getIcon(tabStripItem);
}
if (is) { if (icon) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS. // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
// tslint:disable-next-line:deprecation // tslint:disable-next-line:deprecation
tabItemSpec.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android); tabItemSpec.iconDrawable = icon;
} else { } else {
// TODO: // TODO:
// traceMissingIcon(iconSource); // traceMissingIcon(iconSource);
}
} }
} }
} }
@ -211,6 +226,25 @@ function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets
return tabItemSpec; return tabItemSpec;
} }
function _getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
const iconSource = tabStripItem.image && tabStripItem.image.src;
let is: ImageSource;
if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1];
const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
const font = target.style.fontInternal;
const color = target.style.color;
is = fromFontIconCode(fontIconCode, font, color);
} else {
is = fromFileOrResource(iconSource);
}
const image = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
return image;
}
function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) { function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
const compat = <any>androidx.core.view.ViewCompat; const compat = <any>androidx.core.view.ViewCompat;
if (compat.setElevation) { if (compat.setElevation) {
@ -561,18 +595,11 @@ export class BottomNavigation extends TabNavigationBase {
} }
} }
public getTabBarColor(): number { public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
return this._bottomNavigationBar.getTabTextColor(); // TODO: Should figure out a way to do it directly with the the nativeView
} const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = createTabItemSpec(tabStripItem);
public setTabBarColor(value: number | Color): void { this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
if (value instanceof Color) {
this._bottomNavigationBar.setTabTextColor(value.android);
this._bottomNavigationBar.setSelectedTabTextColor(value.android);
} else {
this._bottomNavigationBar.setTabTextColor(value);
this._bottomNavigationBar.setSelectedTabTextColor(value);
}
} }
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void { public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
@ -582,10 +609,6 @@ export class BottomNavigation extends TabNavigationBase {
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
} }
public getTabBarItemColor(tabStripItem: TabStripItem): number {
return tabStripItem.nativeViewProtected.getCurrentTextColor();
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
if (typeof value === "number") { if (typeof value === "number") {
tabStripItem.nativeViewProtected.setTextColor(value); tabStripItem.nativeViewProtected.setTextColor(value);
@ -594,45 +617,24 @@ export class BottomNavigation extends TabNavigationBase {
} }
} }
public getTabBarItemFontSize(tabStripItem: TabStripItem): { nativeSize: number } { public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
return { nativeSize: tabStripItem.nativeViewProtected.getTextSize() }; const index = (<any>tabStripItem).index;
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = _getIcon(tabStripItem);
imgView.setImageDrawable(drawable);
} }
public setTabBarItemFontSize(tabStripItem: TabStripItem, value: number | { nativeSize: number }): void { public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
if (typeof value === "number") { tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
tabStripItem.nativeViewProtected.setTextSize(value); tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
} else {
tabStripItem.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
}
} }
public getTabBarItemFontInternal(tabStripItem: TabStripItem): android.graphics.Typeface { public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
return tabStripItem.nativeViewProtected.getTypeface(); const titleLabel = tabStripItem.label;
} const title = getTransformedText(titleLabel.text, value);
tabStripItem.nativeViewProtected.setText(title);
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font | android.graphics.Typeface): void {
tabStripItem.nativeViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
}
private _defaultTransformationMethod: android.text.method.TransformationMethod;
public getTabBarItemTextTransform(tabStripItem: TabStripItem): "default" {
return "default";
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform | "default"): void {
const tv = tabStripItem.nativeViewProtected;
this._defaultTransformationMethod = this._defaultTransformationMethod || tv.getTransformationMethod();
if (value === "default") {
tv.setTransformationMethod(this._defaultTransformationMethod);
tv.setText(tabStripItem.title);
} else {
const result = getTransformedText(tabStripItem.title, value);
tv.setText(result);
tv.setTransformationMethod(null);
}
} }
[selectedIndexProperty.setNative](value: number) { [selectedIndexProperty.setNative](value: number) {

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

@ -259,6 +259,8 @@ export class BottomNavigation extends TabNavigationBase {
public onLoaded() { public onLoaded() {
super.onLoaded(); super.onLoaded();
this.setViewControllers(this.items);
const selectedIndex = this.selectedIndex; const selectedIndex = this.selectedIndex;
const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content; const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
if (selectedView instanceof Frame) { if (selectedView instanceof Frame) {
@ -320,21 +322,8 @@ export class BottomNavigation extends TabNavigationBase {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value; this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
} }
public getTabBarColor(): UIColor { public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
return this._ios.tabBar.tintColor; tabStripItem.nativeView.title = value;
}
public setTabBarColor(value: UIColor | Color): void {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
if (!this.tabStrip) {
return;
}
const states = getTitleAttributesForStates(this.tabStrip);
this.tabStrip.items.forEach((tabStripItem) => {
applyStatesToItem(tabStripItem.nativeView, states);
});
} }
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void { public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
@ -355,39 +344,25 @@ export class BottomNavigation extends TabNavigationBase {
bgView.backgroundColor = value instanceof Color ? value.ios : value; bgView.backgroundColor = value instanceof Color ? value.ios : value;
} }
public getTabBarItemColor(tabStripItem: TabStripItem): UIColor {
return this._ios.tabBar.tintColor;
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
const states = getTitleAttributesForStates(tabStripItem); const states = getTitleAttributesForStates(tabStripItem.label);
applyStatesToItem(tabStripItem.nativeView, states); applyStatesToItem(tabStripItem.nativeView, states);
} }
public getTabBarItemFontSize(tabStripItem: TabStripItem): number { public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
return null; const image = this._getIcon(tabStripItem);
}
public setTabBarItemFontSize(tabStripItem: TabStripItem, value: number | { nativeSize: number }): void { tabStripItem.nativeView.image = image;
const states = getTitleAttributesForStates(tabStripItem); tabStripItem.nativeView.selectedImage = image;
applyStatesToItem(tabStripItem.nativeView, states);
}
public getTabBarItemFontInternal(tabStripItem: TabStripItem): Font {
return null;
} }
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
const states = getTitleAttributesForStates(tabStripItem); const states = getTitleAttributesForStates(tabStripItem.label);
applyStatesToItem(tabStripItem.nativeView, states); applyStatesToItem(tabStripItem.nativeView, states);
} }
public getTabBarItemTextTransform(tabStripItem: TabStripItem): TextTransform {
return null;
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
const title = getTransformedText(tabStripItem.title, value); const title = getTransformedText(tabStripItem.label.text, value);
tabStripItem.nativeView.title = title; tabStripItem.nativeView.title = title;
} }
@ -499,7 +474,6 @@ export class BottomNavigation extends TabNavigationBase {
items = items.slice(0, maxTabsCount); items = items.slice(0, maxTabsCount);
const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length); const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
const states = getTitleAttributesForStates(this);
if (this.tabStrip) { if (this.tabStrip) {
this.tabStrip.setNativeView(this._ios.tabBar); this.tabStrip.setNativeView(this._ios.tabBar);
@ -513,6 +487,7 @@ export class BottomNavigation extends TabNavigationBase {
const tabBarItem = this.createTabBarItem(tabStripItem, i); const tabBarItem = this.createTabBarItem(tabStripItem, i);
updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
const states = getTitleAttributesForStates(tabStripItem.label);
applyStatesToItem(tabBarItem, states); applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem; controller.tabBarItem = tabBarItem;
@ -534,8 +509,15 @@ export class BottomNavigation extends TabNavigationBase {
let image: UIImage; let image: UIImage;
let title: string; let title: string;
image = this._getIcon(item); if (item.isLoaded) {
title = item.label ? item.label.text : item.title; image = this._getIcon(item);
title = item.label.text;
const textTransform = item.label.style.textTransform;
if (textTransform) {
title = getTransformedText(title, textTransform);
}
}
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index); const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
@ -549,18 +531,21 @@ export class BottomNavigation extends TabNavigationBase {
public _getIcon(tabStripItem: TabStripItem): UIImage { public _getIcon(tabStripItem: TabStripItem): UIImage {
// Image and Label children of TabStripItem // Image and Label children of TabStripItem
// take priority over its `iconSource` and `title` properties // take priority over its `iconSource` and `title` properties
const iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource; const iconSource = tabStripItem.image && tabStripItem.image.src;
if (!iconSource) { if (!iconSource) {
return null; return null;
} }
let image: UIImage = this._iconsCache[iconSource]; const target = tabStripItem.image;
const font = target.style.fontInternal;
const color = target.style.color;
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
let image: UIImage = this._iconsCache[iconTag];
if (!image) { if (!image) {
let is = new ImageSource; let is = new ImageSource;
if (isFontIconURI(iconSource)) { if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1]; const fontIconCode = iconSource.split("//")[1];
const font = tabStripItem.style.fontInternal;
const color = tabStripItem.style.color;
is = fromFontIconCode(fontIconCode, font, color); is = fromFontIconCode(fontIconCode, font, color);
} else { } else {
is = fromFileOrResource(iconSource); is = fromFileOrResource(iconSource);
@ -568,7 +553,7 @@ export class BottomNavigation extends TabNavigationBase {
if (is && is.ios) { if (is && is.ios) {
const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode()); const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode());
this._iconsCache[iconSource] = originalRenderedImage; this._iconsCache[iconTag] = originalRenderedImage;
image = originalRenderedImage; image = originalRenderedImage;
} else { } else {
// TODO // TODO
@ -615,6 +600,12 @@ export class BottomNavigation extends TabNavigationBase {
return null; return null;
} }
[itemsProperty.setNative](value: TabContentItem[]) { [itemsProperty.setNative](value: TabContentItem[]) {
if (value) {
value.forEach((item: TabContentItem, i) => {
(<any>item).index = i;
});
}
this.setViewControllers(value); this.setViewControllers(value);
selectedIndexProperty.coerce(this); selectedIndexProperty.coerce(this);
} }

1
tns-core-modules/ui/tab-navigation-base/tab-content-item/tab-content-item.android.ts
View File

@ -27,7 +27,6 @@ export class TabContentItem extends TabContentItemBase {
public initNativeView(): void { public initNativeView(): void {
super.initNativeView(); super.initNativeView();
this.nativeViewProtected.setBackgroundColor(-1); // White color.
} }
public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean { public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean {

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

@ -144,6 +144,12 @@ export class TabNavigationBase extends View {
*/ */
setTabBarHighlightColor(value: any) setTabBarHighlightColor(value: any)
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any
/** /**
* @private * @private
* Method is intended to be overridden by inheritors and used as "protected" * Method is intended to be overridden by inheritors and used as "protected"
@ -168,6 +174,12 @@ export class TabNavigationBase extends View {
*/ */
setTabBarItemColor(tabStripItem: TabStripItem, value: any): void setTabBarItemColor(tabStripItem: TabStripItem, value: any): void
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarIconColor(tabStripItem: TabStripItem, value: any): void
/** /**
* @private * @private
* Method is intended to be overridden by inheritors and used as "protected" * Method is intended to be overridden by inheritors and used as "protected"

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

@ -152,6 +152,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// overridden by inheritors // overridden by inheritors
} }
public setTabBarItemTitle(tabStripItem: TabStripItem, value: any): void {
// overridden by inheritors
}
public getTabBarItemBackgroundColor(tabStripItem: TabStripItem): any { public getTabBarItemBackgroundColor(tabStripItem: TabStripItem): any {
// overridden by inheritors // overridden by inheritors
return null; return null;
@ -170,6 +174,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// overridden by inheritors // overridden by inheritors
} }
public setTabBarIconColor(tabStripItem: TabStripItem, value: any): void {
// overridden by inheritors
}
public getTabBarItemFontSize(tabStripItem: TabStripItem): any { public getTabBarItemFontSize(tabStripItem: TabStripItem): any {
// overridden by inheritors // overridden by inheritors
return null; return null;

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

@ -1,5 +1,6 @@
// Types // Types
import { TabStripItem as TabStripItemDefinition } from "."; import { TabStripItem as TabStripItemDefinition } from ".";
import { PropertyChangeData } from "../../../data/observable";
import { TabNavigationBase } from "../tab-navigation-base"; import { TabNavigationBase } from "../tab-navigation-base";
import { TabStrip } from "../tab-strip"; import { TabStrip } from "../tab-strip";
import { Image } from "../../image/image"; import { Image } from "../../image/image";
@ -9,10 +10,8 @@ import { AddChildFromBuilder } from "../../core/view";
// Requires // Requires
import { import {
View, CSSType, backgroundColorProperty, backgroundInternalProperty, colorProperty, View, ViewBase, CSSType, backgroundColorProperty, backgroundInternalProperty, PseudoClassHandler
fontSizeProperty, fontInternalProperty, PseudoClassHandler
} from "../../core/view"; } from "../../core/view";
import { textTransformProperty, TextTransform } from "../../text-base";
export * from "../../core/view"; export * from "../../core/view";
export const traceCategory = "TabView"; export const traceCategory = "TabView";
@ -23,14 +22,153 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
public static selectEvent = "select"; public static selectEvent = "select";
public static unselectEvent = "unselect"; public static unselectEvent = "unselect";
public title: string;
public iconSource: string;
public image: Image; public image: Image;
public label: Label; public label: Label;
private _title: string;
private _iconSource: string;
private _highlightedHandler: () => void; private _highlightedHandler: () => void;
private _normalHandler: () => void; private _normalHandler: () => void;
private _labelColorHandler: (args: PropertyChangeData) => void;
private _labelFontHandler: (args: PropertyChangeData) => void;
private _labelTextTransformHandler: (args: PropertyChangeData) => void;
private _labelTextHandler: (args: PropertyChangeData) => void;
private _imageColorHandler: (args: PropertyChangeData) => void;
private _imageFontHandler: (args: PropertyChangeData) => void;
private _imageSrcHandler: (args: PropertyChangeData) => void;
get title(): string {
if (this.isLoaded) {
return this.label.text;
}
return this._title;
}
set title(value: string) {
this._title = value;
if (this.isLoaded) {
this.label.text = value;
}
}
get iconSource(): string {
if (this.isLoaded) {
return this.image.src;
}
return this._iconSource;
}
set iconSource(value: string) {
this._iconSource = value;
if (this.isLoaded) {
this.image.src = value;
}
}
public onLoaded() {
if (!this.image) {
const image = new Image();
image.src = this.iconSource;
this.image = image;
this._addView(this.image);
}
if (!this.label) {
const label = new Label();
label.text = this.title;
this.label = label;
this._addView(this.label);
}
super.onLoaded();
this._labelColorHandler = this._labelColorHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemColor(this, args.value);
});
this.label.style.on("colorChange", this._labelColorHandler);
this._labelFontHandler = this._labelFontHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemFontInternal(this, args.value);
});
this.label.style.on("fontInternalChange", this._labelFontHandler);
this._labelTextTransformHandler = this._labelTextTransformHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemTextTransform(this, args.value);
});
this.label.style.on("textTransformChange", this._labelTextTransformHandler);
this._labelTextHandler = this._labelTextHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemTitle(this, args.value);
});
this.label.on("textChange", this._labelTextHandler);
this._imageColorHandler = this._imageColorHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && (<any>tabStripParent).setTabBarIconColor(this, args.value);
});
this.image.style.on("colorChange", this._imageColorHandler);
this._imageFontHandler = this._imageFontHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && (<any>tabStripParent).setTabBarIconColor(this, args.value);
});
this.image.style.on("fontInternalChange", this._imageFontHandler);
this._imageSrcHandler = this._imageSrcHandler || ((args: PropertyChangeData) => {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && (<any>tabStripParent).setTabBarIconColor(this, args.value);
});
this.image.on("srcChange", this._imageSrcHandler);
}
public onUnloaded() {
super.onUnloaded();
this.label.style.off("colorChange", this._labelColorHandler);
this.label.style.off("fontInternalChange", this._labelFontHandler);
this.label.style.off("textTransformChange", this._labelTextTransformHandler);
this.label.style.off("textChange", this._labelTextHandler);
this.image.style.off("colorChange", this._imageColorHandler);
this.image.style.off("fontInternalChange", this._imageFontHandler);
this.image.style.off("srcChange", this._imageSrcHandler);
}
public eachChild(callback: (child: ViewBase) => boolean) {
if (this.label) {
callback(this.label);
}
if (this.image) {
callback(this.image);
}
}
public _addChildFromBuilder(name: string, value: any): void { public _addChildFromBuilder(name: string, value: any): void {
if (name === "Image") { if (name === "Image") {
this.image = <Image>value; this.image = <Image>value;
@ -99,56 +237,4 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
[backgroundInternalProperty.setNative](value: any) { [backgroundInternalProperty.setNative](value: any) {
// disable the background CSS properties // disable the background CSS properties
} }
[colorProperty.getDefault](): Color {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.getTabBarItemColor(this);
}
[colorProperty.setNative](value: Color) {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemColor(this, value);
}
[fontSizeProperty.getDefault](): { nativeSize: number } {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.getTabBarItemFontSize(this);
}
[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemFontSize(this, value);
}
[fontInternalProperty.getDefault](): any {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.getTabBarItemFontInternal(this);
}
[fontInternalProperty.setNative](value: any) {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemFontInternal(this, value);
}
[textTransformProperty.getDefault](): any {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.getTabBarItemTextTransform(this);
}
[textTransformProperty.setNative](value: any) {
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarItemTextTransform(this, value);
}
} }

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

@ -51,6 +51,18 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
} }
} }
public onItemsChanged(oldItems: TabStripItem[], newItems: TabStripItem[]): void {
if (oldItems) {
oldItems.forEach(item => this._removeView(item));
}
if (newItems) {
newItems.forEach(item => {
this._addView(item);
});
}
}
[backgroundColorProperty.getDefault](): Color { [backgroundColorProperty.getDefault](): Color {
const parent = <TabNavigationBase>this.parent; const parent = <TabNavigationBase>this.parent;
@ -114,6 +126,13 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
} }
} }
export const itemsProperty = new Property<TabStrip, TabStripItem[]>({
name: "items", valueChanged: (target, oldValue, newValue) => {
target.onItemsChanged(oldValue, newValue);
}
});
itemsProperty.register(TabStrip);
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);

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

@ -284,42 +284,58 @@ function initializeNativeClasses() {
} }
function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec { function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
let iconSource;
const tabItemSpec = new org.nativescript.widgets.TabItemSpec(); const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
if (tabStripItem.backgroundColor instanceof Color) { if (tabStripItem.isLoaded) {
tabItemSpec.backgroundColor = tabStripItem.backgroundColor.android; const nestedLabel = tabStripItem.label;
} let title = nestedLabel.text;
// Image and Label children of TabStripItem // TEXT-TRANSFORM
// take priority over its `iconSource` and `title` properties const textTransform = nestedLabel.style.textTransform;
iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource; if (textTransform) {
tabItemSpec.title = tabStripItem.label ? tabStripItem.label.text : tabStripItem.title; title = getTransformedText(title, textTransform);
}
tabItemSpec.title = title;
if (iconSource) { // BACKGROUND-COLOR
if (iconSource.indexOf(RESOURCE_PREFIX) === 0) { const backgroundColor = tabStripItem.style.backgroundColor;
tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length)); if (backgroundColor) {
if (tabItemSpec.iconId === 0) { tabItemSpec.backgroundColor = backgroundColor.android;
// TODO }
// traceMissingIcon(iconSource);
} // COLOR
} else { const color = nestedLabel.style.color;
let is = new ImageSource(); if (color) {
if (isFontIconURI(tabStripItem.iconSource)) { tabItemSpec.color = color.android;
const fontIconCode = tabStripItem.iconSource.split("//")[1]; }
const font = tabStripItem.style.fontInternal;
const color = tabStripItem.style.color; // FONT
is = fromFontIconCode(fontIconCode, font, color); const fontInternal = nestedLabel.style.fontInternal;
if (fontInternal) {
tabItemSpec.fontSize = fontInternal.fontSize;
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
}
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
if (iconSource.indexOf(RESOURCE_PREFIX) === 0) {
tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length));
if (tabItemSpec.iconId === 0) {
// TODO:
// traceMissingIcon(iconSource);
}
} else { } else {
is = fromFileOrResource(tabStripItem.iconSource); const icon = _getIcon(tabStripItem);
}
if (is) { if (icon) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS. // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
tabItemSpec.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android); // tslint:disable-next-line:deprecation
} else { tabItemSpec.iconDrawable = icon;
// TODO } else {
// traceMissingIcon(iconSource); // TODO:
// traceMissingIcon(iconSource);
}
} }
} }
} }
@ -327,6 +343,25 @@ function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets
return tabItemSpec; return tabItemSpec;
} }
function _getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
const iconSource = tabStripItem.image && tabStripItem.image.src;
let is = new ImageSource();
if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1];
const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
const font = target.style.fontInternal;
const color = target.style.color;
is = fromFontIconCode(fontIconCode, font, color);
} else {
is = fromFileOrResource(iconSource);
}
const image = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
return image;
}
let defaultAccentColor: number = undefined; let defaultAccentColor: number = undefined;
function getDefaultAccentColor(context: android.content.Context): number { function getDefaultAccentColor(context: android.content.Context): number {
if (defaultAccentColor === undefined) { if (defaultAccentColor === undefined) {
@ -665,20 +700,6 @@ export class Tabs extends TabsBase {
} }
} }
public getTabBarColor(): number {
return this._tabsBar.getTabTextColor();
}
public setTabBarColor(value: number | Color): void {
if (value instanceof Color) {
this._tabsBar.setTabTextColor(value.android);
this._tabsBar.setSelectedTabTextColor(value.android);
} else {
this._tabsBar.setTabTextColor(value);
this._tabsBar.setSelectedTabTextColor(value);
}
}
public getTabBarHighlightColor(): number { public getTabBarHighlightColor(): number {
return getDefaultAccentColor(this._context); return getDefaultAccentColor(this._context);
} }
@ -688,15 +709,18 @@ export class Tabs extends TabsBase {
this._tabsBar.setSelectedIndicatorColors([color]); this._tabsBar.setSelectedIndicatorColors([color]);
} }
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void { public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
// TODO: Should figure out a way to do it directly with the the nativeView // TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = createTabItemSpec(tabStripItem); const tabItemSpec = createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
} }
public getTabBarItemColor(tabStripItem: TabStripItem): number { public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
return tabStripItem.nativeViewProtected.getCurrentTextColor(); // TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
} }
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
@ -707,45 +731,24 @@ export class Tabs extends TabsBase {
} }
} }
public getTabBarItemFontSize(tabStripItem: TabStripItem): { nativeSize: number } { public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
return { nativeSize: tabStripItem.nativeViewProtected.getTextSize() }; const index = (<any>tabStripItem).index;
const tabBarItem = this._tabsBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = _getIcon(tabStripItem);
imgView.setImageDrawable(drawable);
} }
public setTabBarItemFontSize(tabStripItem: TabStripItem, value: number | { nativeSize: number }): void { public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
if (typeof value === "number") { tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
tabStripItem.nativeViewProtected.setTextSize(value); tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
} else {
tabStripItem.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
}
} }
public getTabBarItemFontInternal(tabStripItem: TabStripItem): android.graphics.Typeface { public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
return tabStripItem.nativeViewProtected.getTypeface(); const nestedLabel = tabStripItem.label;
} const title = getTransformedText(nestedLabel.text, value);
tabStripItem.nativeViewProtected.setText(title);
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font | android.graphics.Typeface): void {
tabStripItem.nativeViewProtected.setTypeface(value instanceof Font ? value.getAndroidTypeface() : value);
}
private _defaultTransformationMethod: android.text.method.TransformationMethod;
public getTabBarItemTextTransform(tabStripItem: TabStripItem): "default" {
return "default";
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform | "default"): void {
const tv = tabStripItem.nativeViewProtected;
this._defaultTransformationMethod = this._defaultTransformationMethod || tv.getTransformationMethod();
if (value === "default") {
tv.setTransformationMethod(this._defaultTransformationMethod);
tv.setText(tabStripItem.title);
} else {
const result = getTransformedText(tabStripItem.title, value);
tv.setText(result);
tv.setTransformationMethod(null);
}
} }
[selectedIndexProperty.setNative](value: number) { [selectedIndexProperty.setNative](value: number) {

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

@ -528,10 +528,8 @@ export class Tabs extends TabsBase {
this._ios.dataSource = this._dataSource; this._ios.dataSource = this._dataSource;
this._ios.delegate = this._delegate; this._ios.delegate = this._delegate;
if (!this.tabBarItems) { const tabStripItems = this.tabStrip ? this.tabStrip.items : null;
const tabStripItems = this.tabStrip ? this.tabStrip.items : null; this.setTabStripItems(tabStripItems);
this.setTabStripItems(tabStripItems);
}
} }
public onUnloaded() { public onUnloaded() {
@ -838,8 +836,8 @@ export class Tabs extends TabsBase {
let image: UIImage; let image: UIImage;
let title: string; let title: string;
image = this._getIcon(item); image = item.isLoaded && this._getIcon(item);
title = item.label ? item.label.text : item.title; title = item.label && item.label.text;
if (!this.tabStrip._hasImage) { if (!this.tabStrip._hasImage) {
this.tabStrip._hasImage = !!image; this.tabStrip._hasImage = !!image;
@ -872,20 +870,21 @@ export class Tabs extends TabsBase {
} }
public _getIcon(tabStripItem: TabStripItem): UIImage { public _getIcon(tabStripItem: TabStripItem): UIImage {
// Image and Label children of TabStripItem const iconSource = tabStripItem.image && tabStripItem.image.src;
// take priority over its `iconSource` and `title` properties
const iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource;
if (!iconSource) { if (!iconSource) {
return null; return null;
} }
let image: UIImage = this._iconsCache[iconSource]; const target = tabStripItem.image;
const font = target.style.fontInternal;
const color = target.style.color;
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
let image: UIImage = this._iconsCache[iconTag];
if (!image) { if (!image) {
let is = new ImageSource; let is = new ImageSource;
if (isFontIconURI(iconSource)) { if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1]; const fontIconCode = iconSource.split("//")[1];
const font = tabStripItem.style.fontInternal;
const color = tabStripItem.style.color;
is = fromFontIconCode(fontIconCode, font, color); is = fromFontIconCode(fontIconCode, font, color);
} else { } else {
is = fromFileOrResource(iconSource); is = fromFileOrResource(iconSource);
@ -893,7 +892,7 @@ export class Tabs extends TabsBase {
if (is && is.ios) { if (is && is.ios) {
const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode()); const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode());
this._iconsCache[iconSource] = originalRenderedImage; this._iconsCache[iconTag] = originalRenderedImage;
image = originalRenderedImage; image = originalRenderedImage;
} else { } else {
// TODO // TODO

3
tns-platform-declarations/android/org.nativescript.widgets.d.ts vendored
View File

@ -452,9 +452,12 @@
export class TabItemSpec { export class TabItemSpec {
title: string; title: string;
fontSize: number;
typeFace: android.graphics.Typeface;
iconId: number; iconId: number;
iconDrawable: android.graphics.drawable.Drawable; iconDrawable: android.graphics.drawable.Drawable;
backgroundColor: number; backgroundColor: number;
color: number;
} }
export namespace image { export namespace image {