Android - 构建卡片列表

时间:2016-01-04 23:05:09

标签: android material-design android-cardview

我希望我的应用程序有一个用户可以滚动的卡片列表,单击操作等。具体来说,我想在支持库中使用android.design.CardView类。

据我所知,有关SO的问题,但它并没有解决我的问题。关于这个问题的解决方案我要么说要使用列表并为每个项添加类似卡片的背景,请简要提及CardView(即只提及它们的存在)或依赖第三方库。

我想知道是否有可能只使用核心android API和支持库来在RecyclerView中自行垂直滚动卡片列表。 (但删除任何使它看起来像列表的分隔符或其他东西都在卡片后面)这可能吗?

2 个答案:

答案 0 :(得分:9)

基于你希望有一个CardView的列表....你可以在你的row_layout.xml中定义这样的代码:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        android:background="?android:attr/selectableItemBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="true"
            android:clickable="true"
            android:padding="16dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" €"
                android:id="@+id/textView"
                android:layout_marginLeft = "10dp"
                android:layout_below="@+id/person_name"
                android:layout_toEndOf="@+id/person_age" />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

然后你的布局包含RecyclerView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include android:id="@+id/toolBar" layout="@layout/toolbar_top" app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:id="@+id/swipe"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerList"
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        android:layout_height="wrap_content"/>
    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

和您的适配器CardView可以定义为根元素:

public class Adapter extends RecyclerView.Adapter<Adapter.StockViewHolder>{

    List<Stock> stocks;

    public Adapter(List<Stock> stocks){
        this.stocks = stocks;
    }

    @Override
    public StockViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_layout, parent, false);
        StockViewHolder pvh = new StockViewHolder(v);
        return pvh;
    }

    @Override
    public void onBindViewHolder(StockViewHolder holder, int position) {
        holder.stockName.setText(stocks.get(position).getName());
        holder.stockPrice.setText(stocks.get(position).getPrice());
        Ion.with(holder.stockPhoto).error(R.mipmap.ic_launcher).load(stocks.get(position).getPhotoId());
    }

    @Override
    public int getItemCount() {
        return stocks.size();
    }

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }

    public static class StockViewHolder extends RecyclerView.ViewHolder {
        CardView cv;
        TextView stockName;
        TextView stockPrice;
        ImageView stockPhoto;

        StockViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            stockName = (TextView)itemView.findViewById(R.id.person_name);
            stockPrice = (TextView)itemView.findViewById(R.id.person_age);
            stockPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
    }

}

这将给你这个结果:

enter image description here

这是CardView s。

的实际列表

希望它有所帮助!

答案 1 :(得分:2)

我建议你查看这些链接:

  

https://github.com/Suleiman19/Masonry

     

https://guides.codepath.com/android/using-the-recyclerview

Codepath指南就如何在每个项目上实现onClick提供了一个非常好的示例:

public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ViewHolder> {
    // ...

    // Used to cache the views within the item layout for fast access
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView tvName;
        public TextView tvHometown;
        private Context context;

        public ViewHolder(Context context, View itemView) {
            super(itemView);
            this.tvName = (TextView) itemView.findViewById(R.id.tvName);
            this.tvHometown = (TextView) itemView.findViewById(R.id.tvHometown);
            // Store the context
            this.context = context;
            // Attach a click listener to the entire row view
            itemView.setOnClickListener(this);
        }

        // Handles the row being being clicked
        @Override
        public void onClick(View view) {
            int position = getLayoutPosition(); // gets item position
            User user = users.get(position);
            // We can access the data within the views
            Toast.makeText(context, tvName.getText(), Toast.LENGTH_SHORT).show();
        }
    }

    // ...
}

MasonryRecyclerView CardView StaggeredGrid的更高级使用有关(获得gestureRecognizerShouldBegin(_:))。