展开和折叠 CardView

Question

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

Answer 1

Use an expandable list view with cardview

甚至

You can use wrap content as height of cardview and use textview inside it below title, so on click make the textview visible and vice-versa.

但这不是糟糕的设计吗？

nope it isn't if you give some transition or animation when it's expanded or collapsed

If you want to see some default transition then just write android:animateLayoutChanges="true" in parent layout.

Answer 2

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

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

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

默认情况下，在 xml.

中保持 detailsView 的可见性已消失

Answer 3

我在卡片视图中使用了卡片视图和展开部分 item_description。对于扩展部分，我在 header 部分 (LinearLayout/item_description_layout) 下面创建了一个 TextView，当用户点击 header 布局时，一个 expand/collapse 方法被调用。这是卡片视图中的代码：

<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 来处理块的 expand/collapse 动画。这是一个使用描述文字长度的简单动画。

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

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 5

我找到了解决方案（单卡片视图可扩展列表视图）检查这个 link 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);
                }
            }
        });

Answer 6

设置前的一行代码visibility GONE/ VISIBLE可以做到：

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

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

Answer 7

我最初尝试通过在我的 CardView 底部添加一个额外的视图并将其可见性设置为消失 (gone vs invisible):

tools:visibility="gone"

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

这个问题是，即使可见性设置为消失，我的 CardView 仍然表现得像额外的视图一样。

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

holder.defPieces.visibility = View.GONE

在此之后，可扩展功能按照我想要的方式运行。我想知道在膨胀视图以在 RecyclerView 中显示时是否会发生一些奇怪的操作顺序。

展开和折叠 CardView

Expand and collapse CardView

android

android-cardview