Android Training - View Pager
-
Upload
kan-han-john-lu -
Category
Science
-
view
563 -
download
0
Transcript of Android Training - View Pager
![Page 1: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/1.jpg)
View Pager Training2014/03/25 John Lu
![Page 2: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/2.jpg)
Outline
● Introduction● Design
○ PagerIndicator● How to implement
○ PageTransfomer● Summary● Homework
![Page 3: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/3.jpg)
Introduction
ViewPager is a LayoutManager that allows the user to flip left and right through pages of data.
![Page 4: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/4.jpg)
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
![Page 5: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/5.jpg)
Introduction
![Page 6: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/6.jpg)
DesignExample: Unlimited swipable page● ViewPager● PageAdapter● PageTransformer
![Page 7: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/7.jpg)
Design
CircularViewPager● Two virtual page:
Right and Left● Swipe to virtual page
upon to set it back. RIGHT LEFT
![Page 8: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/8.jpg)
Design
PageAdapter● Fragment pager adapter● Instantiate a fragment when showing it.
![Page 9: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/9.jpg)
Design
PageTransformer● While it is instantiated,
transforming with PageTransformer.● Depth animation fades the page out,
and scales it down linearly.
![Page 10: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/10.jpg)
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
![Page 11: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/11.jpg)
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
![Page 12: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/12.jpg)
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.
![Page 13: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/13.jpg)
How to implementPagerTransformer● Implement DepthPagerTransformer.● Override the transfromPage method.● Transform every child item with position.
N - 1 N + 1N
Position: -1 0 1
![Page 14: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/14.jpg)
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
![Page 15: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/15.jpg)
Summary
● Where can we apply ViewPager● How does ViewPager to work● Transform Pager by using PagerTransformer
Demo:
![Page 16: Android Training - View Pager](https://reader031.fdocuments.in/reader031/viewer/2022030402/5889b02f1a28aba54d8b537f/html5/thumbnails/16.jpg)
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,.