際際滷

際際滷Share a Scribd company logo
View Pager Training
2014/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 shouldnt feel too foreign.
ref: http://goo.gl/SgWOUw
Introduction
Design
Example: Unlimited swipable page
 ViewPager
 PageAdapter
 PageTransformer
Design
CircularViewPager
 Two virtual page:
Right and Left
 Swipe to virtual page
upon to set it back. RIGHTLEFT
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 - 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
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.
際際滷s can be found here: https://plus.
google.
com/+RomanNurik/posts/6PwgQPMvK1p
Youtube: http://goo.gl/ujyWvy
How to implement
 Implement a OnPageChangeListener (Trick)
We cant deal with something here
because it calls back meanwhile
scrolling.
We need to know when does it finish
scrolling.
How to implement
PagerTransformer
 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:
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,.
Ad

Recommended

Android Training - Card Style
Android Training - Card Style
Kan-Han (John) Lu
A Deep Dive Into ViewPager
A Deep Dive Into ViewPager
CommonsWare
Android layout
Android layout
Kirill Kulakov
WordPress speed optimalisation
WordPress speed optimalisation
Remco Nieuwenhuizen
Sthg Big
Sthg Big
bereketnesh
Content Creation Tools
Content Creation Tools
Digital Shende
Ela carrillo how to use pagemodo
Ela carrillo how to use pagemodo
Ela Carrillo
LAYOUT BUILDER. HOW WE BUILD PLATFORM WITH COLOR/THEME MANAGEMENT.
LAYOUT BUILDER. HOW WE BUILD PLATFORM WITH COLOR/THEME MANAGEMENT.
DrupalCamp Kyiv
User experience and interactions design
User experience and interactions design
Rakesh Jha
Georgiy Shur: Bring onboarding to life
Georgiy Shur: Bring onboarding to life
mdevtalk
How Android API's evolved: Viewflipper vs ViewPager
How Android API's evolved: Viewflipper vs ViewPager
Enrique Diaz
Beauty Treatment for your Android Application
Beauty Treatment for your Android Application
Codemotion
Treatment, Architecture and Threads
Treatment, Architecture and Threads
Mathias Seguy
Android design patterns
Android design patterns
Platty Soft
Android Best Practices
Android Best Practices
Yekmer Simsek
Mastering Material Motion
Mastering Material Motion
Mike Wolfson
Getting the Magic on Android Tablets
Getting the Magic on Android Tablets
Motorola Mobility - MOTODEV
Android 3
Android 3
Robert Cooper
Android Support Libraries
Android Support Libraries
Kelly Shuster
Advance ui development and design
Advance ui development and design
Rakesh Jha
Getting the Magic on Android Tablets
Getting the Magic on Android Tablets
OSCON Byrum
Android webinar class_4
Android webinar class_4
Edureka!
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
Danny Preussler
Android UI Tips & Tricks
Android UI Tips & Tricks
DroidConTLV
Mobile Software Engineering Crash Course - C04 Android Cont.
Mobile Software Engineering Crash Course - C04 Android Cont.
Mohammad Shaker
Mastering the Master Detail Pattern
Mastering the Master Detail Pattern
CommonsWare
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
James Montemagno
Android best practices
Android best practices
Jose Manuel Ortega Candel
Dagger for android
Dagger for android
Kan-Han (John) Lu
Android develop guideline
Android develop guideline
Kan-Han (John) Lu

More Related Content

Similar to Android Training - View Pager (20)

User experience and interactions design
User experience and interactions design
Rakesh Jha
Georgiy Shur: Bring onboarding to life
Georgiy Shur: Bring onboarding to life
mdevtalk
How Android API's evolved: Viewflipper vs ViewPager
How Android API's evolved: Viewflipper vs ViewPager
Enrique Diaz
Beauty Treatment for your Android Application
Beauty Treatment for your Android Application
Codemotion
Treatment, Architecture and Threads
Treatment, Architecture and Threads
Mathias Seguy
Android design patterns
Android design patterns
Platty Soft
Android Best Practices
Android Best Practices
Yekmer Simsek
Mastering Material Motion
Mastering Material Motion
Mike Wolfson
Getting the Magic on Android Tablets
Getting the Magic on Android Tablets
Motorola Mobility - MOTODEV
Android 3
Android 3
Robert Cooper
Android Support Libraries
Android Support Libraries
Kelly Shuster
Advance ui development and design
Advance ui development and design
Rakesh Jha
Getting the Magic on Android Tablets
Getting the Magic on Android Tablets
OSCON Byrum
Android webinar class_4
Android webinar class_4
Edureka!
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
Danny Preussler
Android UI Tips & Tricks
Android UI Tips & Tricks
DroidConTLV
Mobile Software Engineering Crash Course - C04 Android Cont.
Mobile Software Engineering Crash Course - C04 Android Cont.
Mohammad Shaker
Mastering the Master Detail Pattern
Mastering the Master Detail Pattern
CommonsWare
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
James Montemagno
Android best practices
Android best practices
Jose Manuel Ortega Candel
User experience and interactions design
User experience and interactions design
Rakesh Jha
Georgiy Shur: Bring onboarding to life
Georgiy Shur: Bring onboarding to life
mdevtalk
How Android API's evolved: Viewflipper vs ViewPager
How Android API's evolved: Viewflipper vs ViewPager
Enrique Diaz
Beauty Treatment for your Android Application
Beauty Treatment for your Android Application
Codemotion
Treatment, Architecture and Threads
Treatment, Architecture and Threads
Mathias Seguy
Android design patterns
Android design patterns
Platty Soft
Android Best Practices
Android Best Practices
Yekmer Simsek
Mastering Material Motion
Mastering Material Motion
Mike Wolfson
Android Support Libraries
Android Support Libraries
Kelly Shuster
Advance ui development and design
Advance ui development and design
Rakesh Jha
Getting the Magic on Android Tablets
Getting the Magic on Android Tablets
OSCON Byrum
Android webinar class_4
Android webinar class_4
Edureka!
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
(Android) Developer Survival in Multiscreen World, MobCon Sofia 2016
Danny Preussler
Android UI Tips & Tricks
Android UI Tips & Tricks
DroidConTLV
Mobile Software Engineering Crash Course - C04 Android Cont.
Mobile Software Engineering Crash Course - C04 Android Cont.
Mohammad Shaker
Mastering the Master Detail Pattern
Mastering the Master Detail Pattern
CommonsWare
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
Evovle 2016 - Everyone Can Create Beautiful Apps with Material Design
James Montemagno

More from Kan-Han (John) Lu (20)

Dagger for android
Dagger for android
Kan-Han (John) Lu
Android develop guideline
Android develop guideline
Kan-Han (John) Lu
Working process and git branch strategy
Working process and git branch strategy
Kan-Han (John) Lu
Deep neural network for youtube recommendations
Deep neural network for youtube recommendations
Kan-Han (John) Lu
Android testing part i
Android testing part i
Kan-Han (John) Lu
Cuda project paper
Cuda project paper
Kan-Han (John) Lu
Twitter as a personalizable information service ii
Twitter as a personalizable information service ii
Kan-Han (John) Lu
Multimedia data minig and analytics sentiment analysis using social multimedia
Multimedia data minig and analytics sentiment analysis using social multimedia
Kan-Han (John) Lu
Android IPC: Binder
Android IPC: Binder
Kan-Han (John) Lu
ARM: Trusted Zone on Android
ARM: Trusted Zone on Android
Kan-Han (John) Lu
Android Training - Sliding Menu
Android Training - Sliding Menu
Kan-Han (John) Lu
Android Training - Pull to Refresh
Android Training - Pull to Refresh
Kan-Han (John) Lu
Java: Exception Handling
Java: Exception Handling
Kan-Han (John) Lu
Dynamic Proxy by Java
Dynamic Proxy by Java
Kan-Han (John) Lu
Code analyzer: FindBugs and PMD
Code analyzer: FindBugs and PMD
Kan-Han (John) Lu
Android UI System
Android UI System
Kan-Han (John) Lu
Android Fragment
Android Fragment
Kan-Han (John) Lu
Android Training - Content Sharing
Android Training - Content Sharing
Kan-Han (John) Lu
Android Training - Action Bar
Android Training - Action Bar
Kan-Han (John) Lu
Explaination of angular
Explaination of angular
Kan-Han (John) Lu
Android develop guideline
Android develop guideline
Kan-Han (John) Lu
Working process and git branch strategy
Working process and git branch strategy
Kan-Han (John) Lu
Deep neural network for youtube recommendations
Deep neural network for youtube recommendations
Kan-Han (John) Lu
Twitter as a personalizable information service ii
Twitter as a personalizable information service ii
Kan-Han (John) Lu
Multimedia data minig and analytics sentiment analysis using social multimedia
Multimedia data minig and analytics sentiment analysis using social multimedia
Kan-Han (John) Lu
ARM: Trusted Zone on Android
ARM: Trusted Zone on Android
Kan-Han (John) Lu
Android Training - Sliding Menu
Android Training - Sliding Menu
Kan-Han (John) Lu
Android Training - Pull to Refresh
Android Training - Pull to Refresh
Kan-Han (John) Lu
Code analyzer: FindBugs and PMD
Code analyzer: FindBugs and PMD
Kan-Han (John) Lu
Android Training - Content Sharing
Android Training - Content Sharing
Kan-Han (John) Lu
Android Training - Action Bar
Android Training - Action Bar
Kan-Han (John) Lu
Ad

Recently uploaded (20)

FYJC .Chapter-14 L-1 Human Nutrition.pdf
FYJC .Chapter-14 L-1 Human Nutrition.pdf
RachanaT6
THE CIRCULATORY SYSTEM GRADE 9 SCIENCE.pptx
THE CIRCULATORY SYSTEM GRADE 9 SCIENCE.pptx
roselyncatacutan
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
ShrayasiRoy2
History of Nursing and Nursing As A Profession UNIT-3.pptx
History of Nursing and Nursing As A Profession UNIT-3.pptx
madhusrinivas68
An Analysis Of The Pearl Short Story By John Steinbeck
An Analysis Of The Pearl Short Story By John Steinbeck
BillyDarmawan3
Investigatory_project Topic:-effect of electrolysis in solar desalination .pdf
Investigatory_project Topic:-effect of electrolysis in solar desalination .pdf
shubham997ku
Single-Cell Multi-Omics in Neurodegeneration p1.pptx
Single-Cell Multi-Omics in Neurodegeneration p1.pptx
KanakChaudhary10
HERBAL INGREDIENTS USED IN ORAL CARE.pptx
HERBAL INGREDIENTS USED IN ORAL CARE.pptx
Vidhi889356
Climate and Weather_SCIENCE9-QUARTER3.pptx
Climate and Weather_SCIENCE9-QUARTER3.pptx
Dayan Espartero
Type of Heat Exchanger operation Socar pptx
Type of Heat Exchanger operation Socar pptx
TuralQuliyev5
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
ShrayasiRoy
Operationalising OGC Processes with Application Packages in ILIAD: A Service ...
Operationalising OGC Processes with Application Packages in ILIAD: A Service ...
Marco Amaro Oliveira
Death in Sleep Apnea: Who and How It Kills
Death in Sleep Apnea: Who and How It Kills
Richard Castriotta
8,9-Red Blood Cells.pdf ayurveda for life
8,9-Red Blood Cells.pdf ayurveda for life
AnkitBhardwaj874048
Antipsychotics-FOR LECTURE.pdf................
Antipsychotics-FOR LECTURE.pdf................
FalguniPatil6
1-SEAFLOOR-SPREADINGGGGGGGGGGGGGGGGGGGG.pptx
1-SEAFLOOR-SPREADINGGGGGGGGGGGGGGGGGGGG.pptx
JohnCristoffMendoza
Science 8 Quarter 4 first quiz digestive system.docx
Science 8 Quarter 4 first quiz digestive system.docx
junefermunez
the_World_of_Algae_An_Introduction_to_Phycology.pptx
the_World_of_Algae_An_Introduction_to_Phycology.pptx
mabrukaalfnek
Chromatography 際際滷s for the course of Introduction to Biology and Chemistry...
Chromatography 際際滷s for the course of Introduction to Biology and Chemistry...
Md. Arif Shahriar
Lesson 1 in Earth and Life Science .pptx
Lesson 1 in Earth and Life Science .pptx
KizzelLanada2
FYJC .Chapter-14 L-1 Human Nutrition.pdf
FYJC .Chapter-14 L-1 Human Nutrition.pdf
RachanaT6
THE CIRCULATORY SYSTEM GRADE 9 SCIENCE.pptx
THE CIRCULATORY SYSTEM GRADE 9 SCIENCE.pptx
roselyncatacutan
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
ShrayasiRoy2
History of Nursing and Nursing As A Profession UNIT-3.pptx
History of Nursing and Nursing As A Profession UNIT-3.pptx
madhusrinivas68
An Analysis Of The Pearl Short Story By John Steinbeck
An Analysis Of The Pearl Short Story By John Steinbeck
BillyDarmawan3
Investigatory_project Topic:-effect of electrolysis in solar desalination .pdf
Investigatory_project Topic:-effect of electrolysis in solar desalination .pdf
shubham997ku
Single-Cell Multi-Omics in Neurodegeneration p1.pptx
Single-Cell Multi-Omics in Neurodegeneration p1.pptx
KanakChaudhary10
HERBAL INGREDIENTS USED IN ORAL CARE.pptx
HERBAL INGREDIENTS USED IN ORAL CARE.pptx
Vidhi889356
Climate and Weather_SCIENCE9-QUARTER3.pptx
Climate and Weather_SCIENCE9-QUARTER3.pptx
Dayan Espartero
Type of Heat Exchanger operation Socar pptx
Type of Heat Exchanger operation Socar pptx
TuralQuliyev5
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
How Psychology Can Power Product Decisions: A Human-Centered Blueprint- Shray...
ShrayasiRoy
Operationalising OGC Processes with Application Packages in ILIAD: A Service ...
Operationalising OGC Processes with Application Packages in ILIAD: A Service ...
Marco Amaro Oliveira
Death in Sleep Apnea: Who and How It Kills
Death in Sleep Apnea: Who and How It Kills
Richard Castriotta
8,9-Red Blood Cells.pdf ayurveda for life
8,9-Red Blood Cells.pdf ayurveda for life
AnkitBhardwaj874048
Antipsychotics-FOR LECTURE.pdf................
Antipsychotics-FOR LECTURE.pdf................
FalguniPatil6
1-SEAFLOOR-SPREADINGGGGGGGGGGGGGGGGGGGG.pptx
1-SEAFLOOR-SPREADINGGGGGGGGGGGGGGGGGGGG.pptx
JohnCristoffMendoza
Science 8 Quarter 4 first quiz digestive system.docx
Science 8 Quarter 4 first quiz digestive system.docx
junefermunez
the_World_of_Algae_An_Introduction_to_Phycology.pptx
the_World_of_Algae_An_Introduction_to_Phycology.pptx
mabrukaalfnek
Chromatography 際際滷s for the course of Introduction to Biology and Chemistry...
Chromatography 際際滷s for the course of Introduction to Biology and Chemistry...
Md. Arif Shahriar
Lesson 1 in Earth and Life Science .pptx
Lesson 1 in Earth and Life Science .pptx
KizzelLanada2
Ad

Android Training - View Pager

  • 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 shouldnt feel too foreign. ref: http://goo.gl/SgWOUw
  • 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. 際際滷s 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 cant 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,.