Android Training - View Pager

The slide for a training course of Android.

1. View Pager Training
2014/03/25 John Lu

2. Outline
●Introduction
●Design
○PagerIndicator
●How to implement
○PageTransfomer
●Summary
●Homework

3. Introduction
ViewPager is a LayoutManager that allows the
user to flip left and right through pages of data.

4. Introduction
ViewPager was released as part of the
Compatibility Package revision 3 and works
with Android 1.6 upwards.
ViewPager is a ViewGroup and works in a
similar manner to AdapterViews (like ListView
and Gallery) so it shouldn’t feel too foreign.

ref: http://goo.gl/SgWOUw

5. Introduction

6. Design
Example: Unlimited swipable page
●ViewPager
●PageAdapter
●PageTransformer

7. Design
CircularViewPager
●Two virtual page:
Right and Left
●Swipe to virtual page
upon to set it back. RIGHT LEFT

8. Design
PageAdapter
●Fragment pager adapter
●Instantiate a fragment when showing it.

9. Design
PageTransformer
●While it is instantiated,
transforming with PageTransformer.
●Depth animation fades the page out,
and scales it down linearly.

10. Design - PagerIndicator
ViewPager widget it
is not always obvious
to the user that there
are adjacent views
they can navigate to.








http://viewpagerindicator.com/
Jake Wharton

11. Design
Android Design in Action:
Common UX Issues
Streamed live on Sep 10, 2013
Join Nick Butcher, Adam Koch and Roman
Nurik as they discuss various elements of
Android Design. This week, we'll run
through a top-ten-style list of the most
common user experience issues we've
observed during app review.

Slides can be found here: https://plus.
google.
com/+RomanNurik/posts/6PwgQPMvK1p





Youtube: http://goo.gl/ujyWvy

12. How to implement
●Implement a OnPageChangeListener (Trick)
We can’t deal with something here
because it calls back meanwhile
scrolling.
We need to know when does it finish
scrolling.

13. How to implement
PagerTransformer
●Implement DepthPagerTransformer.
●Override the transfromPage method.
●Transform every child item with position.
N - 1 N + 1N
Position: -1 0 1

14. How to implement
●scaleFactor: [MIN_SCALE, 1]
●Centre: pageWidth * -position
Scale: MIN_SCALE + (1 - MIN_SCALE) * (1 - position)
Alpha: 1 - position
N - 1 N + 1N
Position: -1 0 1

15. Summary
●Where can we apply ViewPager
●How does ViewPager to work
●Transform Pager by using PagerTransformer

Demo:

16. Homework
Sample source code: (You can also fInd it at the video record nearby if this link is invalid.)
https://www.dropbox.com/s/jtrn6iph2htcmyy/TrainingViewPager.zip
Basic:
●Vertically swiping view pager
Advance:
●Customize a view pager that can
parameterlize the velocity, delay time,
duration, etc,.