RecyclerView瀑布流的简单实现

原创 2016年12月15日 21:38:03

首先建立布局。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.devin.recylerviewstaggereddemo.MainActivity">

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

列表项的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:id="@+id/img_container"
    android:layout_width="wrap_content"
    android:scaleType="fitXY"
    android:layout_height="wrap_content" />
</LinearLayout>
可以加边框,Android5.0以上可以用CardView.这里只是简单实现。

下来是ViewHolder.java

public class ImageViewHolder extends RecyclerView.ViewHolder {
    private Context context;
    private ImageView imgContainer;
    private int item;

    private int scnWidth;//屏幕的宽

    public ImageViewHolder(Context context, View itemView) {
        super(itemView);
        this.context = context;
        imgContainer = (ImageView) itemView.findViewById(R.id.img_container);
        //获取屏幕宽度
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(metrics);
        scnWidth = metrics.widthPixels;
        //设置参数
        ViewGroup.LayoutParams params = imgContainer.getLayoutParams();
        params.width = scnWidth / 3;//设置三列显示
        params.height = 240 + new Random().nextInt(360);//高度随机,240到600之间
        imgContainer.setLayoutParams(params);
        imgContainer.setPadding(3, 3, 3, 3);//设置图片边距
    }

    /**
     * 设置数据项
     *
     * @param item
     */
    public void setItem(int item) {
        this.item = item;
    }

    /**
     * 设置数据
     */
    public void refreshView() {
        Glide.with(context).load(item).crossFade().into(imgContainer);
    }
}

Adapter.java

public class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder> {
    private Context context;
    private int[] imagePaths;

    public ImageAdapter(int[] imagePaths) {
        this.imagePaths = imagePaths;
    }

    @Override
    public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        context=parent.getContext();
        View view = LayoutInflater.from(context).inflate(R.layout.item_image_1, null);
        return new ImageViewHolder(context,view);
    }

    @Override
    public void onBindViewHolder(ImageViewHolder holder, int position) {
        holder.setItem(imagePaths[position]);
        holder.refreshView();
    }

    @Override
    public int getItemCount() {
        return imagePaths.length;
    }
}

最后是Activity.java

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    //图片数据源资源ID,glide框架可以直接加载
    private int[] RES_IMAGES_ID = {R.drawable.img_builder_001,
            R.drawable.img_builder_002,
            R.drawable.img_builder_003,
            R.drawable.img_builder_004,
            R.drawable.img_builder_005,
            R.drawable.img_builder_006,
            R.drawable.img_builder_007,
            R.drawable.img_builder_008,
            R.drawable.img_builder_009,
            R.drawable.img_builder_010,
            R.drawable.img_builder_011,
            R.drawable.img_builder_012,
            R.drawable.img_builder_013,
            R.drawable.img_builder_014,
            R.drawable.img_builder_015,
            R.drawable.img_builder_016,
            R.drawable.img_builder_017,
            R.drawable.img_builder_018,
            R.drawable.img_builder_019,
            R.drawable.img_builder_020};

    private ImageAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**
     * 初始化
     */
    private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.rv_container);
        //设置瀑布流布局管理器,
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
        recyclerView.setPadding(1,1,1,1);//设置边距,这是整个控件的边距
        recyclerView.setHasFixedSize(true);//保持固定大小
        adapter=new ImageAdapter(RES_IMAGES_ID);//创建适配器
        recyclerView.setAdapter(adapter);//设置适配器
    }
}


运行效果:



版权声明:本文为博主原创文章,未经博主允许不得转载。

[置顶] RecyclerView实现瀑布流,图片自适应高度

[置顶] RecyclerView实现瀑布流,图片自适应高度 标签: 瀑布流 AndroidStaggered 2016-12-05 15:19 974人阅读 评论(0) 收藏 举报 ...
  • w690333243
  • w690333243
  • 2017年07月05日 15:43
  • 414

【Android-RecyclerView】瀑布流实现

Android 5.0 开始引入了 RecyclerView。 RecyclerView组件 是一个实现列表的组件,可以实现原来的 ListView, GridView,性能更好。 Recycle...
  • louis_scl
  • louis_scl
  • 2015年02月27日 11:20
  • 1542

RecyclerView实现瀑布流布局

RecyclerView本身提供了三个LayoutManager的实现 LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager...
  • tiankong1206
  • tiankong1206
  • 2015年07月27日 18:37
  • 44720

RecyclerView实现瀑布流效果(图文详解+源码奉送)

最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果。先来一张效果图:看看怎么实现吧: 整体工程目...
  • u012702547
  • u012702547
  • 2015年08月29日 13:02
  • 3366

RecyclerView的简单使用以及实现瀑布流效果

RecyclerView 简介 RecyclerView是support.v7包中的控件,可以认为是ListView和GridView的增强版,RecyclerView提供了一个耦合度更低的方...
  • Good__Man
  • Good__Man
  • 2017年03月21日 19:59
  • 1225

RecyclerView自定义LayoutManager实现横向瀑布流

最近由于公司项目需要,做了一个横向瀑布流的组件,如下图;这个组件是通过自定义LayoutManager实现,LayoutManager为我们提供了强大的自定义功能,但是实现过程却不简单,捣鼓了两天,也...
  • super_spy
  • super_spy
  • 2016年12月19日 17:38
  • 2062

Android控件RecyclerView实现横向滑动、瀑布流。

Android控件RecyclerView实现横向滑动、瀑布流。
  • qq_26239671
  • qq_26239671
  • 2017年01月09日 22:18
  • 2919

手把手教你做开源项目MyMeiZi 二(使用RecyclerView+Glide打造瀑布流)

Glide 一个专注于平滑滚动的图片加载和缓存库,相信大家也不会陌生,话说我以前一直使用的是Fresco,这次也是为了学习使用了Glide,谁上谁下这个不好区分,但是Glide更轻量级,究竟选择哪...
  • u014163726
  • u014163726
  • 2016年02月27日 11:30
  • 4227

Android Recyclerview 简单实用 瀑布流等方式,并加入上下拉加载

RecyclerView 已经出现有一年多了,看过的和没看过的都需要了解一下。 据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView、Gri...
  • u013151336
  • u013151336
  • 2016年08月09日 12:45
  • 908

万能的recyclerview分割线(线性,表格,瀑布流)

DividerItemDecoration : package com.zaxxkj.utils.rv; import android.content.Context; import androi...
  • duoluo9
  • duoluo9
  • 2017年01月12日 15:00
  • 1760
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RecyclerView瀑布流的简单实现
举报原因:
原因补充:

(最多只允许输入30个字)