如何正确地扩展CardView？
展开和折叠CardView
42
- Robert Vangor
4
2这是一个带有卡片视图的可扩展列表视图。 - Madhur
难道没有更好的解决方案吗？卡片视图难道不能自动扩展吗？ - Robert Vangor
可以将CardView的高度设置为wrap content，并在标题下方使用TextView。当点击时，使TextView可见，反之亦然。 - Madhur
谢谢，那很好用，但这不是一个好的设计，对吧？ - Robert Vangor
7个回答
36
使用可展开的卡片视图列表
或者
你可以将 cardview 的 height 设置为 wrap content，并在标题下方内嵌一个 textview。当用户点击时，使文本视图可见，再次点击则隐藏。
但这不是一个好的设计吗？
如果你在展开或折叠时添加一些过渡或动画，那么它并不会有什么问题。
如果您想查看一些默认的过渡效果，请在父级布局中写入 android:animateLayoutChanges="true"。
- Madhur
5
父布局是指直接的父布局还是最外层的布局？我问这个问题是因为在我的屏幕上android:animateLayoutChanges="true"没有任何效果。提前感谢！ - hetsgandhi
我已经应用到最外层布局，但没有效果！我该怎么办？ - hetsgandhi
@hetsgandhi，可以让我看一下您的代码吗？只有这样我才能说出可能存在的问题。您可以分享一个Git链接。 - Madhur
不冒犯，但是android:animateLayoutChanges="true"如果我写在最外层的布局中，效果就不会生效。我尝试在直接的最外层布局中写入，这样可以成功！无论如何还是谢谢！ - hetsgandhi
请参考我的答案，它既适用于展开也适用于折叠：https://dev59.com/8FsW5IYBdhLWcg3wCDTF#54156690 - Amos
25
如果您在ListView或RecyclerView中使用CardView，请参考我的答案，了解推荐的实现方式：RecyclerView expand/collapse items
如果您只是使用CardView，则可以在CardView的onClick监听器中执行以下操作：
TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);
默认情况下，将您的detailsView在xml中的可见性设置为GONE。
- Heisenberg
1
1嗨，我尝试了你的解决方案。它在展开方面看起来不错。你会对折叠卡片视图应用什么过渡效果呢？谢谢。 - Androidicus
17
我在卡片视图中使用了一个扩展部分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();
}
- Ray Hunter
6
在设置 visibility GONE/ VISIBLE 之前，只需要添加一行代码即可：
TransitionManager.beginDelayedTransition([the rootView containing the cardView], new AutoTransition());
不需要在XML中使用
animateLayoutChanges=true（这种方式也很简单，但折叠行为不好）。- Amos
0
我最初尝试通过在我的CardView底部添加一个额外的View并将其可见性设置为gone（gone vs invisible）来实现这一点：
tools:visibility="gone"
然后，我将CardView的高度设置为Wrap Content，并添加了一个带有onClick监听器的图标，该监听器将额外视图的可见性更改为visible。
这个问题是，即使可见性设置为gone，我的CardView仍然像额外的视图存在一样行为不当。
为了解决这个问题，在我的onBindViewHolder方法中，我明确地将额外视图的可见性设置为gone：
holder.defPieces.visibility = View.GONE
在此之后，可扩展的功能按照我的预期工作了。我想知道在将视图膨胀以在RecyclerView中显示时是否存在某些奇怪的操作顺序。
- Banjoe
1
问题出在
tools命名空间上。只有在以tools为前缀时，属性的值才会在布局预览中应用。您应该将其更改为android，以使其在应用程序中正常工作。 - solru-5
我找到了解决方案（单个卡片视图可扩展列表视图） 请查看此链接 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);
}
}
});
- Bob Galy
-5
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;
}
};
- user7740865
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接