使用可展开的卡片视图列表
或者
你可以将 cardview 的 height 设置为 wrap content,并在标题下方内嵌一个 textview。当用户点击时,使文本视图可见,再次点击则隐藏。
但这不是一个好的设计吗?
如果你在展开或折叠时添加一些过渡或动画,那么它并不会有什么问题。
如果您想查看一些默认的过渡效果,请在父级布局中写入 android:animateLayoutChanges="true"。
如果您在ListView或RecyclerView中使用CardView,请参考我的答案,了解推荐的实现方式:RecyclerView expand/collapse items
如果您只是使用CardView,则可以在CardView的onClick监听器中执行以下操作:
TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);
默认情况下,将您的detailsView在xml中的可见性设置为GONE。
我在卡片视图中使用了一个扩展部分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();
}
在设置 visibility GONE/ VISIBLE
之前,只需要添加一行代码即可:
TransitionManager.beginDelayedTransition([the rootView containing the cardView], new AutoTransition());
animateLayoutChanges=true
(这种方式也很简单,但折叠行为不好)。我最初尝试通过在我的CardView底部添加一个额外的View并将其可见性设置为gone(gone vs invisible)来实现这一点:
tools:visibility="gone"
然后,我将CardView的高度设置为Wrap Content,并添加了一个带有onClick监听器的图标,该监听器将额外视图的可见性更改为visible。
这个问题是,即使可见性设置为gone,我的CardView仍然像额外的视图存在一样行为不当。
为了解决这个问题,在我的onBindViewHolder方法中,我明确地将额外视图的可见性设置为gone:
holder.defPieces.visibility = View.GONE
在此之后,可扩展的功能按照我的预期工作了。我想知道在将视图膨胀以在RecyclerView中显示时是否存在某些奇怪的操作顺序。
tools
命名空间上。只有在以tools
为前缀时,属性的值才会在布局预览中应用。您应该将其更改为android
,以使其在应用程序中正常工作。 - solru我找到了解决方案(单个卡片视图可扩展列表视图) 请查看此链接 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);
}
}
});
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;
}
};