卡片式的布局首先要引入的是jar包：

compile 'com.android.support:cardview-v7:25.3.1'

功能强大的图片加载器

compile 'com.github.bumptech.gide:glide:3.7.0'

使用RecycleView来展示卡片式的图片

1.定义一个水果的实体类
2.为RecyclerView的子项指定一个定义的卡片式布局

<?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">

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

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        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:textSize="16sp"/>

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

使用LineatLayout的原因是CardView是一个Framelayout没有什么方便的定位方式。

3.为RecyclerView准备一个适配器，如新建一个FruitAdapter类，让其继承自RecyclerView.Adapter，并将泛型指定为FruitAdapter.ViewHolder

代码如下：

package website.dengta.drawerlayout;

import android.content.Context;
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 huanghailiang on 2017/9/24.
 */

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 itemView) {
        super(itemView);
        cardView = (CardView) itemView;
        fruitImage = (ImageView) itemView.findViewById(R.id.fruit_image);
        fruitName = (TextView) itemView.findViewById(R.id.fruit_name);

    }
}

@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();
}
}

Glide.with()方法传入Context，在调用load()方法来加载图片，最后调用into()方法键个图片设置到某个IamgeView中即可。

3.修改Activity代码如下

MainActivity.java

initFruits();
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycle_view);
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]);
    }
}

为什么会遮挡住？

原因：ToolsBar和RecyclerView都与是放置在CoordinatorLayout下的，而CoordinatorLayout是一个FrameLayout，因此默认的情况之间都是放置在左上角的，因此发生了遮挡现象。可以通过使用偏移来解决，但是google已经为我们提供了另一种方式。如下所述

使用AppBarLayout解决遮挡问题

AppBarLayout实际上是一个垂直式的LinearLayout，在内部做了很多滚动事件的封装，并应用了一些MaterialDesigne的设计观念。

实现步骤：

1.将ToolBar嵌套到AppBarLayout中
2.给RecyclerView指定一个布局行为。

如何操作Toolbar的显示隐藏？在Toolbar布局中添加

 app:layout_scrollFlags="scroll|enterAlways|snap"

这种方式给人的阅读感觉比较好。

Android开发--卡片式布局CardView/AppBarLayout

使用RecycleView来展示卡片式的图片

使用AppBarLayout解决遮挡问题

猜你喜欢