feat(tab-view-android): enable tabs repositioning (#5385)

* feat(tab-view-android): enable tabs repositioning * feat(tab-view-android): enable tabs repositioning * chore(apps): add bottom tab view example
NativeScript · Feb 8, 2018 · f8dce08 · f8dce08
1 parent f27d5f2
commit f8dce08
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 19 deletions.
diff --git 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
@@ -0,0 +1,20 @@
+<Page>
+  <TabView androidTabsPosition="bottom">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>
diff --git 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<TabViewBase, number
 });
 androidOffscreenTabLimitProperty.register(TabViewBase);
 
+export const androidTabsPositionProperty = new Property<TabViewBase, "top" | "bottom">({ name: "androidTabsPosition", defaultValue: "top" });
+androidTabsPositionProperty.register(TabViewBase);
+
 export const tabTextColorProperty = new CssProperty<Style, Color>({ 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
@@ -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,36 +367,49 @@ 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);
+        const lp = new org.nativescript.widgets.CommonLayoutParams();
+        const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
+        let accentColor = getDefaultAccentColor(context);
+
+        lp.row = 1;
+
+        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);
+        (<any>nativeView).viewPager = viewPager;
+
+        const adapter = new PagerAdapter(this);
+        viewPager.setAdapter(adapter);
+        (<any>viewPager).adapter = adapter;
+
         nativeView.addView(tabLayout);
         (<any>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();
-        lp.row = 1;
-        viewPager.setLayoutParams(lp);
-        nativeView.addView(viewPager);
-        (<any>nativeView).viewPager = viewPager;
-
-        const adapter = new PagerAdapter(this);
-        viewPager.setAdapter(adapter);
-        (<any>viewPager).adapter = adapter;
-
         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
@@ -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
@@ -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;