卡片式布局

使用CardView实现卡片式布局，CardView是appcompat-v7库提供的，实际上CardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果，看上去有立体感觉。

效果图：

为了充分利用屏幕，这里使用了RecyclerView来展示。

这里我们要使用Glide来加载图片，所以要先添加一下依赖：

implementation 'com.github.bumptech.glide:glide:3.7.0'

下面就是RecyclerView的具体实现，实现的文件如下：

• MainActivity的布局文件
• layout_fruit_item.xml 每个item的布局
• Fruit类
• FruitAdapter 适配器
• MainActivity

MainActivity的布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

LinearLayout>

layout_fruit_item.xml 每个item的布局:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:elevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/item_img"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/item_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="18sp" />
    LinearLayout>

android.support.v7.widget.CardView>

此处CardView中android:elevation是指定一个高度值，高度值越大，投影范围越大，但是投影效果越淡，反之，高度值越小，投影范围越小，但是投影效果越浓。

Fruit类：

public class Fruit {
    private String name;
    private int imgId;

    public Fruit(String name, int imgId) {
        this.name = name;
        this.imgId = imgId;
    }

    public String getName() {
        return name;
    }

    public int getImgId() {
        return imgId;
    }
}

FruitAdapter 适配器:

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

    public FruitAdapter(List<Fruit> list) {
        fruitList = list;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        private CardView view;
        private ImageView imageView;
        private TextView textView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            view = (CardView) itemView;
            imageView = itemView.findViewById(R.id.item_img);
            textView = itemView.findViewById(R.id.item_txt);
        }
    }


    @NonNull
    @Override
    public FruitAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

        if (mContext == null) {
            mContext = viewGroup.getContext();
        }

        View view = LayoutInflater.from(mContext).inflate(R.layout.layout_fruit_item, viewGroup, false);
        ViewHolder holder = new ViewHolder(view);

        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull FruitAdapter.ViewHolder holder, int i) {
        Fruit fruit = fruitList.get(i);
        holder.textView.setText(fruit.getName());
        // 使用Glide加载图片
        Glide.with(mContext).load(fruit.getImgId()).into(holder.imageView);

    }

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

MainActivity的java部分：

public class MainActivity extends AppCompatActivity {
    private FruitAdapter adapter;
    private List<Fruit> fruitList = new ArrayList<>();
    Fruit fruits[] = {
            new Fruit("苹果", R.drawable.apple),
            new Fruit("香蕉", R.drawable.banana),
            new Fruit("蓝莓", R.drawable.blueberry),
            new Fruit("樱桃", R.drawable.cherry),
            new Fruit("芒果", R.drawable.mango),
            new Fruit("梨子", R.drawable.pear),
            new Fruit("草莓", R.drawable.strawberry),
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化组件
        initViews();

    }

    private void initViews() {
        // 初始化标题栏
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // 初始化RecyclerView
        RecyclerView recyclerView = findViewById(R.id.main_rcy);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(gridLayoutManager);
        initFruitList();
        adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }

    private void initFruitList() {
        fruitList.clear();

        for (int i = 0; i < 50; i++) {
            Random random = new Random();
            // index为[0,fruits.length)区间中的随机数
            int index = random.nextInt(fruits.length);
            fruitList.add(fruits[index]);
        }

    }
    
}

这里要注意一点，此处的图片是我事先准备好并放到drawable目录下的。