Android Material Design之在RecyclerView中嵌套CardView实现

前言：

  第一眼就爱上了Android的Material Design风格。以前倒对Android的界面风格不那么喜欢，扁平化的界面设计真是好看。

  其实，这个嵌套操作在实现上并没有什么难点。可是，我还在Eclipse上没有试验成功。后来换到Android Studio上就OK了。以下是实现过程。

笔者开发环境：

系统：Windows 7 旗舰版

IDE：Android Studio v1.0

工具包：cardview-v7-21.0.0.aar

       recyclerview-v7-21.0.0.aar

效果图展示：

  

关键代码：

  主界面展示的MainActivity：

public class MainActivity extends FragmentActivity {

    private int getLayoutResID() {
        return R.layout.activity_main;
    }

    private RecyclerView mRecyclerView = null;

    private String[] dataset = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(getLayoutResID());

        initEvent();
    }

    private void initEvent() {
        initViews();

        initData();

        setViews();
    }

    private void initViews() {
        mRecyclerView = (RecyclerView) findViewById(R.id.activity_main_recyclerView);
    }

    private void initData() {
        // 创建数据集
        dataset = new String[100];
        for (int i = 0; i < dataset.length; i++) {
            dataset[i] = "item " + (i + 1);
        }
    }

    private void setViews() {
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);

        RecyclerViewAdapter adapter = new RecyclerViewAdapter(dataset);
        mRecyclerView.setAdapter(adapter);
    }
}

  List的配置器RecyclerViewAdapter：

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

	// 数据集
	private String[] mDataset;

	public RecyclerViewAdapter(String[] dataset) {
		super();
		mDataset = dataset;
	}

	@Override
	public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
		View view = View.inflate(viewGroup.getContext(), R.layout.recyclerview_item, null);

		// 创建一个ViewHolder
		ViewHolder holder = new ViewHolder(view);

        holder.mTextView = (TextView) view.findViewById(R.id.activity_card_view_label_textview);

		return holder;
	}

	@Override
	public void onBindViewHolder(ViewHolder viewHolder, int i) {
		// 绑定数据到ViewHolder上
		viewHolder.mTextView.setText(mDataset[i]);
	}

	@Override
	public int getItemCount() {
		return mDataset.length;
	}

	public static class ViewHolder extends RecyclerView.ViewHolder {

		public TextView mTextView;

		public ViewHolder(View itemView) {
			super(itemView);
			// mTextView = (TextView) itemView;
		}
	}
}

  主界面布局文件activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_main_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

  RecyclerView的单元item布局recyclerview_item.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        card_view:cardBackgroundColor="#ffFF8C00"
        card_view:cardCornerRadius="4dp" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp" >

            <ImageView
                android:id="@+id/activity_card_view_imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:src="@drawable/notre_dame_de_paris" />

            <TextView
                android:id="@+id/activity_card_view_label_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dip"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:text="@string/show_label" />
        </RelativeLayout>

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

</RelativeLayout>

注意事项：

1.如果可以请使用Android Studio来开发它，我也不知道为什么我的Eclipse在不报错的情况下，为什么运行不了。我也要再摸索一下，后期再补到文章中来。

2.在看到代码和程序运行的效果图来看，可能你会觉得这个跟一个普通的RelativeLayout有什么区别？不过，的确CardView是继承自FrameLayout，它们都是ViewGroup，即其他控件的容器。所以这一点也就不足为奇了。

3.虽然CardView与RelativeLayout都是ViewGroup，有很多类似的东西，也可以把CardView替换成RelativeLayout。不过，CardView还有一些比较优越的属性。elevation(CardView的Z轴阴影)，cardBackgroundColor(CardView的卡片颜色)和cardConerRadius(CardView卡片的四角圆角矩形程度)。

4.elevation：在API21（Android L）等级以上才拥有此属性。只能通过xml中的elevation属性指定；

  cardBackgroundColor：Android2.0以上有效，只能通过xml的cardBackgroundColor属性进行指定；

  cardConerRadius：Android2.0以上有效，单位dimen（dp，px，sp），可以通过xml指定，也可以通过Java代码的setRadius指定。

源码下载：

http://download.csdn.net/detail/u013761665/8959985