From 36aa181185cc097f5281cb113cd87aca183ee659 Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Sat, 11 Jul 2020 16:58:50 +0200 Subject: [PATCH] feat(tabs): add animationEnabled property (#8704) --- nativescript-core/ui/tabs/tabs-common.ts | 5 +++- nativescript-core/ui/tabs/tabs.android.ts | 12 ++++++---- nativescript-core/ui/tabs/tabs.ios.ts | 24 ++++++++++++------- .../nativescript/widgets/TabViewPager.java | 12 ++++++---- 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/nativescript-core/ui/tabs/tabs-common.ts b/nativescript-core/ui/tabs/tabs-common.ts index 56f3f2ad9..73b59c213 100644 --- a/nativescript-core/ui/tabs/tabs-common.ts +++ b/nativescript-core/ui/tabs/tabs-common.ts @@ -43,4 +43,7 @@ tabsPositionProperty.register(TabsBase); export type IOSTabBarItemsAlignment = "leading" | "justified" | "center" | "centerSelected"; export const iOSTabBarItemsAlignmentProperty = new Property({ name: "iOSTabBarItemsAlignment", defaultValue: "justified" }); -iOSTabBarItemsAlignmentProperty.register(TabsBase); \ No newline at end of file +iOSTabBarItemsAlignmentProperty.register(TabsBase); + +export const animationEnabledProperty = new Property({ name: "animationEnabled", defaultValue: true, valueConverter: booleanConverter }); +animationEnabledProperty.register(TabsBase); diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 8fc36ef26..7b85c489a 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -15,7 +15,7 @@ import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base"; import { getTransformedText } from "../text-base"; -import { offscreenTabLimitProperty, swipeEnabledProperty, TabsBase } from "./tabs-common"; +import { offscreenTabLimitProperty, swipeEnabledProperty, animationEnabledProperty, TabsBase } from "./tabs-common"; export * from "./tabs-common"; @@ -378,6 +378,7 @@ export class Tabs extends TabsBase { private _textTransform: TextTransform = "uppercase"; private _selectedItemColor: Color; private _unSelectedItemColor: Color; + public animationEnabled: boolean; constructor() { super(); @@ -946,14 +947,11 @@ export class Tabs extends TabsBase { } [selectedIndexProperty.setNative](value: number) { - const smoothScroll = true; - // TODO // if (traceEnabled()) { // traceWrite("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory); // } - - this._viewPager.setCurrentItem(value, smoothScroll); + this._viewPager.setCurrentItem(value, this.animationEnabled); } [itemsProperty.getDefault](): TabContentItem[] { @@ -985,6 +983,10 @@ export class Tabs extends TabsBase { [offscreenTabLimitProperty.setNative](value: number) { this._viewPager.setOffscreenPageLimit(value); } + + [animationEnabledProperty.setNative](value: number) { + (this._viewPager).setAnimationEnabled(value); + } } function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable { diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index e22132fa7..c0e241c4d 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -13,9 +13,17 @@ import { ios as iosView, View } from "../core/view"; import { Frame } from "../frame"; import { Font } from "../styling/font"; import { - getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty, + getIconSpecSize, + itemsProperty, + selectedIndexProperty, + tabStripProperty, } from "../tab-navigation-base/tab-navigation-base"; -import { swipeEnabledProperty, TabsBase, IOSTabBarItemsAlignment, iOSTabBarItemsAlignmentProperty } from "./tabs-common"; +import { + IOSTabBarItemsAlignment, + iOSTabBarItemsAlignmentProperty, + swipeEnabledProperty, + TabsBase +} from "./tabs-common"; // TODO // import { profile } from "../../profiling"; @@ -463,6 +471,7 @@ export class Tabs extends TabsBase { public _defaultItemBackgroundColor: UIColor; private _selectedItemColor: Color; private _unSelectedItemColor: Color; + public animationEnabled: boolean; constructor() { super(); @@ -1102,7 +1111,7 @@ export class Tabs extends TabsBase { // do not make layout changes while the animation is in progress https://stackoverflow.com/a/47031524/613113 this.visitFrames(item, frame => frame._animationInProgress = true); - this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, true, (finished: boolean) => { + invokeOnRunLoop( () => this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, this.animationEnabled, (finished: boolean) => { this.visitFrames(item, frame => frame._animationInProgress = false); if (finished) { // HACK: UIPageViewController fix; see https://stackoverflow.com/a/17330606 @@ -1112,10 +1121,10 @@ export class Tabs extends TabsBase { this._setCanBeLoaded(value); this._loadUnloadTabItems(value); } - }); + })); if (this.tabBarItems && this.tabBarItems.length && this.viewController && this.viewController.tabBar) { - this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], true); + this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], this.animationEnabled); } // TODO: // (this._ios)._willSelectViewController = this._ios.viewControllers[value]; @@ -1140,7 +1149,6 @@ export class Tabs extends TabsBase { [tabStripProperty.getDefault](): TabStrip { return null; } - [tabStripProperty.setNative](value: TabStrip) { this.setViewControllers(this.items); selectedIndexProperty.coerce(this); @@ -1149,7 +1157,6 @@ export class Tabs extends TabsBase { [swipeEnabledProperty.getDefault](): boolean { return true; } - [swipeEnabledProperty.setNative](value: boolean) { if (this.viewController && this.viewController.scrollView) { this.viewController.scrollView.scrollEnabled = value; @@ -1165,7 +1172,6 @@ export class Tabs extends TabsBase { return (alignment.charAt(0).toLowerCase() + alignment.substring(1)); } - [iOSTabBarItemsAlignmentProperty.setNative](value: IOSTabBarItemsAlignment) { if (!this.viewController || !this.viewController.tabBar) { return; @@ -1219,4 +1225,4 @@ export class Tabs extends TabsBase { this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios; } } -} \ No newline at end of file +} diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java index e115c6bd9..aa8ecf5ae 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java @@ -1,18 +1,15 @@ -/** - * - */ package org.nativescript.widgets; import android.content.Context; import androidx.viewpager.widget.ViewPager; import android.util.AttributeSet; -import android.view.View; import android.view.MotionEvent; import android.view.KeyEvent; // See this thread for more information https://stackoverflow.com/questions/9650265 public class TabViewPager extends ViewPager { private boolean swipePageEnabled = true; + private boolean animationEnabled = true; public TabViewPager(Context context) { super(context); @@ -26,6 +23,10 @@ public class TabViewPager extends ViewPager { this.swipePageEnabled = enabled; } + public void setAnimationEnabled(boolean enabled) { + this.animationEnabled = enabled; + } + @Override public boolean onInterceptTouchEvent(MotionEvent event) { if (this.swipePageEnabled) { @@ -55,6 +56,7 @@ public class TabViewPager extends ViewPager { @Override public void setCurrentItem(int item) { - super.setCurrentItem(item, this.swipePageEnabled); + boolean smoothScroll = this.animationEnabled && this.swipePageEnabled; + super.setCurrentItem(item, smoothScroll); } }