View Pager Training2014/03/25 John Lu

Outline

● Introduction● Design

○ PagerIndicator● How to implement

○ PageTransfomer● Summary● Homework

Introduction

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

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

Introduction

DesignExample: Unlimited swipable page● ViewPager● PageAdapter● PageTransformer

Design

CircularViewPager● Two virtual page:

Right and Left● Swipe to virtual page

upon to set it back. RIGHT LEFT

Design

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

Design

PageTransformer● While it is instantiated,

transforming with PageTransformer.● Depth animation fades the page out,

and scales it down linearly.

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

http://viewpagerindicator.com/Jake Wharton

DesignAndroid Design in Action: Common UX IssuesStreamed live on Sep 10, 2013Join 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

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.

How to implementPagerTransformer● Implement DepthPagerTransformer.● Override the transfromPage method.● Transform every child item with position.

N - 1 N + 1N

Position: -1 0 1

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

Summary

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

Demo:

HomeworkSample 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 pagerAdvance:● Customize a view pager that can

parameterlize the velocity, delay time, duration, etc,.