Wie erstellt man eine erweiterbare Liste von Kartenansichten?

Question

Ich habe viel gesucht, um eine direkte und klare Lösung zu finden, denn ich denke, ein beliebtes Problem, aber leider konnte ich es nicht finden.

Wir möchten eine Liste von Kartenansichten haben, so dass jede Karte an bestimmte Daten gebunden ist und jede Karte eine Liste enthält, die Meta- oder Detaildaten über ihre Eltern anzeigt.

Also haben wir eine verschachtelte Liste in einem Cardview.

Mit einer einfachen Suche wissen wir, dass wir erweiterte Listenansicht verwenden sollten, welche Eltern Artikel Kartenansichten sind und wir müssen ein anderes Layout für sein Kind haben.

Also, wenn Sie auf Karten klicken, erscheint eine Liste von Elementen unterhalb Ihrer Karten auf der Wurzel. Aber wir wollen Kinderliste innerhalb von Karten zeigen?

Und es gibt keinen Zugriff auf die so etwas wie Child List ID oder andere Dinge auf eine Übergangsanimation und Änderung des Layouts beziehen.

Also die klare Frage ist, wie Sie eine Listview in einem Cardview hinzufügen?

ich folge meiner Arbeit mit Tabellayout und Tabellenzeile. und bevorzugen, keine externen Bibliotheken für Stabilität und Versionsprobleme zu verwenden. das ist was ich meine.

Bild, das meine Frage beschreiben

Answer 1

Sie benötigen ein Expanded RecyclerView

Schritte:

1. Fügen Sie diese Abhängigkeiten

   compile 'com.android.support:recyclerview-v7:22.2.0' compile 'com.bignerdranch.android:expandablerecyclerview:1.0.3'

2. erstellen 2 Layouts mit Ihren CardViews für die RecyclerView Listenelemente (Parent Layout + Kind Layout)

3. zwei Viewholders erstellen für die jeweiligen Layouts

   public class ParentViewHolder extends ParentViewHolder { 
   
   public TextView mCrimeTitleTextView; 
   public ImageButton mParentDropDownArrow; 
   
   public CrimeParentViewHolder(View itemView) { 
   super(itemView); 
   
   mCrimeTitleTextView = (TextView)itemView.findViewById(R.id.parent_list_item_crime_title_text_view); 
   mParentDropDownArrow = (ImageButton) itemView.findViewById(R.id.parent_list_item_expand_arrow); 
   } 
   } 
   

   Das Gleiche gilt für die ChildViewHolder

4. Machen Sie Getter und Setter für Ihr Kind Layout und Eltern Layout

   Eltern-Layout

   public class ParentLayout implements ParentObject { 
   
   /* Create an instance variable for your list of children */ 
   private List<Object> mChildrenList; 
   
   /** 
   * Your constructor and any other accessor 
   * methods should go here. 
   */ 
   
   @Override 
   public List<Object> getChildObjectList() { 
       return mChildrenList; 
   } 
   
   @Override 
   public void setChildObjectList(List<Object> list) { 
       mChildrenList = list; 
   } 
   

   }

   Kind-Layout

   public class ChildLayout { 
   
   private Date mDate; 
   private boolean mSolved; 
   
   public CrimeChild(Date date, boolean solved) { 
       mDate = date; 
       mSolved = solved; 
   } 
   
   /** 
   * Getter and setter methods 
   */ 
   } 
   

5. Erstellen Sie Ihren RecyclerView Adapter mit den beiden ViewHolders als Parameter

6. aufpumpen sowohl die Ansicht in Ihrem onCreateChi ldViewHolder()

   View view = mInflater.inflate(R.layout.list_item_parent_layout, viewGroup, false); 
   return new ParentViewHolder(view); 
   

7. Sie zwei onBindViewHolder Methoden erhalten werden, können Sie Ihre Ansichten von der jeweiligen Layout-Zugriff gibt

8. Während auf Ihre RecyclerView Hinzufügen von Daten, können Sie die mChildList mit Objekten von ChildLayout verwenden können.

Folgen Sie diesem Tutorial detaillierter tutorial.

Answer 2

Sie können ExpandLayout verwenden und dann in cardview hinzufügen.

<com.kyo.expandablelayout.ExpandableLayout 
     android:id="@+id/expandlayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="12dp" > 

     <ImageView 
      android:id="@+id/imageview" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:contentDescription="@null" 
      android:scaleType="centerCrop" 
      android:src="@drawable/parent" /> 

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="6dp" 
      android:contentDescription="@null" 
      android:scaleType="centerCrop" 
      android:src="@drawable/child" 
      app:canExpand="true" /> 
    </com.kyo.expandable.ExpandableLayout> 

Answer 3

Wenn Sie eine externe Bibliothek nicht verwenden möchten, können Sie Ihre CardView wie diese erweitern machen:

Layout-Datei für eine erweiterbare CardView

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
xmlns:card_view="http://schemas.android.com/apk/res-auto" 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:id="@+id/cv" 
android:layout_marginTop="5dp" 
android:layout_marginLeft="5dp" 
android:layout_marginRight="5dp" 
card_view:cardCornerRadius="5dp"> 


<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="10dp" 
    android:orientation="vertical"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="48dp" 
     > 

     <TextView 
      android:id="@+id/textView_name" 
      android:layout_marginTop="10dp" 
      android:layout_marginBottom="10dp" 
      android:textSize="18sp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textStyle="bold" /> 

     <!--My dropdown Button --> 
     <RelativeLayout 
      android:id="@+id/button" 
      android:layout_width="48dp" 
      android:layout_height="48dp" 
      android:layout_gravity="end" 
      android:layout_alignParentRight="true" 
      android:gravity="center" 
      > 

      <View 
       android:layout_width="12dp" 
       android:layout_height="12dp" 
       android:background="@drawable/triangle" 
       android:layout_alignParentRight="false" 
       android:layout_alignParentEnd="false" /> 
     </RelativeLayout> 
    </RelativeLayout> 
    <!--The layout below is my ExpandableLayout --> 
    <LinearLayout 
     android:id="@+id/expandableLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     > 

     <android.support.v7.widget.AppCompatImageView 
      android:id="@+id/imageView_Owner" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="5dp" 
      android:orientation="vertical"> 

      <TextView 
       android:id="@+id/textView_Owner" 
       android:textSize="16sp" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
      <TextView 
       android:id="@+id/textView_OwnerUrl" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 


     </LinearLayout> 

    </LinearLayout> 

</LinearLayout> 

Meine ExpandableRecyclerAdapter Klasse

import android.animation.ObjectAnimator; 
import android.content.Context; 
import android.support.v7.widget.RecyclerView; 
import android.util.SparseBooleanArray; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.animation.LinearInterpolator; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 

import com.squareup.picasso.Picasso; 
import java.util.List; 


public class ExpandableRecyclerAdapter extends RecyclerView.Adapter<ExpandableRecyclerAdapter.ViewHolder> { 

private List<Repo> repos; 
private SparseBooleanArray expandState = new SparseBooleanArray(); 
private Context context; 

public ExpandableRecyclerAdapter(List<Repo> repos) { 
    this.repos = repos; 
    //set initial expanded state to false 
    for (int i = 0; i < repos.size(); i++) { 
     expandState.append(i, false); 
    } 
} 

@Override 
public ExpandableRecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { 
    this.context = viewGroup.getContext(); 
    View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.expandable_card_row, viewGroup, false); 
    return new ViewHolder(view); 
} 

@Override 
public void onBindViewHolder(final ExpandableRecyclerAdapter.ViewHolder viewHolder, final int i) { 

    viewHolder.setIsRecyclable(false); 

    viewHolder.tvName.setText(repos.get(i).getName()); 

    viewHolder.tvOwnerLogin.setText("Owner: " +repos.get(i).getOwner().getLogin()); 
    viewHolder.tvOwnerUrl.setText(repos.get(i).getOwner().getUrl()); 

    Picasso.with(context) 
      .load(repos.get(i).getOwner().getImageUrl()) 
      .resize(500, 500) 
      .centerCrop() 
      .into(viewHolder.ivOwner); 

    //check if view is expanded 
    final boolean isExpanded = expandState.get(i); 
    viewHolder.expandableLayout.setVisibility(isExpanded?View.VISIBLE:View.GONE); 

    viewHolder.buttonLayout.setRotation(expandState.get(i) ? 180f : 0f); 
    viewHolder.buttonLayout.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(final View v) { 
      onClickButton(viewHolder.expandableLayout, viewHolder.buttonLayout, i); 
     } 
    }); 
} 

@Override 
public int getItemCount() { 
    return repos.size(); 
} 

public class ViewHolder extends RecyclerView.ViewHolder{ 

    private TextView tvName,tvOwnerLogin, tvOwnerUrl; 
    private ImageView ivOwner; 
    public RelativeLayout buttonLayout; 
    public LinearLayout expandableLayout; 

    public ViewHolder(View view) { 
     super(view); 

     tvName = (TextView)view.findViewById(R.id.textView_name); 
     tvId = (TextView)view.findViewById(R.id.textView_id); 
     tvUrl = (TextView)view.findViewById(R.id.textView_url); 
     tvOwnerLogin = (TextView)view.findViewById(R.id.textView_Owner); 
     tvOwnerUrl = (TextView)view.findViewById(R.id.textView_OwnerUrl); 
     ivOwner = (ImageView) view.findViewById(R.id.imageView_Owner); 

     buttonLayout = (RelativeLayout) view.findViewById(R.id.button); 
     expandableLayout = (LinearLayout) view.findViewById(R.id.expandableLayout); 
    } 
} 

private void onClickButton(final LinearLayout expandableLayout, final RelativeLayout buttonLayout, final int i) { 

    //Simply set View to Gone if not expanded 
    //Not necessary but I put simple rotation on button layout 
    if (expandableLayout.getVisibility() == View.VISIBLE){ 
     createRotateAnimator(buttonLayout, 180f, 0f).start(); 
     expandableLayout.setVisibility(View.GONE); 
     expandState.put(i, false); 
    }else{ 
     createRotateAnimator(buttonLayout, 0f, 180f).start(); 
     expandableLayout.setVisibility(View.VISIBLE); 
     expandState.put(i, true); 
    } 
} 

//Code to rotate button 
private ObjectAnimator createRotateAnimator(final View target, final float from, final float to) { 
    ObjectAnimator animator = ObjectAnimator.ofFloat(target, "rotation", from, to); 
    animator.setDuration(300); 
    animator.setInterpolator(new LinearInterpolator()); 
    return animator; 
} 
} 

In Ihrer Aktivität/Fragment, aufgebaut RecyclerView wie diese

private RecyclerView recyclerView; 
private List<Repo> data; 

recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view); 
recyclerView.setHasFixedSize(true); 
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext()); 
recyclerView.setLayoutManager(layoutManager); 
//fetch data and on ExpandableRecyclerAdapter 
recyclerView.setAdapter(new ExpandableRecyclerAdapter(data)); 

seine Also, ganz einfach eine erweiterbare CardView ohne externe Bibliothek zu erstellen. Der Code ist fast identisch mit einem normalen CardView mit RecyclerView, die Hauptänderung besteht darin, den View.GONE/View.VISIBLE-Button beim Anklicken zu setzen.