web-dev-qa-db-fra.com

Comment puis-je implémenter une liste de développement / réduction de Material Design sur Android?

Je cherche à mettre en œuvre une liste de matériaux de ce style. Comment puis-je faire cela sur Android? Quelles classes dois-je regarder? Y a-t-il des bibliothèques existantes qui pourraient faciliter la mise en œuvre de cela?

Material Design Expand/Collapse List

androidandroid-layoutandroid-listviewmaterial-design
22
ZakTaccardi

Oui, vous pouvez facilement l'implémenter avec la bibliothèque SectionedRecyclerViewAdapter . Il y a un exemple de travail complet ici .

Fondamentalement, vous créez une classe de section:

class MySection extends StatelessSection {

    String title;
    List<String> list;
    boolean expanded = true; // true if you want it to be displayed expanded initially

    public MySection(String title, List<String> list) {
        // call constructor with layout resources for this Section header, footer and items 
        super(R.layout.section_header, R.layout.section_item);

        this.title = title;
        this.list = list;
    }

    @Override
    public int getContentItemsTotal() {
        return expanded? list.size() : 0;
    }

    @Override
    public RecyclerView.ViewHolder getItemViewHolder(View view) {
        // return a custom instance of ViewHolder for the items of this section
        return new MyItemViewHolder(view);
    }

    @Override
    public void onBindItemViewHolder(RecyclerView.ViewHolder holder, int position) {
        MyItemViewHolder itemHolder = (MyItemViewHolder) holder;

        // bind your view here
        itemHolder.tvItem.setText(list.get(position));
    }

    @Override
    public RecyclerView.ViewHolder getHeaderViewHolder(View view) {
        return new SimpleHeaderViewHolder(view);
    }

    @Override
    public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder) {
        MyHeaderViewHolder headerHolder = (MyHeaderViewHolder) holder;

        // bind your header view here
        headerHolder.tvItem.setText(title);

        // handles the click on the header to toggle the expanded variable
        headerHolder.rootView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                expanded = !expanded;
                headerHolder.imgArrow.setImageResource(
                        expanded ? R.drawable.ic_keyboard_arrow_up_black_18dp : R.drawable.ic_keyboard_arrow_down_black_18dp
                );
                sectionAdapter.notifyDataSetChanged();
            }
        });
    }
}

Ensuite, vous configurez le RecyclerView avec vos sections:

// Create an instance of SectionedRecyclerViewAdapter 
SectionedRecyclerViewAdapter sectionAdapter = new SectionedRecyclerViewAdapter();

// Create your sections with the list of data for each topic
MySection topic1Section = new MySection("Attractions", attractionsList);
MySection topic2Section = new MySection("Dining", diningList);

// Add your Sections to the adapter
sectionAdapter.addSection(topic1Section);
sectionAdapter.addSection(topic2Section);

// Set up your RecyclerView with the SectionedRecyclerViewAdapter
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
recyclerView.setAdapter(sectionAdapter);
6
Gustavo

J'ai implémenté une telle liste en utilisant cette bibliothèque:
vue extensible-recycleur

Il existe un blog connexe, mais il fait référence à une ancienne version:
Développez un RecyclerView en quatre étapes

Il s'agit essentiellement d'un adaptateur où vous pouvez fournir une liste d'éléments parents contenant les enfants. Vous devez en outre spécifier deux titulaires pour les parents et les enfants. Voir la page de la bibliothèque pour plus de détails.

class MyChild {
  // add data
}
class MyParentListItem implements ParentListItem {
  private final List<MyChild> mChildren;

  MyParentListItem(List<MyChild> children) {
    mChildren = children;
    // add other data
  }

  @Override
  public List<MyChild> getChildItemList() {
    return mChildren;
  }

  @Override
  public boolean isInitiallyExpanded() {
    return false;
  }
}

class MyParentViewHolder extends ParentViewHolder {
  MyParentViewHolder(View itemView) {
    super(itemView);
    // get other views with itemView.findViewById(..);
  }
}

class MyChildViewHolder extends ChildViewHolder {
  MyParentViewHolder(View itemView) {
    super(itemView);
    // get other views with itemView.findViewById(..);
  }
}

public class MyExpandableAdapter extends ExpandableRecyclerAdapter<MyParentViewHolder, MyChildViewHolder> {
  private final LayoutInflater mInflater;
  public MyExpandableAdapter(List<MyParentListItem> parentItemList, Context context) {
    super(parentItemList);
    mInflater = LayoutInflater.from(context);
  }

  @Override
  public MyParentViewHolder onCreateParentViewHolder(ViewGroup parentViewGroup) {
    final View itemView = mInflater.inflate(R.layout.parent_layout, parentViewGroup, false);
    return new MyParentViewHolder(itemView);
  }

  @Override
  public MyChildViewHolder onCreateChildViewHolder(ViewGroup childViewGroup) {
    final View itemView = mInflater.inflate(R.layout.child_layout, childViewGroup, false);
    return new MyChildViewHolder(itemView);
  }

  // bind data to holders in the onBind methods
}
1
Pete