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

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