【安卓筆記】CardView+RecyclerView使用示例

rowandjj發表於2015-03-29
安卓筆記View
CardView+RecycleView可以非常方便的實現一個卡片式列表佈局，之前編寫卡片式佈局非常麻煩(地址：http://blog.csdn.net/chdjj/article/details/41546477)，還得編寫各種資原始檔。

另外，單獨使用RecyclerView我們還得關注ItemDecoration，但是使用CardView就不必管了，因為CardView本身就可以設定陰影。

下面是一個簡單示例。

截圖:


有點難看？自己調一下就ok啦。。這裡只是一個示例。

步驟：
1.新增依賴：
 compile 'com.android.support:cardview-v7:21.0.0'
    compile 'com.android.support:recyclerview-v7:21.0.0'
2.頁面佈局：
<RelativeLayout 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"
                tools:context=".MainActivity">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/main_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            ></android.support.v7.widget.RecyclerView>
</RelativeLayout>
3.item佈局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:orientation="vertical"
              android:background="#ff3cffdd"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:layout_height="match_parent">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardBackgroundColor="#fff"
        card_view:cardElevation="2dp"
        android:layout_marginTop="2dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        >
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <TextView
                android:id="@+id/info_text"
                android:gravity="center"
                android:textColor="#000"
                android:textSize="19sp"
                android:layout_gravity="center"
                tools:text="@string/hello_world"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>
這裡如果你想加CardView的自定義屬性，必須新增其名稱空間：
xmlns:card_view="http://schemas.android.com/apk/res-auto"
4.介面卡：
package com.taobao.recyclerviewwithcardview.ui.adapter;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.taobao.recyclerviewwithcardview.R;
import java.util.List;
/**
 * Created by Rowandjj on 2015/3/25.
 */
public class MainAdapter extends RecyclerView.Adapter<MainAdapter.ViewHolder>
{
    private List<String> mDataSet = null;
    private OnItemClickListener mListener;
    public MainAdapter(List<String> dataSet)
    {
        this.mDataSet = dataSet;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i)
    {
        final View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_main,viewGroup,false);
        itemView.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if(mListener != null)
                    mListener.onItemClick(v, (String) itemView.getTag());
            }
        });
        return new ViewHolder(itemView);
    }
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i)
    {
        String data = mDataSet.get(i);
        viewHolder.bindData(data);
        viewHolder.itemView.setTag(data);
    }
    @Override
    public int getItemCount()
    {
        return mDataSet.size();
    }
    public static class ViewHolder extends RecyclerView.ViewHolder
    {
        private TextView tv;
        public ViewHolder(View itemView)
        {
            super(itemView);
            tv = (TextView) itemView.findViewById(R.id.info_text);
        }
        public void bindData(String s)
        {
            if(s != null)
                tv.setText(s);
        }
    }
    public interface OnItemClickListener
    {
        public void onItemClick(View view,String data);
    }
    public void setOnItemClickListener(OnItemClickListener listener)
    {
        this.mListener = listener;
    }
}

5.資料來源:
package com.taobao.recyclerviewwithcardview.data;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by Rowandjj on 2015/3/24.
 */
public class DataSource
{
    public static final List<String> generateData(int size)
    {
        if (size <= 0)
            return null;
        List<String> datas = new ArrayList<>();
        for (int i = 0; i < size; i++)
        {
            datas.add("這是列表資料"+i);
        }
        return datas;
    }
}
6.主頁面程式碼：
package com.taobao.recyclerviewwithcardview.ui.activity;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;
import com.taobao.recyclerviewwithcardview.R;
import com.taobao.recyclerviewwithcardview.data.DataSource;
import com.taobao.recyclerviewwithcardview.ui.adapter.MainAdapter;
public class MainActivity extends ActionBarActivity
{
    private RecyclerView mRecyclerView;
    private MainAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.main_recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mAdapter = new MainAdapter(DataSource.generateData(20));
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setAdapter(mAdapter);
        mAdapter.setOnItemClickListener(new MainAdapter.OnItemClickListener()
        {
            @Override
            public void onItemClick(View view, String data)
            {
                Toast.makeText(MainActivity.this,"data:"+data,Toast.LENGTH_SHORT).show();
            }
        });
    }
}

程式碼地址：https://github.com/Rowandjj/RecyclerViewWithCardView








相關文章