Skip to content

Instantly share code, notes, and snippets.

@pictos
Created June 21, 2024 01:01
Show Gist options
  • Save pictos/4f6889c2b91df3b556b53c2b7490e68c to your computer and use it in GitHub Desktop.
Save pictos/4f6889c2b91df3b556b53c2b7490e68c to your computer and use it in GitHub Desktop.
a view that implements the Reels navigation
sealed class SwipePageView : ContentView
{
View _firstPage;
View _secondPage;
AbsoluteLayout mainLayout;
bool flagThatIdontKnowHowToNameIt = false;
const uint length = 300;
const uint rate = 16;
Action<double> animateTransitionFirstPageAction;
Action<double> animateTransitionSecondPageAction;
public SwipePageView(View firstPage, View secondPage)
{
animateTransitionFirstPageAction = (v) => UpdateFirstPageTranslation(v);
animateTransitionSecondPageAction = (v) => UpdateSecondPageTranslation(v);
_firstPage = firstPage;
_secondPage = secondPage;
var swapGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };
swapGesture.Swiped += SwapGesture_Swiped;
mainLayout = new()
{
GestureRecognizers = { swapGesture }
};
Content = mainLayout;
SetPages();
}
void SetPages()
{
AbsoluteLayout.SetLayoutBounds(_secondPage, new Rect(0, 1, 1, 1));
AbsoluteLayout.SetLayoutFlags(_secondPage, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
mainLayout.Children.Add(_secondPage);
AbsoluteLayout.SetLayoutBounds(_firstPage, new Rect(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(_firstPage, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
mainLayout.Children.Add(_firstPage);
}
void SwapGesture_Swiped(object? sender, SwipedEventArgs e)
{
switch (e.Direction)
{
case SwipeDirection.Up:
AnimateTransitionUp();
break;
case SwipeDirection.Down:
AnimateTransitionDown();
break;
}
}
void AnimateTransitionDown()
{
if (!flagThatIdontKnowHowToNameIt)
return;
var firstPageAnimation = new Animation(animateTransitionFirstPageAction, -this.Height, 0);
var secondPageAnimation = new Animation(animateTransitionSecondPageAction, 0, this.Height);
var animation = new Animation { { 0, 1, firstPageAnimation }, { 0, 1, secondPageAnimation } };
animation.Commit(this, "PageSwapDown", rate, length, Easing.Linear, (v, c) => flagThatIdontKnowHowToNameIt = false, () => false);
}
void AnimateTransitionUp()
{
if (flagThatIdontKnowHowToNameIt)
return;
var firstPageAnimation = new Animation(animateTransitionFirstPageAction, 0, -this.Height);
var secondPageAnimation = new Animation(animateTransitionSecondPageAction, this.Height, 0);
var animation = new Animation { { 0, 1, firstPageAnimation }, { 0, 1, secondPageAnimation } };
animation.Commit(this, "PageSwapUp", rate, length, Easing.Linear, (v, c) => flagThatIdontKnowHowToNameIt = true, () => false);
}
void UpdateFirstPageTranslation(double v)
{
_firstPage.TranslationY = v;
}
void UpdateSecondPageTranslation(double v)
{
_secondPage.TranslationY = v;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment