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. RIGHTLEFT

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,.