RecyclerView瀑布流布局的实现

来源：互联网发布：闪电战2mac版无限子弹编辑：程序博客网时间：2024/04/28 03:51

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

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

0 0