Building a Gmail Swipe to Delete Gesture & Animated FAB with Ionic Angular
source link: https://devdactic.com/gmail-swipe-to-delete-ionic/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Building a Gmail Swipe to Delete Gesture & Animated FAB with Ionic Angular
July 13, 2021 By Simon 1 Comment
We have previously created a basic Gmail clone with Ionic, but there are certain UI and especially UX elements missing that make the original app look so amazing.
In this tutorial we will implement an animated fab button and a special behaviour to slide and delete items from an Ionic list.
All of this will be possible through the usage of Ionic gestures and the Animation API, which are truly powerful as you will see.
Get the Code.
Receive all Ionic code files directly to your inbox!
Prerequisite: If you want to follow along exactly, please download the code for the previous tutorial from this Github repository!
Creating a FAB Animation while scrolling
The fist part will be a bit easier, we simply want to expand or shrink a fab button when we scroll up or down. To get started, generate a new directive:
In order to use this directive we need to include it within the src/app/directives/shared-directives.module.ts:
Now we can add the directive to our main page as it will listen to scroll events just like a bunch of other directives we have set up in our Built with Ionic tutorials before.
The actual fab button code goes to the bottom of our page and can be referenced through the #fab
template reference, which we pass to our appAnimatedFab
directive.
Go ahead and change the src/app/pages/mail/mail.page.html in these places now:
The default Ionic fab is just a round button, but we need to make it expanded by default. To do this, we can manually define the width and height, change the border radius so it doesn’t look like an egg and apply a stronger shadow.
For this, open the src/app/pages/mail/mail.page.scss and add:
We are also using the shadow part of the fab button here to directly apply a styling to something inside the shadow component without CSS variables!
Now we can create the actual directive, which will get all the scroll events of our content. Basically we want to:
- Shrink the fab while scrolling down
- Fade and move out the text inside the
span
of the fab - Reverse this operation when we scroll up again.
And we can actually do all of this by defining two simple Ionic animations! These animate the according elements, and we can combine those two single animations inside one by passing an array of animations to the addAnimation()
function of the Animation controller.
Inside of the scroll listener we will also check the direction of scroll and use the expanded
variable to make sure we only run each animation once when the direction has changed.
Now open the src/app/directives/animated-fab.directive.ts and change it to:
Initially I thought we need a complete reverse animation, but using direction('reverse')
is completely enough to achieve exactly what we need!
Now you can scroll your page up and down, and the fab button will shrink/expand depending on your scroll direction.
Sliding Item to Archive and Delete
Now things will get more challenging but the reward is also bigger. We want to implement a slide to delete behaviour with custom animation and different background colors on both sides of our email, just like inside the Gmail application.
For this we need a custom component with a new module, and we can also install the Capacitor haptics package for some icing on the cake, so go ahead and run:
First of all we need to declare and export our component in the new module, and also import all necessary other modules we might need.
Therefore go ahead and change the src/app/components/shared-components.module.ts to:
Now we can bring over most of the original template for displaying our Gmail styled icon, but we will put another wrapper div in front of it which will act as the background that can be revealed when we swipe the item.
Go ahead and change the src/app/components/swipe-item/swipe-item.component.html to this:
I’ve taken the markup for the item 99% from the mail page, and we can also bring over the original styling for the email. On top of that we make our wrapper class use the same fixed height as our item, and use a flex box layout to align the icons within in the center and make the columns divide that space evenly.
Open the src/app/components/swipe-item/swipe-item.component.scss now and change it to this:
I’ve also added a class rounded
which will be added to an item once we start dragging, which will make the current item stand out with additional shadow.
Now it’s time for the logic, and this is a bit more complicated:
- We define an
ANIMATION_BREAKPOINT
which is the distance after which an item can be released and will be delete. Until that value, the item will only snap back to it’s original place - We need a gesture and handle the move and end of our item
- On move, we check the direction and color the background of our wrapper red or green depending on the x direction
- On move, we transform the X coordinates according to the current delta to move the item left or right
- On move, we animate the trash/archive icon if we crossed the breakpoint and run a function to handle this
- On end, we check if we are above our breakpoint and slide the item out to the left/right and run a custom delete animation that we define upfront. This function animates the height, so the item flys out and the row collapses at the same time
- On end, when the animation has finished we emit this to the parent component using an
EventEmitter
All of this can be achieved with the Ionic gesture and animation controller, so go ahead and change the src/app/components/swipe-item/swipe-item.component.ts to:
It’s actually quite straight forward if you get the various if/else statements right!
Now we just need to define the functions for our icons, which will simply scale the icon when we crossed the breakpoint or reverse that animation otherwise.
At this point we can also use the haptics plugin for a real feedback about a change to the user – awesome UX from the Gmail application!
Go ahead and implement the missing functions like this now:
Now we just need to use our new item instead of the original one in our app.
Using the Swipe Item
To put it to use, bring up the src/app/pages/mail/mail.module.ts and import our new components module:
We can simply exchange the previous code and continue to use the for loop while also adding the output from our component and calling the removeMail()
function when we catch that event.
Therefore, open the src/app/pages/mail/mail.page.html and replace the necessary lines like this:
On top of that we can remove the item from the data array now and manually update the view using the Angular ChangeDetectorRef
since otherwise the view wouldn’t be updated correctly (check out my video below at the end to see the difference).
To do so, simply change the required parts inside the src/app/pages/mail/mail.page.ts to:
And with that our custom swipe to delete/archive works, running smoothly and looking 99% like the original Gmail style!
Conclusion
Building advanced UX patterns into your Ionic application is most of the time a straight forward task, and you can implement almost every pattern you see in popular apps.
Usually you can break down an animation into smaller chunks, build each of them separately and then combine them to one epic result.
If you want to see more of these apps, check out the other Built with Ionic tutorials as well!
Recommend
-
50
Wear OS by Google gives you quicker access to the information that matters most, more proactive help and smarter health coaching.
-
28
The iOS SDK can detect a number of gestures. In this tutorial we show how to detect the left and right swipe gesture. We will create a label which moves to the side of the swipe. This tutorial is made with Xcode 10 and bu...
-
86
Building Tinder Like Swipe Cards in AndroidDo you use TINDER? Don’t Lie I know you do 😜. Jokes apart but the Swipe-able Cards of Tinder are really good in terms of User Experience. So this post is basically about building Tin...
-
6
How to customize swipe gestures on the Gmail appGet rid of those crap emails quickly
-
15
Building a Gmail Clone with Ionic & Angular June 29, 2021 By Simon 0 Comments
-
5
14 Comments - Add comment ...
-
4
How To Delete Your Gmail Account ...
-
7
Google’s Gmail has long been a favorite email service for many people. One of the reasons for its popularity is that it is free to use, supported by advertising. However, recent reports suggest that the number of ads appearing in users’ inboxes is...
-
5
Google might delete your Gmail account if you haven’t logged in for two years / The old policy would wipe data from unused personal accounts, but now, the entire Google account is at risk of deletion.
-
11
Google to delete Gmail and Photos accounts...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK