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

feat(android): fragment transactions to use 'add' instead of 'replace' on fwd navigation (#8791)

Browse Source 
Changes the behavior of android fragment transactions to use `add` instead of `replace` on forward navigation.

BREAKING CHANGE:

Changes the internal behavior of Android navigation:

* while navigating forward, the page navigated from is not unloaded anymore
* events order is changed in the sense that now `unloaded` happens after `navigatedFrom` instead of before

There are multiple plus sides to this:

* no more black views on navigation when using opengl (maps, ...)
* navigation is faster, especially the navigation back! No longer need to recreate the page anymore. Navigation forward also gets faster as we no longer unload the previous page
* navigatedFrom event happens faster
* this the default behavior used by most of the android native apps
This commit is contained in:
farfromrefuge
2021-08-10 22:42:25 +02:00
committed by Nathan Walker
parent 1e3bc48737
commit e17e46974b
4 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/automated/src/ui/page/page-tests-common.ts
View File

@ -181,7 +181,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
helper.navigateWithEntry(navigationEntry);
helper.goBack();
const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'unloaded', 'navigatedFrom'];
const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'navigatedFrom', 'unloaded'];
TKUnit.arrayAssert(eventSequence, expectedEventSequence, 'Actual event sequence is not equal to expected. Actual: ' + eventSequence + '; Expected: ' + expectedEventSequence);
}

18
packages/core/ui/frame/fragment.transitions.android.ts
View File

@ -26,6 +26,7 @@ let AnimationListener: android.animation.Animator.AnimatorListener;
interface ExpandedTransitionListener extends androidx.transition.Transition.TransitionListener {
entry: ExpandedEntry;
backEntry?: BackstackEntry;
transition: androidx.transition.Transition;
}
@ -143,7 +144,7 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
if (currentFragmentNeedsDifferentAnimation) {
setupCurrentFragmentFadeTransition(navigationTransition, currentEntry);
}
} else if (name === 'explode') {
} else if (name === 'explode') {
setupNewFragmentExplodeTransition(navigationTransition, newEntry);
if (currentFragmentNeedsDifferentAnimation) {
setupCurrentFragmentExplodeTransition(navigationTransition, currentEntry);
@ -223,6 +224,7 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
onAnimationStart(animator: ExpandedAnimator): void {
const entry = animator.entry;
const backEntry = animator.backEntry;
addToWaitingQueue(entry);
if (Trace.isEnabled()) {
Trace.write(`START ${animator.transitionType} for ${entry.fragmentTag}`, Trace.categories.Transition);
@ -236,10 +238,13 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
}
onAnimationEnd(animator: ExpandedAnimator): void {
const entry = animator.entry;
const backEntry = animator.backEntry;
if (Trace.isEnabled()) {
Trace.write(`END ${animator.transitionType} for ${animator.entry.fragmentTag}`, Trace.categories.Transition);
Trace.write(`END ${animator.transitionType} for ${entry.fragmentTag} backEntry:${backEntry ? backEntry.fragmentTag : 'none'}`, Trace.categories.Transition);
}
transitionOrAnimationCompleted(animator.entry, animator.backEntry);
transitionOrAnimationCompleted(entry, backEntry);
animator.backEntry = null;
}
onAnimationCancel(animator: ExpandedAnimator): void {
@ -345,10 +350,12 @@ function getTransitionListener(entry: ExpandedEntry, transition: androidx.transi
onTransitionEnd(transition: androidx.transition.Transition): void {
const entry = this.entry;
const backEntry = this.backEntry;
if (Trace.isEnabled()) {
Trace.write(`END ${toShortString(transition)} transition for ${entry.fragmentTag}`, Trace.categories.Transition);
Trace.write(`END ${toShortString(transition)} transition for ${entry.fragmentTag} backEntry:${backEntry ? backEntry.fragmentTag : 'none'}`, Trace.categories.Transition);
}
transitionOrAnimationCompleted(entry, this.backEntry);
transitionOrAnimationCompleted(entry, backEntry);
this.backEntry = null;
}
onTransitionResume(transition: androidx.transition.Transition): void {
@ -660,6 +667,7 @@ function transitionOrAnimationCompleted(entry: ExpandedEntry, backEntry: Backsta
if (!entries) {
return;
}
console.log('transitionOrAnimationCompleted', frameId, backEntry && backEntry.fragmentTag, waitingQueue.size, entries.size, completedEntries.size );
entries.delete(entry);
if (entries.size === 0) {

6
packages/core/ui/frame/frame-common.ts
View File

@ -266,8 +266,8 @@ export class FrameBase extends CustomLayoutView {
public _updateBackstack(entry: BackstackEntry, navigationType: NavigationType): void {
const isBack = navigationType === NavigationType.back;
const isReplace = navigationType === NavigationType.replace;
this.raiseCurrentPageNavigatedEvents(isBack);
const current = this._currentEntry;
this.raiseCurrentPageNavigatedEvents(isBack);
// Do nothing for Hot Module Replacement
if (isBack) {
@ -303,10 +303,6 @@ export class FrameBase extends CustomLayoutView {
private raiseCurrentPageNavigatedEvents(isBack: boolean) {
const page = this.currentPage;
if (page) {
if (page.isLoaded) {
// Forward navigation does not remove page from frame so we raise unloaded manually.
page.callUnloaded();
}
page.onNavigatedFrom(isBack);
}
}

40
packages/core/ui/frame/index.android.ts
View File

@ -19,6 +19,7 @@ import { Builder } from '../builder';
import { CSSUtils } from '../../css/system-classes';
import { Device } from '../../platform';
import { profile } from '../../profiling';
import { ExpandedEntry } from './fragment.transitions.android';
export * from './frame-common';
@ -325,6 +326,8 @@ export class Frame extends FrameBase {
// If we had real navigation process queue.
this._processNavigationQueue(entry.resolvedPage);
} else {
// Otherwise currentPage was recreated so this wasn't real navigation.
// Continue with next item in the queue.
@ -437,7 +440,14 @@ export class Frame extends FrameBase {
//transaction.setTransition(androidx.fragment.app.FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
}
transaction.replace(this.containerViewId, newFragment, newFragmentTag);
if (clearHistory || isReplace) {
transaction.replace(this.containerViewId, newFragment, newFragmentTag);
} else {
transaction.add(this.containerViewId, newFragment, newFragmentTag);
}
if (this._currentEntry && this._currentEntry.entry.backstackVisible === false) {
transaction.remove(this._currentEntry.fragment);
}
transaction.commitAllowingStateLoss();
}
@ -459,8 +469,26 @@ export class Frame extends FrameBase {
_reverseTransitions(backstackEntry, this._currentEntry);
transaction.replace(this.containerViewId, backstackEntry.fragment, backstackEntry.fragmentTag);
const currentIndex =this.backStack.length;
const goBackToIndex = this.backStack.indexOf(backstackEntry);
// the order is important so that the transition listener called be
// the one from the current entry we are going back from
if (this._currentEntry !== backstackEntry) {
const entry = this._currentEntry as ExpandedEntry;
// if we are going back we need to store where we are backing to
// so that we can set the current entry
// it only needs to be done on the return transition
if (entry.returnTransitionListener) {
entry.returnTransitionListener.backEntry = backstackEntry;
}
transaction.remove((this._currentEntry).fragment);
}
for (let index = goBackToIndex + 1; index < currentIndex; index++) {
transaction.remove(this.backStack[index].fragment);
}
transaction.commitAllowingStateLoss();
}
@ -752,6 +780,12 @@ function findPageForFragment(fragment: androidx.fragment.app.Fragment, frame: Fr
entry = current;
} else if (executingContext && executingContext.entry && executingContext.entry.fragmentTag === fragmentTag) {
entry = executingContext.entry;
} else {
frame.backStack.forEach(e=>{
if (e && e.fragmentTag === fragmentTag) {
entry = e;
}
})
}
let page: Page;