web-dev-qa-db-fra.com

Développer et réduire CardView

Quelle est la bonne façon d’étendre un CardView?

 example

23
Robert Vangor

Utiliser une vue liste extensible avec cardview

ou même 

Vous pouvez utiliser wrap content comme hauteur de cardview et utiliser textview en dessous du titre, cliquez dessus pour rendre la textview visible et vice-versa.

mais n'est-ce pas un mauvais design?

nope ce n'est pas si vous donnez une transition ou une animation quand il est développé ou s'est effondré

Si vous voulez voir une transition par défaut, écrivez simplement Android: animateLayoutChanges = "true" dans mise en page parent.

22
Madhur

Si vous utilisez CardView dans un ListView ou un RecyclerView, consultez ma réponse pour connaître la méthode recommandée: RecyclerView expand/collapse items

Si vous utilisez simplement CardView, faites-le dans votre onClickListener de cardview:

TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);

Par défaut, conservez la visibilité de votre detailsView dans votre XML.

15
Heisenberg

J'ai utilisé un cardview et une section de développement item_description dans le cardview. Pour la partie développée, j'ai créé un TextView sous la section d'en-tête ( LinearLayout/item_description_layout ) et lorsque l'utilisateur clique sur la disposition de l'en-tête, une méthode de développement/réduction est appelée. Voici le code dans le cardview:

<LinearLayout
  Android:id="@+id/item_description_layout"
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:gravity="center"
  Android:minHeight="48dp"
  Android:paddingStart="16dp"
  Android:paddingEnd="16dp"
  Android:orientation="horizontal">

  <TextView
      Android:id="@+id/item_description_title"
      Android:layout_width="0dp"
      Android:layout_height="match_parent"
      Android:layout_weight="0.9"
      Android:gravity="center_vertical"
      Android:text="@string/description"/>

  <ImageView
      Android:id="@+id/item_description_img"
      Android:layout_width="0dp"
      Android:layout_height="wrap_content"
      Android:layout_weight="0.1"
      Android:layout_gravity="center_vertical|end"
      app:srcCompat="@drawable/ic_expand_more_black_24dp"/>

</LinearLayout>

<TextView
  Android:id="@+id/item_description"
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:paddingStart="16dp"
  Android:paddingEnd="16dp"
  Android:paddingBottom="16dp"
  Android:gravity="center_vertical"
  Android:visibility="gone"
  tools:text="description goes here"/>  

Voici la méthode qui s'appelle. J'ai également ajouté un ObjectAnimator pour gérer l'animation de développement/réduction du bloc. C'est une animation simple qui utilise la longueur du texte de description.

void collapseExpandTextView() {
    if (mItemDescription.getVisibility() == View.GONE) {
        // it's collapsed - expand it
        mItemDescription.setVisibility(View.VISIBLE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_less_black_24dp);
    } else {
        // it's expanded - collapse it
        mItemDescription.setVisibility(View.GONE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_more_black_24dp);
    }

    ObjectAnimator animation = ObjectAnimator.ofInt(mItemDescription, "maxLines", mItemDescription.getMaxLines());
    animation.setDuration(200).start();
} 
11
Ray Hunter

juste une ligne de code avant de définir la visibilité GONE/VISIBLE peut faire:

TransitionManager.beginDelayedTransition([the rootView containing the cardView], new AutoTransition()); 

pas besoin d'utiliser animateLayoutChanges = true en XML (cette façon est aussi simple, mais le comportement de réduction est mauvais)

1
Amos
mView.Click +=(sender, e) =>{
    LinearLayout temp = mView.FindViewById<LinearLayout>(Resource.Id.LinerCart);
    if (vs == false) {
        temp.Visibility = ViewStates.Gone;
        vs = true;
    } else {
        temp.Visibility = ViewStates.Visible;
        vs = false;
    }
};
0
user7740865

J'ai eu la solution (liste unique extensible cardview) vérifiez ce lien http://www.devexchanges.info/2016/08/expandingcollapsing-recyclerview-row_18.html

si vous ajoutez une icône en forme de flèche vers le bas .__, vous utilisez simplement mon code

créer xml 

    <RelativeLayout
                Android:id="@+id/layout_expand"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:paddingTop="10dp"
                Android:paddingBottom="10dp"
                Android:paddingLeft="10dp"
                Android:orientation="vertical">


                <TextView
                    Android:id="@+id/item_description_title"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:background="@color/white"
                    Android:clickable="true"
                    Android:onClick="toggle_contents"
                    Android:padding="10dp"
                    Android:text="Guest Conditions"
                    Android:textColor="@color/hint_txt_color"
                    Android:fontFamily="sans-serif-medium"
                    Android:textStyle="normal"
                    Android:paddingBottom="15dp"
                    Android:textSize="16dp"/>

                 <ImageView
                     Android:layout_alignParentRight="true"
                     Android:paddingTop="4dp"
                     Android:paddingRight="10dp"
                     Android:layout_width="wrap_content"
                     Android:layout_height="wrap_content"
                     Android:src="@drawable/ic_keyboard_arrow_down"/>

                <!--content to hide/show -->
                <TextView
                    Android:id="@+id/item_description"
                    Android:layout_below="@+id/item_description_title"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:background="@color/white"
                    Android:padding="10dp"
                    Android:text="@string/about_txt2"
                    Android:textColor="@color/hint_txt_color"
                    Android:fontFamily="sans-serif-medium"
                    Android:textStyle="normal"
                    Android:paddingBottom="15dp"
                    Android:visibility="gone"
                    Android:textSize="12dp" />

            </RelativeLayout>
        </Android.support.v7.widget.CardView>
    ///////////////////////////////////////////////
    Mainactivity.Java

     RelativeLayout layout_expand = (RelativeLayoutfindViewById(R.id.layout_expand);
     item_description = (TextView) findViewById(R.id.item_description);
     TextView item_description_title; 
    item_description_title = (TextView) findViewById(R.id.item_description_title);
    item_description.setVisibility(View.GONE);
    ///////////////////////////////////////////////////////////////////

            animationUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
            animationDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);

            layout_expand.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(item_description.isShown()){
                        item_description.setVisibility(View.GONE);
                        item_description.startAnimation(animationUp);
                    }
                    else{
                        item_description.setVisibility(View.VISIBLE);
                        item_description.startAnimation(animationDown);
                    }
                }
            });

item_description_title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(item_description.isShown()){
                    item_description.setVisibility(View.GONE);
                    item_description.startAnimation(animationUp);
                }
                else{
                    item_description.setVisibility(View.VISIBLE);
                    item_description.startAnimation(animationDown);
                }
            }
        });
0
Bob Galy