Skip to content

Commit f8dce08

Browse files
ADjenkovADjenkov
authored
feat(tab-view-android): enable tabs repositioning (NativeScript#5385)
* feat(tab-view-android): enable tabs repositioning * feat(tab-view-android): enable tabs repositioning * chore(apps): add bottom tab view example
1 parent f27d5f2 commit f8dce08

6 files changed

Lines changed: 72 additions & 19 deletions

File tree

‎apps/app/ui-tests-app/tab-view/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@ export function loadExamples() {
2121
examples.set("tab-view-icons", "tab-view/tab-view-icon");
2222
examples.set("tab-view-icon-change", "tab-view/tab-view-icon-change");
2323
examples.set("text-transform", "tab-view/text-transform");
24+
examples.set("tab-view-bottom-position","tab-view/tab-view-bottom-position");
2425
return examples;
2526
}

‎apps/app/ui-tests-app/tab-view/tab-view-bottom-position.xml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Page>
2+
<TabView androidTabsPosition="bottom">
3+
<TabView.items>
4+
<TabViewItem title="First">
5+
<TabViewItem.view>
6+
<GridLayout>
7+
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
8+
</GridLayout>
9+
</TabViewItem.view>
10+
</TabViewItem>
11+
<TabViewItem title="Second">
12+
<TabViewItem.view>
13+
<GridLayout>
14+
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
15+
</GridLayout>
16+
</TabViewItem.view>
17+
</TabViewItem>
18+
</TabView.items>
19+
</TabView>
20+
</Page>

‎tns-core-modules/ui/tab-view/tab-view-common.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
9292
public items: TabViewItemDefinition[];
9393
public selectedIndex: number;
9494
public androidOffscreenTabLimit: number;
95+
public androidTabsPosition: "top" | "bottom";
9596
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
9697

9798
get androidSelectedTabHighlightColor(): Color {
@@ -177,7 +178,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
177178
if (!item.view) {
178179
throw new Error(`TabViewItem must have a view.`);
179180
}
180-
181+
181182
this._addView(item);
182183
});
183184
}
@@ -249,6 +250,9 @@ export const androidOffscreenTabLimitProperty = new Property<TabViewBase, number
249250
});
250251
androidOffscreenTabLimitProperty.register(TabViewBase);
251252

253+
export const androidTabsPositionProperty = new Property<TabViewBase, "top" | "bottom">({ name: "androidTabsPosition", defaultValue: "top" });
254+
androidTabsPositionProperty.register(TabViewBase);
255+
252256
export const tabTextColorProperty = new CssProperty<Style, Color>({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
253257
tabTextColorProperty.register(Style);
254258

‎tns-core-modules/ui/tab-view/tab-view.android.ts‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
66
tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty,
77
androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty,
8-
fontSizeProperty, fontInternalProperty, View, layout,
9-
traceCategory, traceEnabled, traceWrite, Color
8+
fontSizeProperty, fontInternalProperty, View, layout, traceCategory, traceEnabled,
9+
traceWrite, Color
1010
} from "./tab-view-common"
1111
import { textTransformProperty, TextTransform, getTransformedText } from "../text-base";
1212
import { fromFileOrResource } from "../../image-source";
@@ -367,36 +367,49 @@ export class TabView extends TabViewBase {
367367

368368
const context: android.content.Context = this._context;
369369
const nativeView = new org.nativescript.widgets.GridLayout(context);
370-
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
371-
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
372-
370+
const viewPager = new org.nativescript.widgets.TabViewPager(context);
373371
const tabLayout = new org.nativescript.widgets.TabLayout(context);
372+
const lp = new org.nativescript.widgets.CommonLayoutParams();
373+
const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
374+
let accentColor = getDefaultAccentColor(context);
375+
376+
lp.row = 1;
377+
378+
if (this.androidTabsPosition === "top") {
379+
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
380+
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
381+
382+
viewPager.setLayoutParams(lp);
383+
} else {
384+
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
385+
nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
386+
387+
tabLayout.setLayoutParams(lp);
388+
viewPager.setSwipePageEnabled(false);
389+
// set completely transparent accent color for tab selected indicator.
390+
accentColor = 0x00FFFFFF;
391+
}
392+
393+
nativeView.addView(viewPager);
394+
(<any>nativeView).viewPager = viewPager;
395+
396+
const adapter = new PagerAdapter(this);
397+
viewPager.setAdapter(adapter);
398+
(<any>viewPager).adapter = adapter;
399+
374400
nativeView.addView(tabLayout);
375401
(<any>nativeView).tabLayout = tabLayout;
376402

377403
setElevation(nativeView, tabLayout);
378404

379-
const accentColor = getDefaultAccentColor(context);
380405
if (accentColor) {
381406
tabLayout.setSelectedIndicatorColors([accentColor]);
382407
}
383408

384-
const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
385409
if (primaryColor) {
386410
tabLayout.setBackgroundColor(primaryColor);
387411
}
388412

389-
const viewPager = new android.support.v4.view.ViewPager(context);
390-
const lp = new org.nativescript.widgets.CommonLayoutParams();
391-
lp.row = 1;
392-
viewPager.setLayoutParams(lp);
393-
nativeView.addView(viewPager);
394-
(<any>nativeView).viewPager = viewPager;
395-
396-
const adapter = new PagerAdapter(this);
397-
viewPager.setAdapter(adapter);
398-
(<any>viewPager).adapter = adapter;
399-
400413
return nativeView;
401414
}
402415

‎tns-core-modules/ui/tab-view/tab-view.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,14 @@ export class TabView extends View {
109109
*/
110110
androidOffscreenTabLimit: number;
111111

112+
/**
113+
* Gets or set the tabs vertical position.
114+
* Valid values are:
115+
* - top
116+
* - bottom
117+
*/
118+
androidTabsPosition: "top" | "bottom";
119+
112120
/**
113121
* String value used when hooking to the selectedIndexChanged event.
114122
*/

‎tns-platform-declarations/android/org.nativescript.widgets.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,13 @@
371371
getItemCount(): number;
372372
}
373373

374+
export class TabViewPager extends android.support.v4.view.ViewPager {
375+
constructor(context: android.content.Context);
376+
constructor(context: android.content.Context, attrs: android.util.IAttributeSet);
377+
378+
setSwipePageEnabled(enabled: boolean): void;
379+
}
380+
374381
export class TabItemSpec {
375382
title: string;
376383
iconId: number;

0 commit comments

Comments
 (0)