Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Fear No Fragments
Exploring Fragments in modern day android development!
@dipoareoye Yup.com
DEMO : WORLD CUP CATCH UP
Icon made by SmashIcons from www.flaticon.com
MatchListActivity
- RecyclerView
- List<Match>
- ScoreListener
MatchDetailAcitivy
- Match
- Image
- videoUrl
- Commentary
...
Goal For Today
Reason about why and when we use Fragments
Keep their usage pain-free(ish)
3 Components
Activities
Views
Fragments
What is a Fragment?
“a small part broken or separated off something.”
Represent Portions of UIs in Activities
- Lifecycle
...
Static Fragment
Dynamic Fragment
public class MainActivity extends FragmentActivity {
@Override
public void onCreate(Bundle savedInstanceS...
Dynamic Fragment
Sending Data to fragment
Activity FragmentArguments
MatchDetail
1. Score
2. Comments
...
Fragment Lifecycle
Fragment Lifecycle
OnCreate -> initialize essential
components to be retained
OnCreateView -> First UI draw, return
UI her...
Fragment Lifecycle
OnPause -> Remove listeners etc..
OnDestroy -> Final Cleanup to
fragments state
Activity/Fragment Lifecycle
First Lesson
Only Override what you need, Don’t get overwhelmed
Be mindful of the activity lifecycle
FragmentManger and FragmentTransaction
FragmentManager
getSupportFragmentManager()
getChildFragmentManager()
FragmentManger and FragmentTransaction
FragmentManager FragmentTransaction fragment
add
remove
replace
attach
detach
show
...
Navigation
Replace
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 0
List Fragment
Container
Replace
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 0
List Fragment!
Container
Replace
/ Add
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
Replace: container -> Detail
Detail Fragment...
Replace
/ Add
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
Replace: container -> Detail
Detail Fragment...
Replace
/ Add
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
Replace: container -> Detail
Detail Fragment...
Replace
/ Add
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
Detail Fragment!
Container
List Fragment!
Re...
Replace
/ Add
AddToBack
Stack CommitBegin
Detail Fragment!
Container
Replace
FragmentManager backstack
Count = 1
Remove: L...
Example - Pressing Back
Detail Fragment!
Container
FragmentManager backstack
Count = 1
Remove: ListFragment
Add: DetailFragment
Remove: ListFragme...
Detail Fragment!
Container
FragmentManager backstack
Count = 1
Remove: ListFragment
Add: DetailFragment
Remove: DetailFrag...
Detail Fragment!
Container
FragmentManager backstack
Count = 0
Remove: DetailFragment
Add: ListFragment
OnBackPressed()
De...
Comment
MatchDetail
Fragment
Comment
MatchDetail
Fragment
Comment
Fragment
Comment Next
MatchDetail
Fragment
SignIn
Fragment
Comment
Fragment
Comment Next
MatchDetail
Fragment
SignIn
Fragment
Comment
Fragment
Replace
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 0
A
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
A B
REMOVE: A ADD: B
Replace
AddToBack
Stack CommitBegin
FragmentManager backstack
Count = 1
B
REMOVE: A ADD: B
Replace
FragmentManager backstack
Count = 2
REMOVE: B ADD: C
B C
REMOVE: A ADD: B
AddToBack
Stack CommitBegin Replace
FragmentManager backstack
Count = 2
REMOVE: B ADD: C
C
REMOVE: A ADD: B
AddToBack
Stack CommitBegin Replace
AddToBack
Stack CommitBegin
Container
C
Replace
FragmentManager backstack
Count = 2
2 :REMOVE: B ADD: C
1: REMOVE: A ADD: B
Container
B
FragmentManager backstack
Count = 1
REMOVE: A ADD: B
addTo
BackStack
CommitBegin ReplaceFragment B
Container
C
FragmentManager backstack
Count = 1
REMOVE: A ADD: B
CommitBegin ReplaceFragment C
Container
C
FragmentManager backstack
Count = 1
REMOVE: A ADD: B
OnBackPressed()
Remove: B(null)
Add: A
Container
A
FragmentManager backstack
Count = 0
OnBackPressed()
ContainerFragmentManager backstack
Count = 0
OnBackPressed()
A
C
Lesson #2
BackStack != fragments hierarchy
Solutions?
We can implement a backStackChangeListener()
We can override onBackPressed()
We can avoid the back stack modifi...
B
A
FragmentManager backstack
Count = 0
B
B
FragmentManager backstack
Count = 1
REMOVE: A ADD: B
B
B
FragmentManager backstack
Count = 1
REMOVE: A ADD: B
B
C
Async Woes
Running
Async Woes
Running
Back
Home
New Screen
Rotates
Stopped
Async Woes
Running
Back
Home
New Screen
Rotates
Stopped
Stopped
Data
updateUI()
Async Woes
Running
Back
Home
New Screen
Rotates
Stopped
Stopped
Data
updateUI()
IllegalStateException
Lesson #3
Be mindful of making fragment transactions/UI updates from async callbacks
Solutions?
Check if the fragment is Added to activity before updating UI
Add Flags in tear down lifecycle methods (onPause...
ViewModel
Data
Summary
Don't get overwhelmed Fragment Lifecycle
Don't be afraid to customise the back stack
Try to take async tasks outsi...
ViewPager
DialogFragment
HeadlessFragment
setRetainInstance(true)
Hybrid Web App
Existing fragment based architecture(ViewPager,Custom Dialogs)
Required Custom backstack
Needs to persist t...
Solution
Put webview in its own fragment
Custom replace in activity
In which we can show/hide at Will
Fin!
Thank You
@DipoAreoye
Fear no fragments
Fear no fragments
Fear no fragments
Próxima SlideShare
Cargando en…5
×

Fear no fragments

250 visualizaciones

Publicado el

Fragment – “a small part broken or separated off something.”

Are they like mini activities? Are they super views? The Fragment has always been a source of controversy. Love or hate them, they are a fundamental component of the Android SDK, and when used correctly can really help supercharge your app!

Through concrete examples, you will learn best practices in regards to managing fragment transactions, staying on top of its lifecycle and tips on avoiding the most common pain points that developers face.

Finally, we’ll go through some advanced uses of fragments(headless fragments anyone?). And a quick example of how I used fragments to persist a web app in a hybrid application.

Publicado en: Software
  • Sé el primero en comentar

Fear no fragments

  1. 1. Fear No Fragments Exploring Fragments in modern day android development! @dipoareoye Yup.com
  2. 2. DEMO : WORLD CUP CATCH UP Icon made by SmashIcons from www.flaticon.com
  3. 3. MatchListActivity - RecyclerView - List<Match> - ScoreListener MatchDetailAcitivy - Match - Image - videoUrl - Commentary feed
  4. 4. Goal For Today Reason about why and when we use Fragments Keep their usage pain-free(ish)
  5. 5. 3 Components Activities Views Fragments
  6. 6. What is a Fragment? “a small part broken or separated off something.” Represent Portions of UIs in Activities - Lifecycle - Receive its own input events - Added and removed using the Fragment manager
  7. 7. Static Fragment
  8. 8. Dynamic Fragment public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { MatchlistFragment listFragment = new MatchlistFragment(); getSupportFragmentManager().beginTransaction() .add(R.id.fragment_container_list, listFragment) .addToBackStack(null) .commit();
  9. 9. Dynamic Fragment
  10. 10. Sending Data to fragment Activity FragmentArguments MatchDetail 1. Score 2. Comments ...
  11. 11. Fragment Lifecycle
  12. 12. Fragment Lifecycle OnCreate -> initialize essential components to be retained OnCreateView -> First UI draw, return UI here onViewCreated -> initialise UI!
  13. 13. Fragment Lifecycle OnPause -> Remove listeners etc.. OnDestroy -> Final Cleanup to fragments state
  14. 14. Activity/Fragment Lifecycle
  15. 15. First Lesson Only Override what you need, Don’t get overwhelmed Be mindful of the activity lifecycle
  16. 16. FragmentManger and FragmentTransaction FragmentManager getSupportFragmentManager() getChildFragmentManager()
  17. 17. FragmentManger and FragmentTransaction FragmentManager FragmentTransaction fragment add remove replace attach detach show hide
  18. 18. Navigation
  19. 19. Replace AddToBack Stack CommitBegin FragmentManager backstack Count = 0 List Fragment Container
  20. 20. Replace AddToBack Stack CommitBegin FragmentManager backstack Count = 0 List Fragment! Container
  21. 21. Replace / Add AddToBack Stack CommitBegin FragmentManager backstack Count = 1 Replace: container -> Detail Detail Fragment! Container List Fragment! Replace
  22. 22. Replace / Add AddToBack Stack CommitBegin FragmentManager backstack Count = 1 Replace: container -> Detail Detail Fragment! Container List Fragment! replace(R.id.fragment_container_list, listFragment) Replace
  23. 23. Replace / Add AddToBack Stack CommitBegin FragmentManager backstack Count = 1 Replace: container -> Detail Detail Fragment! Container List Fragment! replace(R.id.fragment_container_list, listFragment)replace(R.id.fragment_container_list, detailFragment) 1. Remove: ListFragment 2. Add: DetailFragment Replace
  24. 24. Replace / Add AddToBack Stack CommitBegin FragmentManager backstack Count = 1 Detail Fragment! Container List Fragment! Remove: ListFragment Add: DetailFragment Replace
  25. 25. Replace / Add AddToBack Stack CommitBegin Detail Fragment! Container Replace FragmentManager backstack Count = 1 Remove: ListFragment Add: DetailFragment
  26. 26. Example - Pressing Back
  27. 27. Detail Fragment! Container FragmentManager backstack Count = 1 Remove: ListFragment Add: DetailFragment Remove: ListFragment Add: DetailFragment OnBackPressed()
  28. 28. Detail Fragment! Container FragmentManager backstack Count = 1 Remove: ListFragment Add: DetailFragment Remove: DetailFragment Add: ListFragment OnBackPressed()
  29. 29. Detail Fragment! Container FragmentManager backstack Count = 0 Remove: DetailFragment Add: ListFragment OnBackPressed() Detail Fragment! Container List Fragment!
  30. 30. Comment MatchDetail Fragment
  31. 31. Comment MatchDetail Fragment Comment Fragment
  32. 32. Comment Next MatchDetail Fragment SignIn Fragment Comment Fragment
  33. 33. Comment Next MatchDetail Fragment SignIn Fragment Comment Fragment
  34. 34. Replace AddToBack Stack CommitBegin FragmentManager backstack Count = 0 A
  35. 35. AddToBack Stack CommitBegin FragmentManager backstack Count = 1 A B REMOVE: A ADD: B Replace
  36. 36. AddToBack Stack CommitBegin FragmentManager backstack Count = 1 B REMOVE: A ADD: B Replace
  37. 37. FragmentManager backstack Count = 2 REMOVE: B ADD: C B C REMOVE: A ADD: B AddToBack Stack CommitBegin Replace
  38. 38. FragmentManager backstack Count = 2 REMOVE: B ADD: C C REMOVE: A ADD: B AddToBack Stack CommitBegin Replace
  39. 39. AddToBack Stack CommitBegin Container C Replace FragmentManager backstack Count = 2 2 :REMOVE: B ADD: C 1: REMOVE: A ADD: B
  40. 40. Container B FragmentManager backstack Count = 1 REMOVE: A ADD: B addTo BackStack CommitBegin ReplaceFragment B
  41. 41. Container C FragmentManager backstack Count = 1 REMOVE: A ADD: B CommitBegin ReplaceFragment C
  42. 42. Container C FragmentManager backstack Count = 1 REMOVE: A ADD: B OnBackPressed() Remove: B(null) Add: A
  43. 43. Container A FragmentManager backstack Count = 0 OnBackPressed()
  44. 44. ContainerFragmentManager backstack Count = 0 OnBackPressed() A C
  45. 45. Lesson #2 BackStack != fragments hierarchy
  46. 46. Solutions? We can implement a backStackChangeListener() We can override onBackPressed() We can avoid the back stack modification, with child Fragments
  47. 47. B A FragmentManager backstack Count = 0 B
  48. 48. B FragmentManager backstack Count = 1 REMOVE: A ADD: B B
  49. 49. B FragmentManager backstack Count = 1 REMOVE: A ADD: B B C
  50. 50. Async Woes Running
  51. 51. Async Woes Running Back Home New Screen Rotates Stopped
  52. 52. Async Woes Running Back Home New Screen Rotates Stopped Stopped Data updateUI()
  53. 53. Async Woes Running Back Home New Screen Rotates Stopped Stopped Data updateUI() IllegalStateException
  54. 54. Lesson #3 Be mindful of making fragment transactions/UI updates from async callbacks
  55. 55. Solutions? Check if the fragment is Added to activity before updating UI Add Flags in tear down lifecycle methods (onPause etc.) Take out Async tasks!
  56. 56. ViewModel Data
  57. 57. Summary Don't get overwhelmed Fragment Lifecycle Don't be afraid to customise the back stack Try to take async tasks outside out fragments
  58. 58. ViewPager
  59. 59. DialogFragment
  60. 60. HeadlessFragment setRetainInstance(true)
  61. 61. Hybrid Web App Existing fragment based architecture(ViewPager,Custom Dialogs) Required Custom backstack Needs to persist throughout application
  62. 62. Solution Put webview in its own fragment Custom replace in activity In which we can show/hide at Will
  63. 63. Fin!
  64. 64. Thank You @DipoAreoye

×