Skip to content

Instantly share code, notes, and snippets.

@vhugogarcia
Last active September 26, 2022 21:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vhugogarcia/5aab9b83eb80a345a81b1090b80412e5 to your computer and use it in GitHub Desktop.
Save vhugogarcia/5aab9b83eb80a345a81b1090b80412e5 to your computer and use it in GitHub Desktop.
This Popup service helps to create and update the layout of a popup, so it allows running multiple Lottie animations during a process
using CommunityToolkit.Maui.Views;
namespace MauiApp.Services.ToolkitPopup;
public class PopupService : IPopupService
{
readonly Page page = Application.Current?.MainPage ?? throw new NullReferenceException();
private Popup popup { get; set; }
/// <summary>
/// Shows a Success state popup
/// </summary>
/// <param name="message"></param>
public void Success(string message = "")
{
popup = Init(Constants.AnimationSuccessFile, 1, message, true);
Show();
}
/// <summary>
/// Shows a loading state popup
/// </summary>
/// <returns></returns>
public void Loading(string message = "cargando...")
{
popup = Init(Constants.AnimationLoadingFile, -1, message, false);
Show();
}
/// <summary>
/// Hides the popup
/// </summary>
public void Hide()
{
if (popup != null)
popup.Close();
popup = null;
}
private void Show()
{
if (popup != null)
page.ShowPopup(popup);
}
/// <summary>
/// Updated the popup layout
/// </summary>
/// <param name="animationSource"></param>
/// <param name="animationRepeat"></param>
/// <param name="message"></param>
/// <param name="canBeDismissed"></param>
public void Update(string animationSource,
int animationRepeat = -1,
string message = "cargando...",
bool canBeDismissed = false)
{
if (popup == null)
return;
// Update the popup properties
popup.CanBeDismissedByTappingOutsideOfPopup = canBeDismissed;
if (popup.Content is VerticalStackLayout)
{
// Update the message
var layout = (VerticalStackLayout)popup.Content;
if (layout.Children.Count > 1 && layout.Children[1] is Label)
((Label)layout.Children[1]).Text = message;
// Update the animation
if (layout.Children.Count > 0 && layout.Children[0] is SKLottieView)
{
((SKLottieView)layout.Children[0]).RepeatCount = animationRepeat;
((SKLottieView)layout.Children[0]).Source = new SKFileLottieImageSource()
{
File = animationSource
};
}
}
}
/// <summary>
/// Init the popup layout and animation
/// </summary>
/// <param name="animationSource"></param>
/// <param name="message"></param>
/// <param name="canBeDismissed"></param>
/// <returns></returns>
private Popup Init(string animationSource,
int animationRepeat = -1,
string message = "cargando...",
bool canBeDismissed = false)
{
try
{
if (string.IsNullOrWhiteSpace(animationSource))
throw new Exception("Lottie Animation JSON file name is required.");
Popup popupLayout = new()
{
CanBeDismissedByTappingOutsideOfPopup = canBeDismissed,
Size = new Size(192, 192)
};
VerticalStackLayout verticalStackLayout = new()
{
StyleClass = new List<string> { "popup-layout" },
Padding = new Thickness(8,8,8,8),
};
Label messageLabel = new()
{
StyleClass = new List<string> { "popup-message" },
Text = message,
HorizontalOptions = LayoutOptions.Center,
HorizontalTextAlignment = TextAlignment.Center
};
var lottieAnimation = new SKLottieView()
{
IsAnimationEnabled = true,
HeightRequest = 128,
WidthRequest = 128,
RepeatCount = animationRepeat,
RepeatMode = SKLottieRepeatMode.Restart,
HorizontalOptions = LayoutOptions.Center,
Source = new SKFileLottieImageSource()
{
File = animationSource
},
};
verticalStackLayout.Children.Add(lottieAnimation);
if (!string.IsNullOrWhiteSpace(message))
verticalStackLayout.Children.Add(messageLabel);
popupLayout.Content = verticalStackLayout;
return popupLayout;
}
catch(Exception ex)
{
Debug.WriteLine(ex.ToString());
return null;
}
}
}
// You can use it on the following way from an MVVM pattern:
/*
PopupService.Loading("Saving...");
await Task.Delay(2000);
PopupService.Update(Constants.AnimationSuccessFile, 0, "Se creo exitosamente tu cuenta");
await Task.Delay(1500);
PopupService.Hide();
*/
@vhugogarcia
Copy link
Author

This is the result of the Popup Service:

Community.Toolkit.Popups.and.Lottie.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment