Expansion et effondrement de CardView
5 réponses
utilisez une vue de liste extensible avec cardview
ou même
Vous pouvez utiliser wrap contenu comme hauteur de cardview et l'utilisation textview à l'intérieur de celui-ci sous le titre, donc sur le clic Faire le textview visible et vice-versa .
mais n'est-ce pas une mauvaise conception ?
non ce n'est pas si vous donnez un peu de transition ou d'animation quand il est élargi ou s'est effondré
si vous voulez voir une transition par défaut, alors il suffit d'écrire android:animateLayoutChanges=" true " dans layout parent .
si vous utilisez CardViews dans un ListView ou RecyclerView voir ma réponse pour la façon recommandée de le faire: RecyclerView développer/réduire les éléments
si vous utilisez simplement CardView, faites ceci dans votre onClickListener de cardview:
TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);
par défaut gardez la visibilité de votre detailsView pour disparaître dans votre xml.
j'ai utilisé un cardview et une section expand item_description dans le cardview. Pour la partie expand, J'ai créé un TextView sous la section header ( LinearLayout/item_description_layout ) et lorsque l'utilisateur clique sur la disposition header, une méthode expand/collapse 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 aussi ajouté un Objectanimateur pour gérer l'expansion / l'effondrement animation du bloc. Il s'agit d'une simple animation 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();
}
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;
}
};
j'ai eu la solution (simple cardview extensible listview ) suivez ce lien http://www.devexchanges.info/2016/08/expandingcollapsing-recyclerview-row_18.html
si vous ajoutez l'icône flèche vers le bas vous n'avez qu'à utiliser 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);
}
}
});