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);//设置适配器
    }
}


运行效果:



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xxkalychen/article/details/53676978

RecyclerView实现瀑布流,图片自适应高度

话不多说,先上效果图 对于RecyclerView,相信大家都不陌生了,这个集listView,GridView,瀑布流效果与一身强大控件,渐渐地渗透在每个App.... 还是回到正题,如何让Re...
  • qq_31390699
  • qq_31390699
  • 2016-12-05 15:19:05
  • 4911

RecyclerView彩虹瀑布流实现

目录:     1.瀑布流的应用场景     2.瀑布流布局实现的简单分析     3.实现彩虹瀑布流 1.瀑布流的应用场景        瀑布流的应用在移动开发中还是比较常见的,譬如在一些图...
  • qq_28057577
  • qq_28057577
  • 2017-01-17 01:12:45
  • 1078

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

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

5.使用RecyclerView优雅的实现瀑布流效果

从前我们想实现一个瀑布流效果是很难得,需要自己自定义控件,可以说是很麻烦,而且性能也好优化,但是现在就不一样了,因为RecyclerView到来了,他可以很...
  • renpingqing
  • renpingqing
  • 2017-04-04 13:43:20
  • 1099

RecyclerView 实现横向滚动与瀑布流布局

Recyclerview的使用方式方式与ListView大致相似,关键代码如下: 横向滚动代码段: Recyclerview recyclerview = (Recyclerview)findView...
  • cengdong
  • cengdong
  • 2017-02-27 15:18:01
  • 1138

RecyclerView瀑布流一边空太多,一边挤满了

最近项目开发的时候发现用RecyclerView写的瀑布流,不是按照正常的计算高度排列的,两列瀑布,一列空了很多,另外一列挤满了,找了好久都没找到原因,知道是高度计算问题,可不知道是哪里的原因。后来发...
  • beibeixiao
  • beibeixiao
  • 2016-12-29 10:34:50
  • 674

Recyclerview之瀑布流分割线左右间距均等问题

今天来记录下瀑布流左右分割线均等设置! 在网上看了很多例子,都是什么万能分割线之类的,但是真正用到瀑布流的分割线却会出现不一致的情况。原因: 下面展示一下非瀑布流的item布局情况:上面那种布...
  • qq_33373648
  • qq_33373648
  • 2017-08-25 18:21:44
  • 946

RecyclerView瀑布流,项目解决item跳动,留白,闪烁

最近公司,开发仿快手的短视频音乐APP,其中首页自然需要用到瀑布流,下面说下自己碰到的坑:瀑布流,首先,肯定图片要设置不同的高度,布局中图片自然是用wrap_content,下面说坑:item到处跳动...
  • u012913988
  • u012913988
  • 2017-05-26 18:29:54
  • 3201

RecyclerView实现瀑布流布局

RecyclerView本身提供了三个LayoutManager的实现 LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager...
  • tiankong1206
  • tiankong1206
  • 2015-07-27 18:37:08
  • 46873

RecyclerView实现瀑布流

  • 2015年07月04日 18:19
  • 5.84MB
  • 下载
收藏助手
不良信息举报
您举报文章:RecyclerView瀑布流的简单实现
举报原因:
原因补充:

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