如何在 Android 上实现 Material Design 展开/折叠列表？

Posted 2023-04-18

【中文标题】如何在 Android 上实现 Material Design 展开/折叠列表？

【英文标题】：How can I implement a Material Design Expand/Collapse List on Android?

【发布时间】：2015-04-07 23:16:13

【问题描述】：

我正在寻找实现这种风格的材料清单。我怎样才能在安卓上做到这一点？我应该看什么课？是否有任何现有的库可以使实现这一点变得容易？

【问题讨论】：

你找到解决方案了吗，你最终使用了什么库？我目前正在使用this one，但正在寻找像您的屏幕截图这样的可折叠项目

【参考方案1】：

是的，您可以使用库SectionedRecyclerViewAdapter 轻松实现它。有一个完整的工作示例here。

基本上你创建一个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();
            
        );
    

然后你用你的部分设置 RecyclerView：

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

【参考方案2】：

我使用这个库实现了这样一个列表：expandable-recycler-view

有一个相关的博客，不过引用的是旧版本：Expand a RecyclerView in Four Steps

它基本上是一个适配器，您可以在其中提供包含子元素的父元素列表。您还必须为父母和孩子指定两个持有人。有关详细信息，请参阅图书馆页面。

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