theme - material design android example

¿Cómo puedo implementar una lista Expandir/Contraer de Material Design en Android?

Question

Estoy buscando implementar una lista de materiales de este estilo. ¿Cómo puedo hacer esto en Android? ¿Qué clases debo mirar? ¿Hay bibliotecas existentes que podrían hacer que la implementación sea fácil?

Answer 1

Implementé tal lista usando esta biblioteca:
expandable-recycler-view

Hay un blog relacionado, pero se refiere a una versión antigua:
Expandir un RecyclerView en cuatro pasos

Es básicamente un adaptador donde puede proporcionar una lista de elementos principales que contienen los elementos secundarios. Además, debe especificar dos titulares para los padres y los hijos. Vea la página de la biblioteca para más detalles.

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

Sí, puede implementarlo fácilmente con la biblioteca SectionedRecyclerViewAdapter . Hay un ejemplo completo de trabajo here .

Básicamente creas una clase de secció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();
}
});
}
}

Luego configuras el RecyclerView con tus secciones:

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