使用RecyclerView实现瀑布流的效果

主函数:

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private List<String> dataList  = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //找到控件
       recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        //初始化数据
        initData();
        //设置瀑布流的布局方式,参数一:3列 参数二:垂直方向
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
        //为recyclerView设置布局管理器
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        //创建适配器
        final MyRecyclerViewAdapter myRecyclerViewAdapter =new MyRecyclerViewAdapter(this,dataList);
        //设置适配器
        recyclerView.setAdapter(myRecyclerViewAdapter);
    //自定义监听
        myRecyclerViewAdapter.setOnItemCickListener(new MyRecyclerViewAdapter.MyOnItemClickListener() {
            @Override
            public void myOnItemClickListener(int position, View view) {
                Toast.makeText(MainActivity.this, "点击了第"+position+"条", Toast.LENGTH_SHORT).show();
                myRecyclerViewAdapter.deleteData(position);
            }
        });
        myRecyclerViewAdapter.setOnLongCickListener(new MyRecyclerViewAdapter.MyOnLongClickListener() {
            @Override
            public void myOnLongClickListener(int position, View view) {
                myRecyclerViewAdapter.addData(position,"我是新来的");
            }
        });
    }

    private void initData() {
        for (int i = 0; i < 30; i++) {
            dataList.add(i+"");
        }
    }
}

MyRecycleViewAdapter:

package fanggao.qf.recyclerstaggredgridview01;

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.TextView;

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

/**
 * Created by Administrator on 2016/9/28.
 */
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
    private Context context;
    private List<String> dataList ;
    private int random;
    private List<Integer>heightList = new ArrayList<Integer>();
    private MyOnItemClickListener myOnItemClcikListener;
    private MyOnLongClickListener myOnLongClickListener;

    public MyRecyclerViewAdapter(Context context, List<String> dataList) {
        this.context = context;
        this.dataList = dataList;
        //初始化高度
        if(dataList != null&&dataList.size() != 0){
            for (int i = 0; i < dataList.size(); i++) {
                random = new Random().nextInt(200)+100;//[100,300)
                heightList.add(random);
            }
        }
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //加载布局
        View inflate = LayoutInflater.from(context).inflate(R.layout.recyclerview_item, parent,false);
        //将布局传入viewholder并返回给onBindViewHolder
        return new MyViewHolder(inflate);
    }

    /**
     * 该方法类似与listview中的getView方法,每次加载视图的时候都会调用,但是这里给了每个item随机的高度,因此当屏幕复用时,
     * 会不断复用不同的高度,当屏幕滑到顶部时,会因为高度不等产生大片空白,然后回到初始状态,因此,需要给每个item记录高度,
     * 将其存到集合,每次调用该item时,设置高度
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(final MyViewHolder holder, int position) {
        holder.text.setText(dataList.get(position));
        //设置高度
        int height = heightList.get(position);
        //得到控件的高度
        ViewGroup.LayoutParams layoutParams = holder.text.getLayoutParams();
        //设置高度
        layoutParams.height = height;
        //设置点击事件
        if(myOnItemClcikListener != null && !holder.text.hasOnClickListeners()){
            holder.text.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //回调方法,,将view控件和索引传回,索引必须是布局在父布局中的索引,否则索引错乱最终报错
                    myOnItemClcikListener.myOnItemClickListener(holder.getLayoutPosition(),v);
                }
            });
        }
        if(myOnLongClickListener != null ){
            holder.text.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    myOnLongClickListener.myOnLongClickListener(holder.getLayoutPosition(),v);
                    return true;
                }
            });
        }

    }
    @Override
    public int getItemCount() {
        return dataList.size();
    }

    public void deleteData(int position) {
        //使用notifyItemInserted/notifyItemRemoved会有动画效果
        // 而使用notifyDataSetChanged()则没有
        heightList.remove(position);
        dataList.remove(position);
        notifyItemRemoved(position);
    }
    public void addData(int position,String str){
        dataList.add(position,str);
        int random = new Random().nextInt(200)+100;
        heightList.add(position,random);
        notifyItemInserted(position);
    }

    //注意:该类是公共的,不然适配器设置设置泛型失败
  public class MyViewHolder extends RecyclerView.ViewHolder{
        private TextView text;
        public MyViewHolder(View itemView) {
            super(itemView);
            text = (TextView) itemView.findViewById(R.id.tv_text);
        }
    }
    //对外暴露的方法,当设置该方法时,会创建接口的实现类
    public void setOnItemCickListener(MyOnItemClickListener myOnItemClickListener){
        this.myOnItemClcikListener = myOnItemClickListener;
    }
    public void setOnLongCickListener(MyOnLongClickListener myOnLongClickListener){
        this.myOnLongClickListener = myOnLongClickListener;
    }
    //自定义点击接口
    public interface MyOnItemClickListener{
        void myOnItemClickListener(int position,View view);
    }
    //自定义长按接口
    public interface MyOnLongClickListener{
        void myOnLongClickListener(int position,View view);
    }
}

果:

时间: 2024-11-05 16:00:14

使用RecyclerView实现瀑布流的效果的相关文章

RecyclerView实现瀑布流效果(二)

在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutManager.其中StaggeredGridLayoutManager可实现交错式网格布局,正好可以用来实现瀑布流. 下面先看看效果图吧,再贴代码: 其中大部分内容实现其实是和上篇文章是一样的,就不多叙述了,就一个地方不同,就是我们在适配器中绑定ViewHolder的方法中需要重新给我们的itemVie

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.对

玩转Masonry JS库来实现瀑布流Web效果

工作项目中需要制作个Mobile上的Web App的展示,方便快捷访问和评价反馈.在展示页面能看到应用展示图,点击进入Web应用.我不是前端开发者,对HTML, CSS, JS这三剑客仅仅是略知一二.于是先规划了个简单的设计,感觉瀑布流的图片展示方式比较美观,同时布局的高度也一定灵活性.就按照Pinterest Android/IOS和花瓣Mobile Web App的目标开始实现. 第一天的成果是完成了基本的展示和链接.在iPhone模拟器上效果如下 : HTML页面代码snippet: 1

瀑布流页面效果

瀑布流页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="./jquery.js"> </script> <style> #all{ position: relative; } .box{ fl

瀑布流效果的一些收获

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

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

用原生JavaScript实现图片瀑布流的浏览效果

学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为难度系数较低 1 <?php 2 //没有数据源,利用遍历对应文件夹中的所有的图片得到的数组模拟成数据源 3 $arr = array(); 4 $dir = @opendir('images'); 5 while($file = @readdir($dir)){ 6 if($file == '.'

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面