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

Tab view fixes

Browse Source
This commit is contained in:
vakrilov
2017-02-14 07:07:46 +02:00
parent c1627e6625
commit e7017a9bc5
6 changed files with 77 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/ui-tests-app/tab-view/all.xml
View File

@ -1,5 +1,5 @@
<Page> <Page>
<TabView selectedIndex="1" style="tab-text-color: yellow; color:yellow; selected-tab-text-color: yellow; background-color: green;" selectedColor="red" tabsBackgroundColor="blue"> <TabView selectedIndex="1" style="tab-text-color: yellow; color:yellow; selected-tab-text-color: red; background-color: green; tab-background-color: blue;">
<TabView.items> <TabView.items>
<TabViewItem title="First"> <TabViewItem title="First">
<TabViewItem.view> <TabViewItem.view>

2
apps/app/ui-tests-app/tab-view/selected.xml
View File

@ -1,5 +1,5 @@
<Page> <Page>
<TabView selectedColor="green"> <TabView selectedTabTextColor="green">
<TabView.items> <TabView.items>
<TabViewItem title="First"> <TabViewItem title="First">
<TabViewItem.view> <TabViewItem.view>

2
apps/app/ui-tests-app/tab-view/tabsBackground.xml
View File

@ -1,5 +1,5 @@
<Page> <Page>
<TabView tabsBackgroundColor="blue"> <TabView tabBackgroundColor="blue">
<TabView.items> <TabView.items>
<TabViewItem title="First"> <TabViewItem title="First">
<TabViewItem.view> <TabViewItem.view>

23
tns-core-modules/ui/tab-view/tab-view-common.ts
View File

@ -8,8 +8,6 @@ export * from "ui/core/view";
export const traceCategory = "TabView"; export const traceCategory = "TabView";
// TODO: Change base class to ViewBase and use addView method to add it.
// This way we will support property and binding propagation automatically.
export abstract class TabViewItemBase extends ViewBase implements TabViewItemDefinition, AddChildFromBuilder { export abstract class TabViewItemBase extends ViewBase implements TabViewItemDefinition, AddChildFromBuilder {
private _title: string = ""; private _title: string = "";
private _view: View; private _view: View;
@ -78,6 +76,27 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
public androidOffscreenTabLimit: number; public androidOffscreenTabLimit: number;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
get tabTextColor(): Color {
return this.style.tabTextColor;
}
set tabTextColor(value: Color) {
this.style.tabTextColor = value;
}
get tabBackgroundColor(): Color {
return this.style.tabBackgroundColor;
}
set tabBackgroundColor(value: Color) {
this.style.tabBackgroundColor = value;
}
get selectedTabTextColor(): Color {
return this.style.selectedTabTextColor;
}
set selectedTabTextColor(value: Color) {
this.style.selectedTabTextColor = value;
}
public _addArrayFromBuilder(name: string, value: Array<any>) { public _addArrayFromBuilder(name: string, value: Array<any>) {
if (name === "items") { if (name === "items") {
this.items = value; this.items = value;

43
tns-core-modules/ui/tab-view/tab-view.android.ts
View File

@ -16,6 +16,15 @@ const ACCENT_COLOR = "colorAccent";
const PRIMARY_COLOR = "colorPrimary"; const PRIMARY_COLOR = "colorPrimary";
const DEFAULT_ELEVATION = 4; const DEFAULT_ELEVATION = 4;
let defaultAccentColor: number = undefined;
function getDefaultAccentColor(context: android.content.Context): number {
if (defaultAccentColor === undefined) {
//Fallback color: https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html
defaultAccentColor = ad.resources.getPalleteColor(ACCENT_COLOR, context) || 0xFF33B5E5;
}
return defaultAccentColor;
}
export class TabViewItem extends TabViewItemBase { export class TabViewItem extends TabViewItemBase {
public nativeView: android.widget.TextView; public nativeView: android.widget.TextView;
public tabItemSpec: org.nativescript.widgets.TabItemSpec; public tabItemSpec: org.nativescript.widgets.TabItemSpec;
@ -62,17 +71,6 @@ export class TabViewItem extends TabViewItemBase {
const result = getTransformedText(this.title, value); const result = getTransformedText(this.title, value);
tv.setText(result); tv.setText(result);
} }
get [tabTextColorProperty.native](): android.content.res.ColorStateList {
return this.nativeView.getTextColors();
}
set [tabTextColorProperty.native](value: android.content.res.ColorStateList | Color) {
if (value instanceof Color) {
this.nativeView.setTextColor(value.android);
} else {
this.nativeView.setTextColor(value);
}
}
} }
let PagerAdapterClass; let PagerAdapterClass;
@ -279,7 +277,7 @@ export class TabView extends TabViewBase {
this.setElevation(); this.setElevation();
const accentColor = ad.resources.getPalleteColor(ACCENT_COLOR, this._context); const accentColor = getDefaultAccentColor(this._context);
if (accentColor) { if (accentColor) {
this._tabLayout.setSelectedIndicatorColors([accentColor]); this._tabLayout.setSelectedIndicatorColors([accentColor]);
} }
@ -370,28 +368,35 @@ export class TabView extends TabViewBase {
this.setAdapter(value); this.setAdapter(value);
} }
get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable { get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable.ConstantState {
return this._tabLayout.getBackground(); return this._tabLayout.getBackground().getConstantState();
} }
set [tabBackgroundColorProperty.native](value: android.graphics.drawable.Drawable | Color) { set [tabBackgroundColorProperty.native](value: android.graphics.drawable.Drawable.ConstantState | Color) {
if (value instanceof Color) { if (value instanceof Color) {
this._tabLayout.setBackgroundColor(value.android); this._tabLayout.setBackgroundColor(value.android);
} else { } else {
this._tabLayout.setBackground(value); this._tabLayout.setBackground(value.newDrawable());
} }
} }
get [tabTextColorProperty.native](): number {
return this._tabLayout.getTabTextColor();
}
set [tabTextColorProperty.native](value: number | Color) {
let color = value instanceof Color ? value.android : value;
this._tabLayout.setTabTextColor(color);
}
get [selectedTabTextColorProperty.native](): number { get [selectedTabTextColorProperty.native](): number {
return this._tabLayout.getSelectedTabTextColor(); return this._tabLayout.getSelectedTabTextColor();
} }
set [selectedTabTextColorProperty.native](value: number | Color) { set [selectedTabTextColorProperty.native](value: number | Color) {
let color = value instanceof Color ? value.android : value; let color = value instanceof Color ? value.android : value;
this._tabLayout.setTabTextColor(color); this._tabLayout.setSelectedTabTextColor(color);
} }
get [androidSelectedTabHighlightColorProperty.native](): number { get [androidSelectedTabHighlightColorProperty.native](): number {
//from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html return getDefaultAccentColor(this._context);
return 0xFF33B5E5;
} }
set [androidSelectedTabHighlightColorProperty.native](value: number | Color) { set [androidSelectedTabHighlightColorProperty.native](value: number | Color) {
let tabLayout = this._tabLayout; let tabLayout = this._tabLayout;

73
tns-core-modules/ui/tab-view/tab-view.ios.ts
View File

@ -133,8 +133,7 @@ export class TabViewItem extends TabViewItemBase {
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem. // TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
// Delete the repeating code. // Delete the repeating code.
const states = getTitleAttributesForStates(parent); const states = getTitleAttributesForStates(parent);
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); applyStatesToItem(tabBarItem, states);
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
controller.tabBarItem = tabBarItem; controller.tabBarItem = tabBarItem;
} }
} }
@ -256,8 +255,7 @@ export class TabView extends TabViewBase {
if (!icon) { if (!icon) {
updateItemTitlePosition(tabBarItem); updateItemTitlePosition(tabBarItem);
} }
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); applyStatesToItem(tabBarItem, states);
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
newController.tabBarItem = tabBarItem; newController.tabBarItem = tabBarItem;
controllers.addObject(newController); controllers.addObject(newController);
@ -360,9 +358,7 @@ export class TabView extends TabViewBase {
const tabBar = <UITabBar>this.ios.tabBar; const tabBar = <UITabBar>this.ios.tabBar;
const states = getTitleAttributesForStates(this); const states = getTitleAttributesForStates(this);
for (let i = 0; i < tabBar.items.count; i++) { for (let i = 0; i < tabBar.items.count; i++) {
const item = <UITabBarItem>tabBar.items[i]; applyStatesToItem(tabBar.items[i], states);
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
} }
} }
@ -402,6 +398,7 @@ export class TabView extends TabViewBase {
return null; return null;
} }
set [tabTextColorProperty.native](value: UIColor) { set [tabTextColorProperty.native](value: UIColor) {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
this._updateIOSTabBarColorsAndFonts(); this._updateIOSTabBarColorsAndFonts();
} }
@ -416,7 +413,6 @@ export class TabView extends TabViewBase {
return this._ios.tabBar.tintColor; return this._ios.tabBar.tintColor;
} }
set [selectedTabTextColorProperty.native](value: UIColor) { set [selectedTabTextColorProperty.native](value: UIColor) {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
this._updateIOSTabBarColorsAndFonts(); this._updateIOSTabBarColorsAndFonts();
} }
@ -428,24 +424,6 @@ export class TabView extends TabViewBase {
this._updateIOSTabBarTextTransform(value); this._updateIOSTabBarTextTransform(value);
} }
// private static getNativeFontValue(v: view.View) {
// var tabBar = <UITabBar>v.ios.tabBar;
// let currentFont;
// if (tabBar.items.count > 0) {
// let currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal);
// if (currentAttrs) {
// currentFont = currentAttrs.objectForKey(NSFontAttributeName);
// }
// }
// if (!currentFont) {
// currentFont = UIFont.systemFontOfSize(getter(UIFont, UIFont.labelFontSize));
// }
// return currentFont;
// }
// TODO: Move this to TabViewItem // TODO: Move this to TabViewItem
get [fontInternalProperty.native](): Font { get [fontInternalProperty.native](): Font {
return null; return null;
@ -472,28 +450,35 @@ export class TabView extends TabViewBase {
} }
} }
function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } { interface TabStates {
const normalState = {}; normalState?: any;
if (tabView.color instanceof Color) { selectedState?: any;
normalState[UITextAttributeTextColor] = tabView.color.ios; }
}
const selectedState = {}; function getTitleAttributesForStates(tabView: TabView): TabStates {
const result: TabStates = { };
const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10));
let tabItemTextColor = tabView.style.tabTextColor; let tabItemTextColor = tabView.style.tabTextColor;
if (tabItemTextColor instanceof Color) { if (tabItemTextColor instanceof Color) {
selectedState[UITextAttributeTextColor] = tabItemTextColor.ios; result.normalState = {
} [UITextAttributeTextColor]: tabItemTextColor.ios,
else { [NSFontAttributeName]: font
selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor; }
} }
const defaultFont = UIFont.systemFontOfSize(10); const tabSelectedItemTextColor = tabView.style.selectedTabTextColor;
const font = tabView.style.fontInternal.getUIFont(defaultFont); if (tabSelectedItemTextColor instanceof Color) {
normalState[NSFontAttributeName] = font; result.selectedState = {
selectedState[NSFontAttributeName] = font; [UITextAttributeTextColor]: tabSelectedItemTextColor.ios,
[NSFontAttributeName]: font
}
}
return { return result;
normalState: normalState,
selectedState: selectedState
};
} }
function applyStatesToItem(item: UITabBarItem, states: TabStates) {
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
}