如何制作可扩展的卡片视图列表?
how to make an expandable list of cardviews?
我搜索了很多,以找到一个直接和明确的解决方案,我认为这是一个流行的问题,但不幸的是我找不到。
我们想要一个卡片视图列表,以便每张卡片都绑定到特定数据,并且每张卡片内部都有一个列表,显示有关其父项的元数据或详细数据。
所以我们在卡片视图中有一个嵌套列表。
通过简单的搜索,我们知道我们应该使用扩展列表视图,其中父项是卡片视图,我们必须为其子项设置另一个布局。
因此,当您单击卡片时,项目列表会出现在根目录下的卡片下方。
但是我们想在卡片中显示子列表?
并且无法访问诸如子列表 ID 之类的内容或任何其他内容来引用过渡动画和布局更改。
所以明确的问题是如何在卡片视图中添加列表视图?
我使用 table 布局和 table 行来完成我的工作。并且不喜欢使用外部库来解决稳定性和版本问题。
这就是我的意思。
描述我的问题的图片
可以使用ExpandLayout,然后在cardview
中添加。
<com.kyo.expandablelayout.ExpandableLayout
android:id="@+id/expandlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp" >
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/parent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/child"
app:canExpand="true" />
</com.kyo.expandable.ExpandableLayout>
如果你不想使用外部库,你可以像这样扩展你的 CardView:
可扩展 CardView 的布局文件
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cv"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
card_view:cardCornerRadius="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
>
<TextView
android:id="@+id/textView_name"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold" />
<!--My dropdown Button -->
<RelativeLayout
android:id="@+id/button"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="end"
android:layout_alignParentRight="true"
android:gravity="center"
>
<View
android:layout_width="12dp"
android:layout_height="12dp"
android:background="@drawable/triangle"
android:layout_alignParentRight="false"
android:layout_alignParentEnd="false" />
</RelativeLayout>
</RelativeLayout>
<!--The layout below is my ExpandableLayout -->
<LinearLayout
android:id="@+id/expandableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<android.support.v7.widget.AppCompatImageView
android:id="@+id/imageView_Owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<TextView
android:id="@+id/textView_Owner"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView_OwnerUrl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
我的 ExpandableRecyclerAdapter Class
import android.animation.ObjectAnimator;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.SparseBooleanArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.List;
public class ExpandableRecyclerAdapter extends RecyclerView.Adapter<ExpandableRecyclerAdapter.ViewHolder> {
private List<Repo> repos;
private SparseBooleanArray expandState = new SparseBooleanArray();
private Context context;
public ExpandableRecyclerAdapter(List<Repo> repos) {
this.repos = repos;
//set initial expanded state to false
for (int i = 0; i < repos.size(); i++) {
expandState.append(i, false);
}
}
@Override
public ExpandableRecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
this.context = viewGroup.getContext();
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.expandable_card_row, viewGroup, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(final ExpandableRecyclerAdapter.ViewHolder viewHolder, final int i) {
viewHolder.setIsRecyclable(false);
viewHolder.tvName.setText(repos.get(i).getName());
viewHolder.tvOwnerLogin.setText("Owner: " +repos.get(i).getOwner().getLogin());
viewHolder.tvOwnerUrl.setText(repos.get(i).getOwner().getUrl());
Picasso.with(context)
.load(repos.get(i).getOwner().getImageUrl())
.resize(500, 500)
.centerCrop()
.into(viewHolder.ivOwner);
//check if view is expanded
final boolean isExpanded = expandState.get(i);
viewHolder.expandableLayout.setVisibility(isExpanded?View.VISIBLE:View.GONE);
viewHolder.buttonLayout.setRotation(expandState.get(i) ? 180f : 0f);
viewHolder.buttonLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(final View v) {
onClickButton(viewHolder.expandableLayout, viewHolder.buttonLayout, i);
}
});
}
@Override
public int getItemCount() {
return repos.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
private TextView tvName,tvOwnerLogin, tvOwnerUrl;
private ImageView ivOwner;
public RelativeLayout buttonLayout;
public LinearLayout expandableLayout;
public ViewHolder(View view) {
super(view);
tvName = (TextView)view.findViewById(R.id.textView_name);
tvId = (TextView)view.findViewById(R.id.textView_id);
tvUrl = (TextView)view.findViewById(R.id.textView_url);
tvOwnerLogin = (TextView)view.findViewById(R.id.textView_Owner);
tvOwnerUrl = (TextView)view.findViewById(R.id.textView_OwnerUrl);
ivOwner = (ImageView) view.findViewById(R.id.imageView_Owner);
buttonLayout = (RelativeLayout) view.findViewById(R.id.button);
expandableLayout = (LinearLayout) view.findViewById(R.id.expandableLayout);
}
}
private void onClickButton(final LinearLayout expandableLayout, final RelativeLayout buttonLayout, final int i) {
//Simply set View to Gone if not expanded
//Not necessary but I put simple rotation on button layout
if (expandableLayout.getVisibility() == View.VISIBLE){
createRotateAnimator(buttonLayout, 180f, 0f).start();
expandableLayout.setVisibility(View.GONE);
expandState.put(i, false);
}else{
createRotateAnimator(buttonLayout, 0f, 180f).start();
expandableLayout.setVisibility(View.VISIBLE);
expandState.put(i, true);
}
}
//Code to rotate button
private ObjectAnimator createRotateAnimator(final View target, final float from, final float to) {
ObjectAnimator animator = ObjectAnimator.ofFloat(target, "rotation", from, to);
animator.setDuration(300);
animator.setInterpolator(new LinearInterpolator());
return animator;
}
}
在你的 Activity/Fragment 中,像这样设置 RecyclerView
private RecyclerView recyclerView;
private List<Repo> data;
recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(layoutManager);
//fetch data and on ExpandableRecyclerAdapter
recyclerView.setAdapter(new ExpandableRecyclerAdapter(data));
因此,创建一个无需外部库的可扩展 CardView 非常简单。代码几乎与使用带有 RecyclerView 的普通 CardView 完全相同,主要变化是设置视图。GONE/View。按钮单击时可见。
我搜索了很多,以找到一个直接和明确的解决方案,我认为这是一个流行的问题,但不幸的是我找不到。
我们想要一个卡片视图列表,以便每张卡片都绑定到特定数据,并且每张卡片内部都有一个列表,显示有关其父项的元数据或详细数据。
所以我们在卡片视图中有一个嵌套列表。
通过简单的搜索,我们知道我们应该使用扩展列表视图,其中父项是卡片视图,我们必须为其子项设置另一个布局。
因此,当您单击卡片时,项目列表会出现在根目录下的卡片下方。 但是我们想在卡片中显示子列表?
并且无法访问诸如子列表 ID 之类的内容或任何其他内容来引用过渡动画和布局更改。
所以明确的问题是如何在卡片视图中添加列表视图?
我使用 table 布局和 table 行来完成我的工作。并且不喜欢使用外部库来解决稳定性和版本问题。 这就是我的意思。
描述我的问题的图片
可以使用ExpandLayout,然后在cardview
中添加。
<com.kyo.expandablelayout.ExpandableLayout
android:id="@+id/expandlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp" >
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/parent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/child"
app:canExpand="true" />
</com.kyo.expandable.ExpandableLayout>
如果你不想使用外部库,你可以像这样扩展你的 CardView:
可扩展 CardView 的布局文件
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cv"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
card_view:cardCornerRadius="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
>
<TextView
android:id="@+id/textView_name"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold" />
<!--My dropdown Button -->
<RelativeLayout
android:id="@+id/button"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="end"
android:layout_alignParentRight="true"
android:gravity="center"
>
<View
android:layout_width="12dp"
android:layout_height="12dp"
android:background="@drawable/triangle"
android:layout_alignParentRight="false"
android:layout_alignParentEnd="false" />
</RelativeLayout>
</RelativeLayout>
<!--The layout below is my ExpandableLayout -->
<LinearLayout
android:id="@+id/expandableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<android.support.v7.widget.AppCompatImageView
android:id="@+id/imageView_Owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<TextView
android:id="@+id/textView_Owner"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView_OwnerUrl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
我的 ExpandableRecyclerAdapter Class
import android.animation.ObjectAnimator;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.SparseBooleanArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.List;
public class ExpandableRecyclerAdapter extends RecyclerView.Adapter<ExpandableRecyclerAdapter.ViewHolder> {
private List<Repo> repos;
private SparseBooleanArray expandState = new SparseBooleanArray();
private Context context;
public ExpandableRecyclerAdapter(List<Repo> repos) {
this.repos = repos;
//set initial expanded state to false
for (int i = 0; i < repos.size(); i++) {
expandState.append(i, false);
}
}
@Override
public ExpandableRecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
this.context = viewGroup.getContext();
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.expandable_card_row, viewGroup, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(final ExpandableRecyclerAdapter.ViewHolder viewHolder, final int i) {
viewHolder.setIsRecyclable(false);
viewHolder.tvName.setText(repos.get(i).getName());
viewHolder.tvOwnerLogin.setText("Owner: " +repos.get(i).getOwner().getLogin());
viewHolder.tvOwnerUrl.setText(repos.get(i).getOwner().getUrl());
Picasso.with(context)
.load(repos.get(i).getOwner().getImageUrl())
.resize(500, 500)
.centerCrop()
.into(viewHolder.ivOwner);
//check if view is expanded
final boolean isExpanded = expandState.get(i);
viewHolder.expandableLayout.setVisibility(isExpanded?View.VISIBLE:View.GONE);
viewHolder.buttonLayout.setRotation(expandState.get(i) ? 180f : 0f);
viewHolder.buttonLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(final View v) {
onClickButton(viewHolder.expandableLayout, viewHolder.buttonLayout, i);
}
});
}
@Override
public int getItemCount() {
return repos.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
private TextView tvName,tvOwnerLogin, tvOwnerUrl;
private ImageView ivOwner;
public RelativeLayout buttonLayout;
public LinearLayout expandableLayout;
public ViewHolder(View view) {
super(view);
tvName = (TextView)view.findViewById(R.id.textView_name);
tvId = (TextView)view.findViewById(R.id.textView_id);
tvUrl = (TextView)view.findViewById(R.id.textView_url);
tvOwnerLogin = (TextView)view.findViewById(R.id.textView_Owner);
tvOwnerUrl = (TextView)view.findViewById(R.id.textView_OwnerUrl);
ivOwner = (ImageView) view.findViewById(R.id.imageView_Owner);
buttonLayout = (RelativeLayout) view.findViewById(R.id.button);
expandableLayout = (LinearLayout) view.findViewById(R.id.expandableLayout);
}
}
private void onClickButton(final LinearLayout expandableLayout, final RelativeLayout buttonLayout, final int i) {
//Simply set View to Gone if not expanded
//Not necessary but I put simple rotation on button layout
if (expandableLayout.getVisibility() == View.VISIBLE){
createRotateAnimator(buttonLayout, 180f, 0f).start();
expandableLayout.setVisibility(View.GONE);
expandState.put(i, false);
}else{
createRotateAnimator(buttonLayout, 0f, 180f).start();
expandableLayout.setVisibility(View.VISIBLE);
expandState.put(i, true);
}
}
//Code to rotate button
private ObjectAnimator createRotateAnimator(final View target, final float from, final float to) {
ObjectAnimator animator = ObjectAnimator.ofFloat(target, "rotation", from, to);
animator.setDuration(300);
animator.setInterpolator(new LinearInterpolator());
return animator;
}
}
在你的 Activity/Fragment 中,像这样设置 RecyclerView
private RecyclerView recyclerView;
private List<Repo> data;
recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(layoutManager);
//fetch data and on ExpandableRecyclerAdapter
recyclerView.setAdapter(new ExpandableRecyclerAdapter(data));
因此,创建一个无需外部库的可扩展 CardView 非常简单。代码几乎与使用带有 RecyclerView 的普通 CardView 完全相同,主要变化是设置视图。GONE/View。按钮单击时可见。