mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 11:42:04 +08:00
tab-view done
This commit is contained in:
Hristo Hristov
committed by
Hristo Hristov
Hristo Hristov
parent
943d2dcd6b
commit
da4cad6ec2
@ -73,25 +73,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
|
||||
}
|
||||
}
|
||||
|
||||
public _updateSelectedIndexOnItemsPropertyChanged(newItems) {
|
||||
if (trace.enabled) {
|
||||
trace.write("TabView._updateSelectedIndexOnItemsPropertyChanged(" + newItems + ");", traceCategory);
|
||||
}
|
||||
let newItemsCount = 0;
|
||||
if (newItems) {
|
||||
newItemsCount = newItems.length;
|
||||
}
|
||||
|
||||
if (newItemsCount === 0) {
|
||||
this.selectedIndex = undefined;
|
||||
}
|
||||
else if (this.selectedIndex < 0 || this.selectedIndex >= newItemsCount) {
|
||||
this.selectedIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
public _removeTabs(oldItems: Array<TabViewItemDefinition>) {
|
||||
|
||||
for (let i = 0, length = oldItems.length; i < length; i++) {
|
||||
let oldItem = oldItems[i];
|
||||
|
||||
@ -123,14 +105,8 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
|
||||
}
|
||||
|
||||
get _selectedView(): View {
|
||||
let items = this.items;
|
||||
let selectedIndex = this.selectedIndex;
|
||||
|
||||
if (!items || items.length === 0 || selectedIndex < (items.length - 1)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return items[selectedIndex].view;
|
||||
return selectedIndex > -1 ? this.items[selectedIndex].view : null;
|
||||
}
|
||||
|
||||
get _childrenCount(): number {
|
||||
@ -168,15 +144,6 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
|
||||
}
|
||||
}
|
||||
|
||||
public _getAndroidTabView(): org.nativescript.widgets.TabLayout {
|
||||
// Android specific
|
||||
return undefined;
|
||||
}
|
||||
|
||||
public _updateIOSTabBarColorsAndFonts(): void {
|
||||
// iOS sepcific
|
||||
}
|
||||
|
||||
public onItemsPropertyChanged(oldValue: TabViewItemDefinition[], newValue: TabViewItemDefinition[]) {
|
||||
this.previousItems = oldValue;
|
||||
}
|
||||
|
||||
@ -284,13 +284,12 @@ export class TabView extends TabViewBase {
|
||||
result.title = item.title;
|
||||
|
||||
if (item.iconSource) {
|
||||
|
||||
if (item.iconSource.indexOf(RESOURCE_PREFIX) === 0) {
|
||||
result.iconId = ad.resources.getDrawableId(item.iconSource.substr(RESOURCE_PREFIX.length));
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let is = fromFileOrResource(item.iconSource);
|
||||
if (is) {
|
||||
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
|
||||
result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
|
||||
}
|
||||
}
|
||||
|
||||
5
tns-core-modules/ui/tab-view/tab-view.d.ts
vendored
5
tns-core-modules/ui/tab-view/tab-view.d.ts
vendored
@ -134,11 +134,6 @@ declare module "ui/tab-view" {
|
||||
* Raised when the selected index changes.
|
||||
*/
|
||||
on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
|
||||
|
||||
//@private
|
||||
_getAndroidTabView(): any /* org.nativescript.widgets.TabLayout */;
|
||||
_updateIOSTabBarColorsAndFonts(): void;
|
||||
//@endprivate
|
||||
}
|
||||
|
||||
export const itemsProperty: Property<TabView, TabViewItem[]>;
|
||||
|
||||
@ -125,12 +125,13 @@ export class TabViewItem extends TabViewItemBase {
|
||||
public _update() {
|
||||
if (this._parent && this._controller) {
|
||||
const icon = this._parent._getIcon(this.iconSource);
|
||||
//TODO: Implement initWithSystemItem to support standard system icons
|
||||
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((this.title || ""), icon, this._parent.items.indexOf(this));
|
||||
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((this.title), icon, this._parent.items.indexOf(this));
|
||||
if (!icon) {
|
||||
updateItemTitlePosition(tabBarItem);
|
||||
}
|
||||
|
||||
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
|
||||
// Delete the repeating code.
|
||||
const states = getTitleAttributesForStates(this._parent);
|
||||
tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
|
||||
tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
|
||||
@ -139,20 +140,6 @@ export class TabViewItem extends TabViewItemBase {
|
||||
}
|
||||
}
|
||||
|
||||
function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||
const tabView = <TabView>data.object;
|
||||
tabView._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
|
||||
|
||||
function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||
const tabView = <TabView>data.object;
|
||||
if (data.newValue instanceof color.Color) {
|
||||
tabView.ios.tabBar.barTintColor = data.newValue.ios;
|
||||
}
|
||||
}
|
||||
(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
|
||||
|
||||
export class TabView extends TabViewBase {
|
||||
public _ios: UITabBarControllerImpl;
|
||||
private _delegate: UITabBarControllerDelegateImpl;
|
||||
@ -348,26 +335,6 @@ export class TabView extends TabViewBase {
|
||||
return image;
|
||||
}
|
||||
|
||||
public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
|
||||
super._onSelectedIndexPropertyChangedSetNativeValue(data);
|
||||
|
||||
var newIndex = data.newValue;
|
||||
if (traceEnabled) {
|
||||
traceWrite("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + newIndex + ")", traceCategories.Debug);
|
||||
}
|
||||
if (types.isNullOrUndefined(newIndex)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._ios.selectedIndex = data.newValue;
|
||||
|
||||
// We will need to measure and arrange what became this._selectedView
|
||||
this.requestLayout();
|
||||
|
||||
var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
|
||||
this.notify(args);
|
||||
}
|
||||
|
||||
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
|
||||
const nativeView = this._nativeView;
|
||||
if (nativeView) {
|
||||
@ -421,58 +388,92 @@ export class TabView extends TabViewBase {
|
||||
(heightMode === layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : height));
|
||||
}
|
||||
|
||||
public _updateIOSTabBarColorsAndFonts(): void {
|
||||
if (!this.items) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tabBar = this.ios.tabBar;
|
||||
private _updateIOSTabBarColorsAndFonts(): void {
|
||||
const tabBar = this._ios.tabBar;
|
||||
|
||||
tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
|
||||
const states = getTitleAttributesForStates(this);
|
||||
|
||||
for (let i = 0; i < tabBar.items.count; i++) {
|
||||
const item = <UITabBarItem>tabBar.items[i];
|
||||
for (let i = 0, count = tabBar.items.count; i < count; i++) {
|
||||
const item = tabBar.items[i];
|
||||
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
|
||||
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
|
||||
}
|
||||
}
|
||||
|
||||
public _updateIOSTabBarTextTransform(newValue: string): void {
|
||||
if (!this.items) {
|
||||
return;
|
||||
private _onItemsPropertyChangedSetNativeValue() {
|
||||
let oldValue = <TabViewItem[]>this.previousItems;
|
||||
if (oldValue) {
|
||||
this._removeTabs(oldValue);
|
||||
}
|
||||
|
||||
var tabBar = this.ios.tabBar;
|
||||
for (let i = 0; i < tabBar.items.count; i++) {
|
||||
let item = <UITabBarItem>tabBar.items[i];
|
||||
if (types.isNullOrUndefined(newValue)){
|
||||
// Reset to original
|
||||
item.title = this.items[i].title;
|
||||
}
|
||||
else {
|
||||
item.title = utils.ios.getTransformedText({text: this.items[i].title}, this.items[i].title, newValue);
|
||||
}
|
||||
let newValue = <TabViewItem[]>this.items;
|
||||
if (newValue) {
|
||||
this._addTabs(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
get [selectedIndexProperty.native](): number {
|
||||
return -1;
|
||||
}
|
||||
set [selectedIndexProperty.native](value: number) {
|
||||
if (traceEnabled) {
|
||||
traceWrite("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", traceCategories.Debug);
|
||||
}
|
||||
|
||||
if (value > -1) {
|
||||
this._ios.selectedIndex = value;
|
||||
}
|
||||
|
||||
// We will need to measure and arrange what became this._selectedView
|
||||
this.requestLayout();
|
||||
}
|
||||
|
||||
get [itemsProperty.native](): TabViewItemBase[] {
|
||||
return null;
|
||||
}
|
||||
set [itemsProperty.native](value: TabViewItemBase[]) {
|
||||
this._onItemsPropertyChangedSetNativeValue();
|
||||
}
|
||||
|
||||
get [colorProperty.native](): UIColor {
|
||||
return null;
|
||||
}
|
||||
set [colorProperty.native](value: UIColor) {
|
||||
this._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
get [tabsBackgroundColorProperty.native](): UIColor {
|
||||
return this._ios.tabBar.barTintColor;
|
||||
}
|
||||
set [tabsBackgroundColorProperty.native](value: UIColor | Color) {
|
||||
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
|
||||
}
|
||||
|
||||
get [fontInternalProperty.native](): Font {
|
||||
return null;
|
||||
}
|
||||
set [fontInternalProperty.native](value: Font) {
|
||||
this._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
}
|
||||
|
||||
function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
|
||||
const normalState = {};
|
||||
if (tabView.tabTextColor instanceof Color) {
|
||||
normalState[UITextAttributeTextColor] = tabView.tabTextColor.ios;
|
||||
if (tabView.color instanceof Color) {
|
||||
normalState[UITextAttributeTextColor] = tabView.color.ios;
|
||||
}
|
||||
|
||||
const selectedState = {};
|
||||
if (tabView.selectedTabTextColor instanceof Color) {
|
||||
selectedState[UITextAttributeTextColor] = tabView.selectedTabTextColor.ios;
|
||||
if (tabView.selectedColor instanceof Color) {
|
||||
selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
|
||||
}
|
||||
else {
|
||||
selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
|
||||
}
|
||||
|
||||
const defaultFont = UIFont.systemFontOfSize(10);
|
||||
const font = (<any>tabView.style)._fontInternal.getUIFont(defaultFont);
|
||||
const font = tabView.style.fontInternal.getUIFont(defaultFont);
|
||||
normalState[NSFontAttributeName] = font;
|
||||
selectedState[NSFontAttributeName] = font;
|
||||
|
||||
@ -481,118 +482,3 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
|
||||
selectedState: selectedState
|
||||
};
|
||||
}
|
||||
|
||||
export class TabViewStyler implements style.Styler {
|
||||
// font
|
||||
private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
|
||||
var tab = <definition.TabView>v;
|
||||
tab._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
private static resetFontInternalProperty(v: view.View, nativeValue: any) {
|
||||
var tab = <definition.TabView>v;
|
||||
tab._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
private static getNativeFontValue(v: view.View) {
|
||||
var tab = <definition.TabView>v;
|
||||
|
||||
let currentFont;
|
||||
|
||||
if (tab.ios && tab.ios.items && tab.ios.items.length > 0) {
|
||||
let currentAttrs = tab.ios.items[0].titleTextAttributesForState(UIControlState.Normal);
|
||||
if (currentAttrs) {
|
||||
currentFont = currentAttrs.objectForKey(NSFontAttributeName);
|
||||
}
|
||||
}
|
||||
|
||||
if (!currentFont) {
|
||||
currentFont = UIFont.systemFontOfSize(getter(UIFont, UIFont.labelFontSize));
|
||||
}
|
||||
|
||||
return currentFont;
|
||||
}
|
||||
|
||||
// tab-text-color
|
||||
private static setTabTextColorProperty(v: view.View, newValue: any) {
|
||||
var tabView = <definition.TabView>v;
|
||||
tabView._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
|
||||
var tabView = <definition.TabView>v;
|
||||
tabView._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
// tab-background-color
|
||||
private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
|
||||
let tabView = <TabView>v;
|
||||
tabView.ios.tabBar.barTintColor = newValue;
|
||||
}
|
||||
|
||||
private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
|
||||
let tabView = <TabView>v;
|
||||
tabView.ios.tabBar.barTintColor = nativeValue;
|
||||
}
|
||||
|
||||
private static getTabBackgroundColorProperty(v: view.View): any {
|
||||
let tabView = <TabView>v;
|
||||
return tabView.ios.tabBar.barTintColor;
|
||||
}
|
||||
|
||||
// selected-tab-text-color
|
||||
private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
|
||||
var tabView = <definition.TabView>v;
|
||||
tabView.ios.tabBar.tintColor = newValue;
|
||||
tabView._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
|
||||
var tabView = <definition.TabView>v;
|
||||
tabView.ios.tabBar.tintColor = nativeValue;
|
||||
tabView._updateIOSTabBarColorsAndFonts();
|
||||
}
|
||||
|
||||
private static getSelectedTabTextColorProperty(v: view.View) {
|
||||
var tabView = <definition.TabView>v;
|
||||
return tabView.ios.tabBar.tintColor;
|
||||
}
|
||||
|
||||
// text-transform
|
||||
private static setTextTransformProperty(v: view.View, newValue: any) {
|
||||
var tabView = <TabView>v;
|
||||
tabView._updateIOSTabBarTextTransform(newValue);
|
||||
}
|
||||
|
||||
private static resetTextTransformProperty(v: view.View, nativeValue: any) {
|
||||
var tabView = <TabView>v;
|
||||
tabView._updateIOSTabBarTextTransform(nativeValue);
|
||||
}
|
||||
|
||||
public static registerHandlers() {
|
||||
style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
|
||||
TabViewStyler.setFontInternalProperty,
|
||||
TabViewStyler.resetFontInternalProperty,
|
||||
TabViewStyler.getNativeFontValue), "TabView");
|
||||
|
||||
style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
|
||||
TabViewStyler.setTabTextColorProperty,
|
||||
TabViewStyler.resetTabTextColorProperty), "TabView");
|
||||
|
||||
style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
|
||||
TabViewStyler.setTabBackgroundColorProperty,
|
||||
TabViewStyler.resetTabBackgroundColorProperty,
|
||||
TabViewStyler.getTabBackgroundColorProperty), "TabView");
|
||||
|
||||
style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
|
||||
TabViewStyler.setSelectedTabTextColorProperty,
|
||||
TabViewStyler.resetSelectedTabTextColorProperty,
|
||||
TabViewStyler.getSelectedTabTextColorProperty), "TabView");
|
||||
|
||||
style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
|
||||
TabViewStyler.setTextTransformProperty,
|
||||
TabViewStyler.resetTextTransformProperty), "TabView");
|
||||
}
|
||||
}
|
||||
|
||||
TabViewStyler.registerHandlers();
|
||||
|
||||
Reference in New Issue
Block a user