展开和折叠 CardView

Question

扩展 CardView 的正确方法是什么？

Answer 1

在卡片视图中使用可展开的列表视图

甚至

您可以使用 wrap content 作为 cardview 的 height 并使用 textview 在标题下方，所以点击使 textview 可见 反之亦然。

但这不是糟糕的设计吗？

不，如果您在展开时提供一些过渡或动画，则不是 或折叠

如果你想看到一些默认的过渡，那么只需在 parent layout 中写 android:animateLayoutChanges="true"。

Answer 2

如果您在 ListView 或 RecyclerView 中使用 CardViews，请参阅我的回答以了解推荐的操作方式： RecyclerView expand/collapse items

如果您只是使用 CardView，请在 cardview 的 onClickListener 上执行此操作：

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

默认情况下，将您的 detailsView 的可见性保留在您的 xml 中。

Answer 3

我在卡片视图中使用了卡片视图和展开部分item_description。对于展开部分，我在标题部分 (LinearLayout/item_description_layout) 下方创建了一个 TextView，当用户单击标题布局时，将调用展开/折叠方法。这是卡片视图中的代码：

<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"/>  

这里是被调用的方法。我还添加了一个 ObjectAnimator 来处理块的展开/折叠动画。这是一个使用描述文本长度的简单动画。

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

Answer 4

设置visibility GONE/ VISIBLE之前只需一行代码即可：

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

不需要在XML中使用animateLayoutChanges=true（这种方式也很简单，但是折叠行为不好）

Answer 5

我最初尝试通过在 CardView 底部添加一个额外的 View 并将其可见性设置为消失 (gone vs invisible) 来做到这一点：

tools:visibility="gone"

然后，我将 CardView 的高度设置为 Wrap Content，并添加了一个带有 onClickListener 的图标，该图标将额外 View 的可见性更改为 visible。

问题在于，即使可见性设置为消失，我的 CardView 仍然表现得像有额外的 View。

为了解决这个问题，我在我的 onBindViewHolder 方法中明确设置了额外视图的可见性：

holder.defPieces.visibility = View.GONE

在此之后，可扩展功能按我的意愿工作。我想知道在将 View 膨胀以显示在 RecyclerView 中时是否会发生一些奇怪的操作顺序。

Answer 6

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

Answer 7

我得到了解决方案（单卡视图可扩展列表视图） 检查这个链接 http://www.devexchanges.info/2016/08/expandingcollapsing-recyclerview-row_18.html

如果您添加向下箭头图标 你就用我的代码

创建 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);
                }
            }
        });