$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

    View Slide

  2. Android?

    View Slide

  3. Cine a folosit ListView?

    View Slide

  4. View Slide

  5. View Slide

  6. RecyclerView?

    View Slide

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

    View Slide

  8. View Slide

  9. Runda 1: Layout

    View Slide

  10. ListView RecyclerView

    View Slide

  11. Adaptor
    RecyclerView
    ListView

    View Slide

  12. GridView
    Adaptor
    RecyclerView

    View Slide

  13. ListView RecyclerView

    View Slide

  14. RecyclerView
    Adaptor
    +
    ViewHolder
    Layout Manager
    ListView

    View Slide

  15. View Slide

  16. Runda 2: Item Click

    View Slide

  17. setOnItemClickListener
    RecyclerView
    ListView

    View Slide

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

    View Slide

  19. Click Listener pe fiecare View
    RecyclerView
    ListView

    View Slide

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

    View Slide

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

    View Slide

  22. Daca sterg un view?
    RecyclerView
    ListView

    View Slide

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

    View Slide

  24. Adaptor cuplat cu recycler
    RecyclerView
    ListView

    View Slide

  25. Adaptor

    View Slide

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

    View Slide

  27. View Slide

  28. Runda 3: Animatii

    View Slide

  29. Ce trebuie facut?
    RecyclerView
    ListView

    View Slide

  30. ValueAnimator
    RecyclerView
    ListView

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. Transient State
    RecyclerView
    ListView

    View Slide

  36. Notificam adaptorul
    RecyclerView
    ListView

    View Slide

  37. Mutare?
    Adaugare?
    Animatii multiple?
    RecyclerView
    ListView

    View Slide

  38. RecyclerView
    ListView
    ItemAnimator

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. RecyclerView
    ListView
    Adaptor mai granulat

    View Slide

  43. RecyclerView
    ListView
    Adaugare
    Mutare
    Animatii multiple

    View Slide

  44. View Slide

  45. Runda 4: Header

    View Slide

  46. Header
    Footer

    View Slide

  47. list.addHeaderView
    RecyclerView
    ListView

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. View Slide

  53. Runda 5 - Updates

    View Slide

  54. update la telefon
    RecyclerView
    ListView

    View Slide

  55. update la sdk
    RecyclerView
    ListView

    View Slide

  56. View Slide

  57. View Slide

  58. Cum migram?

    View Slide

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

    View Slide

  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);
    }
    }

    View Slide

  61. • ListView itemClick vs click listener clasic

    View Slide

  62. • ListView headers vs headere proprii

    View Slide