欢迎来到唯美的网站 > RecyclerView实现列表效果和瀑布流效果（RecyclerView强化练习）

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

2018-01-06

Android

原CSDN博客已弃用，文章会逐渐迁移过来。

一、添加依赖

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