javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tabs animation and selected index fixes (#8377)

Browse Source 
* fix(tabs): animation freeze when chaning tabs

* fix(tabs): poper item selecting programically
This commit is contained in:
Vasil Trifonov
2020-02-25 17:08:43 +02:00
committed by GitHub
parent e218ee12e7
commit acaabbd2aa
5 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nativescript-core/ui/core/view-base/view-base.d.ts vendored
View File

@ -474,7 +474,7 @@ export abstract class ViewBase extends Observable {
* When returning true the callLoaded method will be run in setTimeout
* Method is intended to be overridden by inheritors and used as "protected"
*/
_shouldDelayLoad(): boolean;
_shouldDelayLayout(): boolean;
/**
* @private

22
nativescript-core/ui/core/view-base/view-base.ts
View File

@ -561,12 +561,24 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
}
}
private performLayout(currentRun = 0) {
// if there's an animation in progress we need to delay the layout
// we've added a guard of 5000 milliseconds execution
// to make sure that the layout will happen even if the animation haven't finished in 5 seconds
if (this._shouldDelayLayout() && currentRun < 100) {
setTimeout(() => this.performLayout(currentRun), currentRun);
currentRun++;
} else {
this.parent.requestLayout();
}
}
@profile
public requestLayout(): void {
// Default implementation for non View instances (like TabViewItem).
const parent = this.parent;
if (parent) {
parent.requestLayout();
this.performLayout();
}
}
@ -615,15 +627,11 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
public loadView(view: ViewBase): void {
if (view && !view.isLoaded) {
if (this._shouldDelayLoad()) {
setTimeout(() => view.callLoaded());
} else {
view.callLoaded();
}
view.callLoaded();
}
}
public _shouldDelayLoad(): boolean {
public _shouldDelayLayout(): boolean {
return false;
}

2
nativescript-core/ui/page/page.ios.ts
View File

@ -348,7 +348,7 @@ export class Page extends PageBase {
//
}
public _shouldDelayLoad(): boolean {
public _shouldDelayLayout(): boolean {
return this._frame && this._frame._animationInProgress;
}

28
nativescript-core/ui/tabs/tabs.ios.ts
View File

@ -2,7 +2,7 @@
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
import { TextTransform, ViewBase } from "../text-base";
// Requires
import { Color } from "../../color";
@ -873,6 +873,9 @@ export class Tabs extends TabsBase {
// TODO: investigate why this call is necessary to actually toggle item appearance
this.viewController.tabBar.sizeToFit();
this.tabStrip.setNativeView(this.viewController.tabBar);
if (this.selectedIndex) {
this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[this.selectedIndex], false);
}
}
// const length = items ? items.length : 0;
@ -1066,6 +1069,17 @@ export class Tabs extends TabsBase {
this._ios.tabBar.tintColor = nativeColor;
}
private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {
if (view instanceof Frame) {
operation(view);
}
view.eachChild(child => {
this.visitFrames(child, operation);
return true;
});
}
[selectedIndexProperty.setNative](value: number) {
// TODO
// if (traceEnabled()) {
@ -1092,17 +1106,11 @@ export class Tabs extends TabsBase {
this._currentNativeSelectedIndex = value;
let itemControllerOwner = null;
if (itemController._owner) {
let itemControllerOwner = <Frame>itemController._owner.get();
// do not load new views while the animation is in progress https://stackoverflow.com/a/47031524/613113
itemControllerOwner._animationInProgress = true;
}
// 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) => {
if (itemControllerOwner) {
itemControllerOwner._animationInProgress = false;
}
this.visitFrames(item, frame => frame._animationInProgress = false);
if (finished) {
// HACK: UIPageViewController fix; see https://stackoverflow.com/a/17330606
invokeOnRunLoop(() => this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, false, null));