This document discusses ViewPager training and includes the following key points: 1. ViewPager allows users to flip left and right through pages of data and works with Android 1.6 and above. It functions similarly to adapters like ListView. 2. Examples of ViewPager design include unlimited swipable pages, circular view pagers that loop from one side to the other, and using page transformers and indicators to transform pages and show page position. 3. Implementing ViewPager involves using a page adapter to instantiate fragments, listening for page changes, and transforming pages with techniques like scaling and fading them out as they move between positions.

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