Home / user interface / 4-directions swipe navigation

4-directions swipe navigation

Posted by Unknown Senin, 27 Mei 2013 0 komentar

Gestures navigation.
I like fresh approach. And while I was developing my Urban Curiosity application I wanted to make it fresh by solving the common issue in a different manner . So I decided to make the application navigation based on swipe gestures and not on ActionBar, which is cool and handy navigation pattern that is used in near all modern applications.

Why gestures? Well, gestures can be performed on a larger screen area, so you can make a desired action faster and easier if to compare with a finger tap. Just swipe with your finger from any place to the desired direction! Also gestures are fun to use. :-)

In Urban Curiosity application you may navigate across all 4 main parts (Places, Profile, History and More) with a swipe gesture. Regular tap navigation is also available. I've prepared a short demo of the 4-directions (left, right, top, bottom) swipe navigation. The video itself is jaggy a little bit due to the video recording frame rate limitation. You may play with the real app to see how smooth it is. The demo video:

So in this article I want to share how to implement this in your projects.

Implementation.
Horizontal swipes are trivial - ViewPager class from the support library is perfect for this purpose. But what about vertical swipes and how to mix it with horizontal VerticalPager?

I've played with several open source implementations of vertical pagers for Android.
Not so buggy one as others is implementation by Grantland Chew: https://github.com/grantland/android-verticalpager

So I have chosen it as a base for vertical paging. However, to reach my needs I needed to extend it a little bit:

remove the code that shrinks the first page a little bit to make the beginning of the next page visible
change onMeasure to a better mesuring pages height
add method to request page snap with a custom duration
add method to lock/unlock pages switching

Now, we have the following choice: embed VerticalPager into ViewPager or vice versa. For the sake of simplicity and usage of nested fragments I decided to embed ViewPager into the VerticalPager. That way, our activity will have a VerticalPager with three fragments: top, central and bottom. Central fragment is a composite fragment and has three nested fragments: left, central and right. Pretty simple. Why fragments? More than likely each page will be completely different from thee others and has a custom behavior logic. In order not to overburden Activity object with all that stuff - fragments will help you to separate your code into smart reusable modules.

Next, we need to notify somehow VerticalPager (it's part of the activity) from the ViewPager (it's part of the fragment) about pages swipes to allow/disallow vertical scrolling. E.g. for left and right pages there should be no (i.e. disabled) vertical scrolling, while for central page there should be one (swipe to the top or bottom pages).

The common way for fragment-activity or fragment-fragment communication is to:

declare an interface into a fragment
implement it into an activity
provide that implementation to the fragment
finally, the fragment will trigger it when needed (e.g. page changed).

I like that way in general, it allows to keep things loosely coupled. However, that approach is pretty verbose. So there is another way to establish a "blind" communication between application parts. It's an event bus.

There are several Android event bus implementations. I wish to highlight three of them here. They were created specifically for Android and I used each of them extensively in a lot of projects. So feel free to choose the one you like more.

For this sample project I chose Otto. It has proven history of usage (at least by me and my team and by Square guys in their apps :-) and pretty easy to integrate and use.

So all communications are pretty easy now:

fragment with a ViewPager will post an PageChangedEvent event
activity with a VerticalPager will receive that event and decide whether there is any need to lock the vertical paging or not.

Do you see the cool thing here? Activity knows nothing about the fragment internals, it just declares "hey, notify me about page changes. I don't care where they came from, just notify me - I will do the rest". However, I want to warn you to use event bus very carefully. With a bad project design and events usage it can be hard to understand what and why happens in the project. Yes, there is a plugin for Intellij IDEA to navigate between events posted by Otto. But, you know, tools are never smart enough to make all the things for you.
So, event bus is a powerful tool in your arsenal, but use it with caution.

The last thing I want to mention is ViewPager scrolling behavior. The default ViewPager from support library is a good and mature component. However, when it's used in a scroll based container it becomes hardly usable due to the scroll container touch events interception. I will write a note about soon. Right now you can find here my ViewPager extension that is much much better at resolving scrolling directions.

Sources.
The full sample project with 4-directions swipe navigation is shared at my Bitbucket account:
https://bitbucket.org/NxAlex/swipes-navigation-demo

Let me to know if it helps you or you have some question related to the topic! :-)

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: 4-directions swipe navigation
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://androidillegal.blogspot.com/2013/05/4-directions-swipe-navigation.html. Terima kasih sudah singgah membaca artikel ini.