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>
<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>
<TabViewItem title="First">
<TabViewItem.view>

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

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

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

@ -1,5 +1,5 @@
<Page>
<TabView tabsBackgroundColor="blue">
<TabView tabBackgroundColor="blue">
<TabView.items>
<TabViewItem title="First">
<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";
// 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 {
private _title: string = "";
private _view: View;
@ -78,6 +76,27 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
public androidOffscreenTabLimit: number;
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>) {
if (name === "items") {
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 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 {
public nativeView: android.widget.TextView;
public tabItemSpec: org.nativescript.widgets.TabItemSpec;
@ -62,17 +71,6 @@ export class TabViewItem extends TabViewItemBase {
const result = getTransformedText(this.title, value);
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;
@ -279,7 +277,7 @@ export class TabView extends TabViewBase {
this.setElevation();
const accentColor = ad.resources.getPalleteColor(ACCENT_COLOR, this._context);
const accentColor = getDefaultAccentColor(this._context);
if (accentColor) {
this._tabLayout.setSelectedIndicatorColors([accentColor]);
}
@ -370,28 +368,35 @@ export class TabView extends TabViewBase {
this.setAdapter(value);
}
get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable {
return this._tabLayout.getBackground();
get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable.ConstantState {
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) {
this._tabLayout.setBackgroundColor(value.android);
} 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 {
return this._tabLayout.getSelectedTabTextColor();
}
set [selectedTabTextColorProperty.native](value: number | Color) {
let color = value instanceof Color ? value.android : value;
this._tabLayout.setTabTextColor(color);
this._tabLayout.setSelectedTabTextColor(color);
}
get [androidSelectedTabHighlightColorProperty.native](): number {
//from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html
return 0xFF33B5E5;
return getDefaultAccentColor(this._context);
}
set [androidSelectedTabHighlightColorProperty.native](value: number | Color) {
let tabLayout = this._tabLayout;

71
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.
// Delete the repeating code.
const states = getTitleAttributesForStates(parent);
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem;
}
}
@ -256,8 +255,7 @@ export class TabView extends TabViewBase {
if (!icon) {
updateItemTitlePosition(tabBarItem);
}
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
applyStatesToItem(tabBarItem, states);
newController.tabBarItem = tabBarItem;
controllers.addObject(newController);
@ -360,9 +358,7 @@ export class TabView extends TabViewBase {
const tabBar = <UITabBar>this.ios.tabBar;
const states = getTitleAttributesForStates(this);
for (let i = 0; i < tabBar.items.count; i++) {
const item = <UITabBarItem>tabBar.items[i];
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
applyStatesToItem(tabBar.items[i], states);
}
}
@ -402,6 +398,7 @@ export class TabView extends TabViewBase {
return null;
}
set [tabTextColorProperty.native](value: UIColor) {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
this._updateIOSTabBarColorsAndFonts();
}
@ -416,7 +413,6 @@ export class TabView extends TabViewBase {
return this._ios.tabBar.tintColor;
}
set [selectedTabTextColorProperty.native](value: UIColor) {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
this._updateIOSTabBarColorsAndFonts();
}
@ -428,24 +424,6 @@ export class TabView extends TabViewBase {
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
get [fontInternalProperty.native](): Font {
return null;
@ -472,28 +450,35 @@ export class TabView extends TabViewBase {
}
}
function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
const normalState = {};
if (tabView.color instanceof Color) {
normalState[UITextAttributeTextColor] = tabView.color.ios;
interface TabStates {
normalState?: any;
selectedState?: any;
}
const selectedState = {};
function getTitleAttributesForStates(tabView: TabView): TabStates {
const result: TabStates = { };
const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10));
let tabItemTextColor = tabView.style.tabTextColor;
if (tabItemTextColor instanceof Color) {
selectedState[UITextAttributeTextColor] = tabItemTextColor.ios;
result.normalState = {
[UITextAttributeTextColor]: tabItemTextColor.ios,
[NSFontAttributeName]: font
}
else {
selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
}
const defaultFont = UIFont.systemFontOfSize(10);
const font = tabView.style.fontInternal.getUIFont(defaultFont);
normalState[NSFontAttributeName] = font;
selectedState[NSFontAttributeName] = font;
return {
normalState: normalState,
selectedState: selectedState
};
const tabSelectedItemTextColor = tabView.style.selectedTabTextColor;
if (tabSelectedItemTextColor instanceof Color) {
result.selectedState = {
[UITextAttributeTextColor]: tabSelectedItemTextColor.ios,
[NSFontAttributeName]: font
}
}
return result;
}
function applyStatesToItem(item: UITabBarItem, states: TabStates) {
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
}