学习Android的新的UI控件Material Design（四）——卡片式布局GardView的使用

功能：实现卡片式布局，主要用于加载图片并合理的显示出来，其中的优化用到了AppBarLayout控件，具体见文章

首先需要导入GardView  + RecyclerView来实现图片加载和显示的功能

1.在库中导入他们的依赖如下：

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

其中activity_main.xml的代码如下：

<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"
    app:layout_scrollFlags="scroll|enterAlways|snap"/>
 
  <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

然后我们这里定义一个实体类用户获取图片的名称和ID的资源，Fruit代码如下：

package com.example.administrator.testtoolbar;

/**
 * Created by Administrator on 2018/4/16/016.
 */

//水果的实体类
public class Fruit {
    private String name;
    private int imageId;

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

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

然后需要定义一个在RecyclerView下的布局，fruit_item.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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="wrap_content"
    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_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

接下来为RecyclerView建立一个适配器，新建一个FruitAdapter类，代码如下：

package com.example.administrator.testtoolbar;

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;

/**
 * Created by Administrator on 2018/4/16/016.
 */

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

    private Context mContext;
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{

        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            cardView = (CardView) view;
            fruitImage = view.findViewById(R.id.fruit_image);
            fruitName = view.findViewById(R.id.fruit_name);
        }
    }

    public FruitAdapter(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(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

}

最后修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Fruit[] fruits = {new Fruit("Apple",R.drawable.apple),
            new Fruit("Banana", R.drawable.banana),
            new Fruit("orange",R.drawable.orange),new Fruit("watermelon",R.drawable.watermelon),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana)
    };

    private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化水果的类
        initFruits();
    }

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
//初始化GridView控件并将数据传入适配器中
GridLayoutManager layoutManager = new GridLayoutManager(this,2);
recyclerView.setLayoutManager(layoutManager);
adapter = new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);//将类的数据添加到列表中

private void initFruits() {
    fruitList.clear();
    for(int i = 0; i < 50; i++){
        Random random = new Random();
        int index = random.nextInt(fruits.length);
        fruitList.add(fruits[index]);
    }
}

最后添加AppBarLayout实现控件布局之间的优化如下

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          >
    <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"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>
      </android.support.design.widget.AppBarLayout>


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