RecyclerView实现列表效果和瀑布流效果（RecyclerView强化练习）

一、添加依赖

dependencies {
    compile 'com.android.support:recyclerview-v7:26.1.0'
}

点击右上角Sync Now

不会添加依赖或添加依赖出现错误，请见这篇文章

https://blog.csdn.net/weimeig/article/details/80244059

二、列表效果实现

(一)、为RecyclerView添加填错数据的item

1、  cardElevation:设置阴影的大小

2、  cardBackgroundColor:卡片布局的背景颜色

3、  cardCornerRadius：卡片布局的圆角的大小

4、  conentPadding：卡片布局和内容之间的距离

5、android:clickable="true"

6、android:foreground="?android:attr/selectableItemBackground"设置点击的水波纹效果

7、cardUseCompatPadding:是否设置内边距

item_view.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_gravity="center"

    app:cardBackgroundColor="#eee"
    app:cardCornerRadius="10dp"
    app:contentPadding="10dp"
    app:cardElevation="10dp"
    app:cardUseCompatPadding="true">


    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="地中海"
        android:textSize="20sp"
        android:textColor="#716f80"
        android:layout_gravity="center_horizontal"
        />

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

(二)、创建使用RecyclerView的布局xml

activitity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.administrator.cardvieweaxmple.MainActivity">

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

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

</android.support.constraint.ConstraintLayout>

(三)、创建数据的实体类

CityEntity.java

package com.administrator.cardvieweaxmple;

/**
 * Created by Administrator on 2018/5/12.
 */

public class CityEntity {
    int iconId;
    String name;

    public CityEntity(int iconId, String name) {
        this.iconId = iconId;
        this.name = name;
    }

    public int getIconId() {
        return iconId;
    }

    public void setIconId(int iconId) {
        this.iconId = iconId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

(四)、创建生成模拟数据的工具类

DataUtil.java

package com.administrator.cardvieweaxmple;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2018/5/12.
 * 定义数据源
 */

public class DataUtil {
    public static List<CityEntity> getData(){
        List<CityEntity> cityEntities = new ArrayList<>();
        for(int i = 0 ;i<10;i++){
            CityEntity city = new CityEntity(R.mipmap.ic_launcher,"地中海");
            cityEntities.add(city);
            CityEntity city2 = new CityEntity(R.mipmap.ic_launcher,"日韩线");
            cityEntities.add(city2);
            CityEntity city3 = new CityEntity(R.mipmap.ic_launcher,"旅游热线");
            cityEntities.add(city3);
        }
        return cityEntities;
    }
}

(五)、界面引用处设置RecyclerView的适配器和调用

MainActivity.java

package com.administrator.cardvieweaxmple;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
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 java.util.List;

public class MainActivity extends AppCompatActivity {


    private RecyclerView mRecyclerView;
    private List<CityEntity> cities;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        cities  = DataUtil.getData();
        //设置RecyclerView布局的样式 new LinearLayoutManager()列表 new GridLayoutManager()网格 new StaggeredGridLayoutManager()瀑布流
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        //将适配器设置给控件
        mRecyclerView.setAdapter(new XueXiAdapter());
    }
    class XueXiAdapter extends RecyclerView.Adapter<XueXiViewHolder>{//这里的泛型使用刚才定义的XueXiViewHolder即可实现接收

        @Override
        public XueXiViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_view,null);
            return new XueXiViewHolder(view);
        }

        @Override
         public void onBindViewHolder(XueXiViewHolder holder, int position) {//这里的holder使用刚才定义的XueXiViewHolder即可实现接收
            CityEntity city = cities.get(position);
            holder.mImgIcon.setImageResource(city.getIconId());
            holder.mTvName.setText(city.getName());
        }

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

    class XueXiViewHolder extends RecyclerView.ViewHolder{

        ImageView mImgIcon;
        TextView mTvName;
        public XueXiViewHolder(View itemView) {
            super(itemView);
            mImgIcon = (ImageView)itemView.findViewById(R.id.img_icon);
            mTvName = (TextView)itemView.findViewById(R.id.tv_name);
        }
    }
}

三、瀑布流效果实现

直接在调用的页面，如本Demo中调用的页面MainActivity.java中的onCreate()方法里面增加

mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));//瀑布流 参数1：列数。参数2：方向

即可实现瀑布流效果

但是，这个瀑布流过于规则了，那么，要怎么打乱瀑布流的出现效果实现不规则呢？

创建瀑布流分割方法XueXiItemDecoation()，继承RecyclerView.ItemDecoration();

/**
     * 设置分割线的效果
     */
    class XueXiItemDecoation extends RecyclerView.ItemDecoration{
        int space;
        public XueXiItemDecoation(int space){
            this.space = space;
        }
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);

            /**
             * 设置交错的效果
             */
            //获取子条目View的位置
            if(parent.getChildAdapterPosition(view)%2==0){//如果view是第2条
                outRect.top=50;
            }else{
                outRect.top = space;
            }
            //设置分割线四个方向的距离
//            outRect.top = space;
            outRect.bottom = space;
            outRect.left = space;
            outRect.right = space;
        }
    }

onCreate方法中调用

//添加一个子条目的分割线
        mRecyclerView.addItemDecoration(new XueXiItemDecoation(20));

完整代码如下：MainActivity.java

package com.administrator.cardvieweaxmple;

import android.graphics.Rect;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class MainActivity extends AppCompatActivity {


    private RecyclerView mRecyclerView;
    private List<CityEntity> cities;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        cities  = DataUtil.getData();
        //设置RecyclerView布局的样式 new LinearLayoutManager()列表 new GridLayoutManager()网格 new StaggeredGridLayoutManager()瀑布流
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));//瀑布流 参数1：列数。参数2：方向
        //添加一个子条目的分割线
        mRecyclerView.addItemDecoration(new XueXiItemDecoation(20));
        //将适配器设置给控件
        mRecyclerView.setAdapter(new XueXiAdapter());
    }

    /**
     * 设置分割线的效果
     */
    class XueXiItemDecoation extends RecyclerView.ItemDecoration{
        int space;
        public XueXiItemDecoation(int space){
            this.space = space;
        }
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);

            /**
             * 设置交错的效果
             */
            //获取子条目View的位置
            if(parent.getChildAdapterPosition(view)%2==0){//如果view是第2条
                outRect.top=50;
            }else{
                outRect.top = space;
            }
            //设置分割线四个方向的距离
//            outRect.top = space;
            outRect.bottom = space;
            outRect.left = space;
            outRect.right = space;
        }
    }
    class XueXiAdapter extends RecyclerView.Adapter<XueXiViewHolder>{//这里的泛型使用刚才定义的XueXiViewHolder即可实现接收

        @Override
        public XueXiViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_view,null);
            return new XueXiViewHolder(view);
        }

        @Override
         public void onBindViewHolder(XueXiViewHolder holder, int position) {//这里的holder使用刚才定义的XueXiViewHolder即可实现接收
            CityEntity city = cities.get(position);
            holder.mImgIcon.setImageResource(city.getIconId());
            holder.mTvName.setText(city.getName());
        }

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

    class XueXiViewHolder extends RecyclerView.ViewHolder{

        ImageView mImgIcon;
        TextView mTvName;
        public XueXiViewHolder(View itemView) {
            super(itemView);
            mImgIcon = (ImageView)itemView.findViewById(R.id.img_icon);
            mTvName = (TextView)itemView.findViewById(R.id.tv_name);
        }
    }
}