diff --git a/apps/app/ui-tests-app/tab-view/main-page.ts b/apps/app/ui-tests-app/tab-view/main-page.ts index b7a917059..9089815f7 100644 --- a/apps/app/ui-tests-app/tab-view/main-page.ts +++ b/apps/app/ui-tests-app/tab-view/main-page.ts @@ -21,5 +21,6 @@ export function loadExamples() { examples.set("tab-view-icons", "tab-view/tab-view-icon"); examples.set("tab-view-icon-change", "tab-view/tab-view-icon-change"); examples.set("text-transform", "tab-view/text-transform"); + examples.set("tab-view-bottom-position","tab-view/tab-view-bottom-position"); return examples; } diff --git a/apps/app/ui-tests-app/tab-view/tab-view-bottom-position.xml b/apps/app/ui-tests-app/tab-view/tab-view-bottom-position.xml new file mode 100644 index 000000000..8c83d0c36 --- /dev/null +++ b/apps/app/ui-tests-app/tab-view/tab-view-bottom-position.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tns-core-modules/ui/tab-view/tab-view-common.ts b/tns-core-modules/ui/tab-view/tab-view-common.ts index ae8de05f1..5a770382a 100644 --- a/tns-core-modules/ui/tab-view/tab-view-common.ts +++ b/tns-core-modules/ui/tab-view/tab-view-common.ts @@ -92,6 +92,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom public items: TabViewItemDefinition[]; public selectedIndex: number; public androidOffscreenTabLimit: number; + public androidTabsPosition: "top" | "bottom"; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; get androidSelectedTabHighlightColor(): Color { @@ -177,7 +178,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom if (!item.view) { throw new Error(`TabViewItem must have a view.`); } - + this._addView(item); }); } @@ -249,6 +250,9 @@ export const androidOffscreenTabLimitProperty = new Property({ name: "androidTabsPosition", defaultValue: "top" }); +androidTabsPositionProperty.register(TabViewBase); + export const tabTextColorProperty = new CssProperty({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); tabTextColorProperty.register(Style); diff --git a/tns-core-modules/ui/tab-view/tab-view.android.ts b/tns-core-modules/ui/tab-view/tab-view.android.ts index c32bfb79c..cde0073ca 100644 --- a/tns-core-modules/ui/tab-view/tab-view.android.ts +++ b/tns-core-modules/ui/tab-view/tab-view.android.ts @@ -5,8 +5,8 @@ import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty, - fontSizeProperty, fontInternalProperty, View, layout, - traceCategory, traceEnabled, traceWrite, Color + fontSizeProperty, fontInternalProperty, View, layout, traceCategory, traceEnabled, + traceWrite, Color } from "./tab-view-common" import { textTransformProperty, TextTransform, getTransformedText } from "../text-base"; import { fromFileOrResource } from "../../image-source"; @@ -367,29 +367,29 @@ export class TabView extends TabViewBase { const context: android.content.Context = this._context; const nativeView = new org.nativescript.widgets.GridLayout(context); - nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto)); - nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star)); - + const viewPager = new org.nativescript.widgets.TabViewPager(context); const tabLayout = new org.nativescript.widgets.TabLayout(context); - nativeView.addView(tabLayout); - (nativeView).tabLayout = tabLayout; - - setElevation(nativeView, tabLayout); - - const accentColor = getDefaultAccentColor(context); - if (accentColor) { - tabLayout.setSelectedIndicatorColors([accentColor]); - } - - const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context); - if (primaryColor) { - tabLayout.setBackgroundColor(primaryColor); - } - - const viewPager = new android.support.v4.view.ViewPager(context); const lp = new org.nativescript.widgets.CommonLayoutParams(); + const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context); + let accentColor = getDefaultAccentColor(context); + lp.row = 1; - viewPager.setLayoutParams(lp); + + if (this.androidTabsPosition === "top") { + nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto)); + nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star)); + + viewPager.setLayoutParams(lp); + } else { + nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star)); + nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto)); + + tabLayout.setLayoutParams(lp); + viewPager.setSwipePageEnabled(false); + // set completely transparent accent color for tab selected indicator. + accentColor = 0x00FFFFFF; + } + nativeView.addView(viewPager); (nativeView).viewPager = viewPager; @@ -397,6 +397,19 @@ export class TabView extends TabViewBase { viewPager.setAdapter(adapter); (viewPager).adapter = adapter; + nativeView.addView(tabLayout); + (nativeView).tabLayout = tabLayout; + + setElevation(nativeView, tabLayout); + + if (accentColor) { + tabLayout.setSelectedIndicatorColors([accentColor]); + } + + if (primaryColor) { + tabLayout.setBackgroundColor(primaryColor); + } + return nativeView; } diff --git a/tns-core-modules/ui/tab-view/tab-view.d.ts b/tns-core-modules/ui/tab-view/tab-view.d.ts index 531fa4467..86db2cea6 100644 --- a/tns-core-modules/ui/tab-view/tab-view.d.ts +++ b/tns-core-modules/ui/tab-view/tab-view.d.ts @@ -109,6 +109,14 @@ export class TabView extends View { */ androidOffscreenTabLimit: number; + /** + * Gets or set the tabs vertical position. + * Valid values are: + * - top + * - bottom + */ + androidTabsPosition: "top" | "bottom"; + /** * String value used when hooking to the selectedIndexChanged event. */ diff --git a/tns-platform-declarations/android/org.nativescript.widgets.d.ts b/tns-platform-declarations/android/org.nativescript.widgets.d.ts index 158d518ec..85701f6d7 100644 --- a/tns-platform-declarations/android/org.nativescript.widgets.d.ts +++ b/tns-platform-declarations/android/org.nativescript.widgets.d.ts @@ -371,6 +371,13 @@ getItemCount(): number; } + export class TabViewPager extends android.support.v4.view.ViewPager { + constructor(context: android.content.Context); + constructor(context: android.content.Context, attrs: android.util.IAttributeSet); + + setSwipePageEnabled(enabled: boolean): void; + } + export class TabItemSpec { title: string; iconId: number;