$30 off During Our Annual Pro Sale. View Details »

ListView vs RecyclerView

ListView vs RecyclerView

If you develop on the Android platform and haven't had a chance to try out the new widgets introduced in Android L Preview this will be a very interesting presentation for you; find out from my experiments how the new RecyclerView stacks up against the view it should replace. If Android is not your game, you will still learn a few things regarding lists on mobile and what Android is like for developers on the platform.

Presented at Codecamp Iasi Autumn 2014

Andrei Diaconu

October 25, 2014
Tweet

More Decks by Andrei Diaconu

Other Decks in Programming

Transcript

  1. Despre mine • Diaconu Andrei • Developer din 2007 •

    Pasionat de tehnologie
  2. Android?

  3. Cine a folosit ListView?

  4. None
  5. None
  6. RecyclerView?

  7. RecyclerView CardView Elevation Activity Transitions Ripple Palette Tint Android Lollipop

  8. None
  9. Runda 1: Layout

  10. ListView RecyclerView

  11. Adaptor RecyclerView ListView

  12. GridView Adaptor RecyclerView

  13. ListView RecyclerView

  14. RecyclerView Adaptor + ViewHolder Layout Manager ListView

  15. None
  16. Runda 2: Item Click

  17. setOnItemClickListener RecyclerView ListView

  18. listview.setOnItemClickListener( onItemClick(list, view, position, id) ) RecyclerView ListView

  19. Click Listener pe fiecare View RecyclerView ListView

  20. Adaptor{ onBindViewHolder(viewHolder, position) { viewHolder.card.setOnClickListener( onClick(view) ); } } RecyclerView

    ListView
  21. Adaptor{ onBindViewHolder(…, final position) { viewHolder.card.setOnClickListener( onClick(view) ); } }

    RecyclerView ListView
  22. Daca sterg un view? RecyclerView ListView

  23. Adaptor{ onBindViewHolder(viewHolder, position) { viewHolder.card.setOnClickListener( onClick(view){ int pos = recycler.getChildPosition(view);

    } ); } } RecyclerView ListView
  24. Adaptor cuplat cu recycler RecyclerView ListView

  25. Adaptor

  26. Adaptor{ onCreateViewHolder(…) { viewHolder.card.setOnClickListener(extern); } } RecyclerView ListView

  27. None
  28. Runda 3: Animatii

  29. Ce trebuie facut? RecyclerView ListView

  30. ValueAnimator RecyclerView ListView

  31. RecyclerView ListView initialHeight = view.getHeight(); ValueAnimator .ofFloat(1,0) .addUpdateListener( onAnimationUpdate(value) {

    view.height = initialHeight * value; view.requestLayout(); }) .start();
  32. RecyclerView ListView initialHeight = view.getHeight(); ValueAnimator .ofFloat(1,0) .addUpdateListener( onAnimationUpdate(value) {

    view.height = initialHeight * value; view.requestLayout(); }) .start();
  33. RecyclerView ListView initialHeight = view.getHeight(); ValueAnimator .ofFloat(1,0) .addUpdateListener( onAnimationUpdate(value) {

    view.height = initialHeight * value; view.requestLayout(); }) .start();
  34. RecyclerView ListView initialHeight = view.getHeight(); ValueAnimator .ofFloat(1,0) .addUpdateListener( onAnimationUpdate(value) {

    view.height = initialHeight * value; view.requestLayout(); }) .start();
  35. Transient State RecyclerView ListView

  36. Notificam adaptorul RecyclerView ListView

  37. Mutare? Adaugare? Animatii multiple? RecyclerView ListView

  38. RecyclerView ListView ItemAnimator

  39. RecyclerView ListView recycler.setItemAnimator( animateRemove(viewHolder) { viewHolder.card .animate() .scaleY(0) .start(); return

    false; } });
  40. RecyclerView ListView recycler.setItemAnimator( animateRemove(viewHolder) { viewHolder.card .animate() .scaleY(0) .start(); return

    false; } });
  41. RecyclerView ListView recycler.setItemAnimator( animateRemove(viewHolder) { viewHolder.card .animate() .scaleY(0) .start(); return

    false; } });
  42. RecyclerView ListView Adaptor mai granulat

  43. RecyclerView ListView Adaugare Mutare Animatii multiple

  44. None
  45. Runda 4: Header

  46. Header Footer

  47. list.addHeaderView RecyclerView ListView

  48. Adaptor special Pentru pozitia 0 returnam header Pentru alte pozitii

    decalam cu 1 RecyclerView ListView
  49. Adaptor special Pentru pozitia 0 returnam header Pentru alte pozitii

    decalam cu 1 RecyclerView ListView
  50. Adaptor special Pentru pozitia 0 returnam header Pentru alte pozitii

    decalam cu 1 RecyclerView ListView
  51. if (p == 0) return header; else return adaptor.get(p-1) RecyclerView

    ListView
  52. None
  53. Runda 5 - Updates

  54. update la telefon RecyclerView ListView

  55. update la sdk RecyclerView ListView

  56. None
  57. None
  58. Cum migram?

  59. Echivalentul ListView RecyclerView recycler = findViewById(); recycler.setLayoutManager( new LinearLayoutManager(VERTICAL, false));

    recycler.setAdapter(new MyAdapter(data));
  60. Echivalentul BaseAdapter MyAdapter { onCreateViewHolder(parent, viewType) { View v =

    inflate layout; ViewHolder vh = new ViewHolder(v); return vh; } onBindViewHolder(viewHolder, position) { DataItem user = data.get(position); viewHolder.text.setText(user.name); } }
  61. • ListView itemClick vs click listener clasic

  62. • ListView headers vs headere proprii