Làm thế nào tôi có thể thực hiện một thiết kế Vật liệu Mở rộng/Thu Danh sách trên Android?

Question

Tôi đang tìm kiếm thực hiện một danh sách các tài liệu của phong cách này. Làm thế nào tôi có thể làm điều này trên Android? Tôi nên xem những lớp nào? Có bất kỳ thư viện hiện có nào có thể thực hiện việc này dễ dàng không?

Answer 1

tôi thực hiện một danh sách như vậy sử dụng thư viện này:
expandable-recycler-view

Có một blog liên quan, nhưng nó đề cập đến một phiên bản cũ:
Expand a RecyclerView in Four Steps

Đó là cơ bản một bộ chuyển đổi nơi bạn có thể cung cấp danh sách các yếu tố cha mẹ có chứa trẻ em. Bạn tiếp tục phải chỉ định hai người giữ cho cha mẹ và con cái. Xem trang của thư viện để biết thêm chi tiết.

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 
} 

Answer 2

Có, bạn có thể dễ dàng triển khai nó với thư viện SectionedRecyclerViewAdapter. Có một ví dụ làm việc đầy đủ here.

Về cơ bản bạn tạo ra một lớp phần:

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

Sau đó, bạn thiết lập các RecyclerView với các bộ phận của bạn:

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