RecyclerView瀑布流布局的实现

80 阅读 0 评论 53 点赞

我是靠谱客的博主优秀鸵鸟，最近开发中收集的这篇文章主要介绍RecyclerView瀑布流布局的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

RecyclerView是继ListView之后更强大的滚动控件,它可以轻松实现横向滚动,而ListView则不能.RecyclerView不仅轻松实现了和ListView同样的效果,还优化了ListView中存在的不足之处... 而且用RecyclerView可以实现瀑布流布局..

 compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:recyclerview-v7:25.3.1'

使用RecyclerView之前需要添加依赖 ,添加完毕之后就可以用了..

创建一个Activity,布局里面放一个单纯的RecyclerView..

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.subang.recyclerviewdemo.MainActivity"
    android:background="#00b2ff">

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

</RelativeLayout>

要用瀑布流来一些图片,接下来在mipmap中放入图片,然后在Valus下面的strings.xml中放入图片名字准备作为图片标记

方便在代码中取出来...

<resources>
    <string name="app_name">RecyclerViewDemo</string>
    <array name="iconsId">
        <item>p1</item>
        <item>p2</item>
        <item>p3</item>
        <item>p4</item>
        <item>p5</item>
        <item>p6</item>
        <item>p7</item>
        <item>p8</item>
        <item>p9</item>
        <item>p10</item>
        <item>p11</item>
        <item>p12</item>
        <item>p13</item>
        <item>p14</item>
        <item>p15</item>
        <item>p16</item>
        <item>p17</item>
        <item>p18</item>
        <item>p19</item>
        <item>p20</item>
        <item>p21</item>
        <item>p22</item>
        <item>p23</item>
        <item>p24</item>
        <item>p25</item>
        <item>p26</item>
        <item>p27</item>
        <item>p28</item>
        <item>p29</item>
        <item>p30</item>
    </array>
    
</resources>

可以看到我将要展示30张图片,p1-p30分别是图片的名字,然后就可以在代码中写了

MainActivity:

package com.example.subang.recyclerviewdemo;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;

import com.example.subang.adapters.RvImageAdapter;

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

public class MainActivity extends AppCompatActivity {
        private RecyclerView recyclerView;
        private List<Integer> imagesId=new ArrayList<>();
        private RvImageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化控件
        initView();
        //数据源(图片)
        initData();
        //适配器
        initRecyclerView();
    }

    private void initRecyclerView() {

        //设置瀑布流进行展示
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(
                       3,StaggeredGridLayoutManager.VERTICAL));
        //设置内部条目的边距(这里是图片的间距)
        recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                outRect.set(10,10,10,10);
            }
            //给每一张图片画一个边框 (为了好看点..)调用onDraw方法
            @Override
            public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
                super.onDraw(c, parent, state);
                Paint paint=new Paint();
                paint.setColor(Color.YELLOW);
                paint.setStrokeWidth(5);
                paint.setAntiAlias(true);
                paint.setStyle(Paint.Style.STROKE);

                for (int i = 0; i < parent.getChildCount(); i++) {
                    View view = parent.getChildAt(i);
                    //绘制图片的边框
                    c.drawRect(view.getLeft()-1,view.getTop()-1,view.getRight()+1,view.getBottom()+1,paint);
                }
            }
        });

        adapter=new RvImageAdapter(this,imagesId);
        recyclerView.setAdapter(adapter);
    }

    private void initData() {
        //将图片的标记取出来 得到一个数组
        String[] icons = getResources().getStringArray(R.array.iconsId);
        for (int i = 0; i < icons.length; i++) {
            //遍历数组的到图片的id
            int id = getResources().getIdentifier(icons[i], "mipmap", getPackageName());
            //添加到图片id集合中 然后将集合作为数据源传给适配器
            imagesId.add(id);
        }
    }

    private void initView() {
        recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
    }
}

可以看到在实现了瀑布流之后,为了美观又调整了图片之间的距离,还给图片加了边框...

接下来就是适配器了:

package com.example.subang.adapters;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.subang.recyclerviewdemo.MainActivity;
import com.example.subang.recyclerviewdemo.R;

import java.util.List;

/**
 * Created by SuBang on 2017/4/27.
 */

public class RvImageAdapter extends RecyclerView.Adapter {
    private Context context;
    private List<Integer> imagesId;

    public RvImageAdapter(Context context, List<Integer> imagesId) {
        this.context = context;
        this.imagesId = imagesId;
    }

    //创建ViewHolder 返回值是一个ViewHolder 因此后面写了一个ViewHolder内部类
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder holder = null;
        View inflate = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        holder = new ImageViewHolder(inflate);
        return holder;
    }

    //绑定数据
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((ImageViewHolder) holder).imageview.setImageResource(imagesId.get(position));
    }

    @Override
    public int getItemCount() {
        return imagesId != null ? imagesId.size() : 0;
    }

    //在这个内部类中实例化ImageView
    private class ImageViewHolder extends RecyclerView.ViewHolder {
        private ImageView imageview;

        public ImageViewHolder(View itemView) {
            super(itemView);
            imageview = (ImageView) itemView.findViewById(R.id.imageview);

        }
    }
}

到这里,一个瀑布流展示图片就结束了..