卡片布局CardView

CardView用於實現卡片式的布局效果。由appcompat-v7庫提供。CardView其實也是一種FrameLayout。用CardView和RecyclerView實現圖片文字和卡片布局。

用到RecyclerView和CardView控件，就要在閉包中添加一下依賴

    compile 'com.android.support:recyclerview-v7:25.0.0'
    compile 'com.android.support:cardview-v7:25.0.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'

用法：

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

定義一個實體類 Fruit，寫你要顯示在界面的 名字，ID，的setget方法，外加一個帶參構造。

還要為RecyclerView建一個子布局，也就是卡片布局。

CardView作為最外層布局，他只是一個加強版的FrameLayout，並沒有方便的定位方式，在里面在嵌套一個LinearLayout。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_tv_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fruit_tv_name"
            android:layout_gravity="center_horizontal"
            android:layout_margin="6dp"
            android:textSize="16sp"/>
    </LinearLayout>

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

 並且新建一個RecyclerView適配器FruitAdapter， 並且繼承自RecyclerView.Adapter泛型指定為FruitAdapter.ViewHolder

package ca.sd.zsl.toolbartest;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;



public class FruitAdpapter extends RecyclerView.Adapter<FruitAdpapter.ViewHolder> {
    private Context mContext;
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            fruitImage = (ImageView) itemView.findViewById(R.id.fruit_tv_image);
            fruitName = (TextView) itemView.findViewById(R.id.fruit_tv_name);
        }
    }

    public FruitAdpapter(List<Fruit> fruitList){
        mFruitList = fruitList;
    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (mContext == null){
            mContext = parent.getContext();
        }
　　　　　　打氣筒，找到子項布局，並且把對象返回
        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
　　　　　　return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);獲取條目
        holder.fruitName.setText(fruit.getName());在該條目設置文字
　　　　利用Glide加載水果圖片，.with()，傳入一個Context，Activity，Fragment參數，
　　　　調用load()方法去加載圖片，里面可以是URL地址，本地路徑，一個資源ID，最后調用into()，方法將圖片
　　　　然后設置到具體某一個ImageView中。
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

}

主函數

private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdpapter adpapter;

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

//一個初始化顯示數據的方法
initFruits();
找到RecyclerView布局
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
獲取GridLayoutManager 對象，構造函數兩個參數，第一Context，第二個是屏幕顯示幾列
GridLayoutManager layoutManager = new GridLayoutManager(MainActivity.this, 2);
設置布局管理器，實現RecyclerView布局內容的顯示，里面只包含LinearLayoutManager（線性布局管理器），
StaggeredGridLayoutManager（錯列網格布局管理器），GridLayoutManager（網格布局管理器）
recyclerView.setLayoutManager(layoutManager);
獲取適配器實例，並添加到RecyclerView對象中
adpapter = new FruitAdpapter(fruitList);
recyclerView.setAdapter(adpapter);
}