RecyclerView实现瀑布流效果(二)

在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager。其中StaggeredGridLayoutManager可实现交错式网格布局,正好可以用来实现瀑布流。

下面先看看效果图吧,再贴代码:

其中大部分内容实现其实是和上篇文章是一样的,就不多叙述了,就一个地方不同,就是我们在适配器中绑定ViewHolder的方法中需要重新给我们的itemView布局设置height,我这里是生成随机数来设置高度的,代码实现为:

 private void getRandomHeight(List<String> lists){//得到随机item的高度
        heights = new ArrayList<>();
        for (int i = 0; i < lists.size(); i++) {
            heights.add((int)(200+Math.random()*400));
        }
    }

在onBindViewHolder方法中:

<span style="font-size:14px;"> ViewGroup.LayoutParams params =  holder.itemView.getLayoutParams();//得到item的LayoutParams布局参数
 params.height = heights.get(position);//把随机的高度赋予itemView布局
 holder.itemView.setLayoutParams(params);//把params设置给itemView布局</span>

从而实现瀑布流效果。

贴一下代码吧:

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private List<String> lists;
    private MyRecyclerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        mRecyclerView = (RecyclerView) this.findViewById(R.id.recyclerView);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//        mRecyclerView.addItemDecoration();//设置分割线
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));//设置RecyclerView布局管理器为2列垂直排布
       adapter = new MyRecyclerAdapter(this,lists);
        mRecyclerView.setAdapter(adapter);
        adapter.setOnClickListener(new MyRecyclerAdapter.OnItemClickListener() {
            @Override
            public void ItemClickListener(View view, int postion) {
                Toast.makeText(MainActivity.this,"点击了:"+postion,Toast.LENGTH_SHORT).show();
            }
            @Override
            public void ItemLongClickListener(View view, int postion) {
                //长按删除
                lists.remove(postion);
                adapter.notifyItemRemoved(postion);
            }
        });
    }

    private void initData() {
        lists = new ArrayList();
        for (int i = 0; i < 100; i++) {
            lists.add("" + i);
        }
    }

}

MyRecyclerAdapter.java

public class MyRecyclerAdapter extends RecyclerView.Adapter<MyViewHolder> {
    private List<String> lists;
    private Context context;
    private List<Integer> heights;
    private OnItemClickListener mListener;
    public MyRecyclerAdapter(Context context,List<String> lists) {
        this.context = context;
        this.lists = lists;
        getRandomHeight(this.lists);
    }
    private void getRandomHeight(List<String> lists){//得到随机item的高度
        heights = new ArrayList<>();
        for (int i = 0; i < lists.size(); i++) {
            heights.add((int)(200+Math.random()*400));
        }
    }
    public interface OnItemClickListener{
        void ItemClickListener(View view,int postion);
        void ItemLongClickListener(View view,int postion);
    }
    public void setOnClickListener(OnItemClickListener listener){
        this.mListener = listener;
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item,parent,false);
        MyViewHolder viewHolder = new MyViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, int position) {
        ViewGroup.LayoutParams params =  holder.itemView.getLayoutParams();//得到item的LayoutParams布局参数
        params.height = heights.get(position);//把随机的高度赋予item布局
        holder.itemView.setLayoutParams(params);//把params设置给item布局

        holder.mTv.setText(lists.get(position));//为控件绑定数据
        if(mListener!=null){//如果设置了监听那么它就不为空,然后回调相应的方法
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                int pos = holder.getLayoutPosition();//得到当前点击item的位置pos
                mListener.ItemClickListener(holder.itemView,pos);//把事件交给我们实现的接口那里处理
                }
            });
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    int pos = holder.getLayoutPosition();//得到当前点击item的位置pos
                    mListener.ItemLongClickListener(holder.itemView,pos);//把事件交给我们实现的接口那里处理
                    return true;
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return lists.size();
    }
}
class MyViewHolder extends RecyclerView.ViewHolder{
    TextView mTv;
    public MyViewHolder(View itemView) {
        super(itemView);
        mTv = (TextView) itemView.findViewById(R.id.textView);
    }
}

源码下载地址:http://download.csdn.net/detail/u010687392/8868745

转载请注明出处-http://blog.csdn.net/u010687392

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

时间: 2024-11-10 11:32:58

RecyclerView实现瀑布流效果(二)的相关文章

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

最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程目录结构: 这里要特别强调一点,有人可能不知道去哪里找android-support-v7-recyclerview.jar这个文件,其实它就在你下载的sdk目录下,我的是在D:\Program Files\Android\android-sdk\extras\android\support\v7\

初步使用RecyclerView实现瀑布流

先看效果 关于RecyclerView,真的是很强大. 个人觉得主要方便的地方是 1.直接可以设置条目布局,通过setLayoutManager LinearLayoutManager:线性布局,横向或者纵向滑动列表 GridLayoutManager:表格布局 StaggeredGridLayoutManager:流式布局,例如瀑布流效果 2.可以直接设置分割线       addItemDecoration方法 3.直接设置添加删除item动画   setItemAnimator方法 4.对

【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不

利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)

MainActivity如下: package cc.patience7; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 在原本的的基础上添加了本地缓存DiskLruCache * * 所以在该示例中对于图片的缓存采用了:LruCache + DiskLruCache 的技术 * * 参考

wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示

目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客户端[JDAgent桌面助手]开发详解(二)桌面宠物制作详解 因为前段时候有很多的事情 比较忙,自从上次写完博客之后很久没有更新了. 用WPF制作的京东桌面助手.这个作品是参加比赛的,自己花费了很多心思和时间在里面,最终的作品效果和比赛的结果还是令人满意的. 作品感觉不说很fashion,也足够细致

RecylerView完美实现瀑布流效果

RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行列表,瀑布流式布局. 也分别都具备水平跟垂直方向. 第一步:添加依赖 //noinspection GradleCompatible compile 'com.android.support:cardview-v7:24.0.0-alpha1' //noinspection GradleCompat

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

瀑布流效果的一些收获

瀑布流效果已经流行了很久,之前在项目中做了一次,今天页面改版又做了一次瀑布流的效果,中间又有了一些收获,谨记于此. 这个瀑布流效果是借鉴的网上一位大神写的代码,然后正好在项目中得到了应用. 1 function waterFall(mr, mb) { //mr水平方向的间距,mb垂直方向的间距 2 var ocontainer = document.getElementById("container"); 3 if (ocontainer) { 4 var pageWidth = oc