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

chore: initial android support (wip + hacked into place)

Browse Source
This commit is contained in:
Igor Randjelovic
2023-03-07 22:39:41 +01:00
committed by Nathan Walker
parent 224331b1ed
commit 653f58b1ad
4 changed files with 95 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/toolbox/src/pages/transitions.xml
View File

@@ -12,12 +12,15 @@
<GridLayout row="2" rows="auto,auto,auto,auto" tap="{{ openModal }}" marginTop="50">
<Image sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
<Label row="1" text="Open Modal" sharedTransitionTag="open-modal-label" class="text-center" />
<ContentView row="2" sharedTransitionTag="open-modal-box" marginTop="20" width="50" height="50" borderRadius="25" backgroundColor="purple" />
<Label row="1" text="NativeScript Rocks!" sharedTransitionTag="open-modal-label" class="text-center" color="black" />
<ContentView row="2" sharedTransitionTag="open-modal-box1" borderWidth="5" borderColor="yellow" marginTop="20" width="50" height="50" borderRadius="25" backgroundColor="purple" />
<ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="orange" />
<ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
<ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
</GridLayout>
<ContentView sharedTransitionTag="astronaut" rowSpan="4" translateY="600" opacity="0" isUserInteractionEnabled="false" />
</GridLayout>
</Page>

13
apps/toolbox/src/pages/transitions/transitions-detail.xml
View File

@@ -4,7 +4,16 @@
</ActionBar>
</Page.actionBar>
<GridLayout rows="*" columns="auto,*" verticalAlignment="top">
<Image row="0" sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100%" />
<GridLayout rows="auto,auto,*" columns="*" verticalAlignment="top">
<Image row="1" sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" height="230" verticalAlignment="top" marginTop="10" />
<GridLayout row="2" rows="auto,auto,auto">
<Label text="Opened Modal" verticalAlignment="top" marginTop="20" class="text-center" fontSize="28" color="black" />
<ContentView row="2" sharedTransitionTag="open-modal-box1" marginTop="20" width="200" height="200" borderRadius="100" backgroundColor="purple" />
<ContentView row="1" sharedTransitionTag="open-modal-box2" marginTop="20" width="75" height="75" borderRadius="37" backgroundColor="orange" />
<ContentView row="2" sharedTransitionTag="open-modal-box3" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="red" horizontalAlignment="right" marginRight="50" />
<ContentView row="1" sharedTransitionTag="open-modal-box4" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="pink" horizontalAlignment="left" marginLeft="50" />
</GridLayout>
</GridLayout>
</Page>

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

@@ -169,6 +169,9 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
}
}
// @ts-ignore
transition?.test?.(fragmentTransaction, currentEntry, newEntry);
printTransitions(currentEntry);
printTransitions(newEntry);
}

77
packages/core/ui/transition/modal-transition.android.ts
View File

@@ -1,3 +1,78 @@
import { BackstackEntry } from '../frame';
import { View } from '../core/view';
import { Transition } from '.';
import { querySelectorAll } from '../core/view-base';
export class ModalTransition extends Transition {}
export class ModalTransition extends Transition {
createAndroidAnimator(transitionType: string) {
console.log('HELLO', transitionType);
}
test(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry) {
console.log('HELLO', fragmentTransaction);
const fromPage = currentEntry.resolvedPage;
const toPage = newEntry.resolvedPage;
const currentFragment: androidx.fragment.app.Fragment = currentEntry ? currentEntry.fragment : null;
const newFragment: androidx.fragment.app.Fragment = newEntry.fragment;
// 1. Presented view: gather all sharedTransitionTag views
const presentedSharedElements = <Array<View>>querySelectorAll(toPage, 'sharedTransitionTag');
// console.log('presented sharedTransitionTag total:', presentedSharedElements.length);
// 2. Presenting view: gather all sharedTransitionTag views
const presentingSharedElements = <Array<View>>querySelectorAll(fromPage, 'sharedTransitionTag');
// console.log('presenting sharedTransitionTag total:', presentingSharedElements.length);
// 3. only handle sharedTransitionTag on presenting which match presented
const presentedTags = presentedSharedElements.map((v) => v.sharedTransitionTag);
const presentingViewsToHandle = presentingSharedElements.filter((v) => presentedTags.includes(v.sharedTransitionTag));
// fragmentTransaction.addSharedElement();
toPage.on('loaded', () => {
presentedSharedElements.forEach((v) => {
console.log({
presentedSharedElements: true,
nativeView: !!v.nativeView,
sharedTransitionTag: v.sharedTransitionTag,
});
androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
});
// setTimeout(() => {
newFragment.startPostponedEnterTransition();
// }, 2000)
});
presentingSharedElements.forEach((v) => {
console.log({
presentingSharedElements: true,
nativeView: !!v.nativeView,
sharedTransitionTag: v.sharedTransitionTag,
});
androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
});
presentingSharedElements.forEach((v) => {
fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
});
fragmentTransaction.setReorderingAllowed(true);
const transitionSet = new androidx.transition.TransitionSet();
transitionSet.setDuration(2000);
transitionSet.addTransition(new androidx.transition.ChangeBounds());
transitionSet.addTransition(new androidx.transition.ChangeTransform());
// transitionSet.addTransition(new androidx.transition.ChangeClipBounds());
// postpone enter until we call "loaded" on the new page
newFragment.postponeEnterTransition();
newFragment.setSharedElementEnterTransition(transitionSet);
newFragment.setSharedElementReturnTransition(transitionSet);
// newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
// currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds());
// currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
}
}