recyclerView实现瀑布流布局及其单击事件

接上一篇文章，修改部分代码即可实现了。

修改book_item.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="5dp">

    <ImageView
        android:id="@+id/id_book_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:id="@+id/id_book_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

修改MainActivity文件:

（创建StaggeredGridLayoutManager布局实例，两个参数分别为：第一个数字3表示会把布局分成3列；第二个会指定布局的排列方向；然后把布局实例设置到RecyclerView中就可以了）

package com.example.dell.practice_recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

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

public class MainActivity extends AppCompatActivity {

    private List<Book> bookList=new ArrayList<>();
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initBooks();
        RecyclerView recyclerView= (RecyclerView) findViewById(R.id.id_recycler_view);

        StaggeredGridLayoutManager layoutManager1 = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

        LinearLayoutManager layoutManager=new LinearLayoutManager(this);  //LinearLayoutManager中定制了可扩展的布局排列接口，子类按照接口中的规范来实现就可以定制出不同排雷方式的布局了

        //配置布局，默认为vertical（垂直布局），下边这句将布局改为水平布局
        //layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager1);//layoutManager是水平/垂直布局的设置，，layoutManager1是瀑布流布局的设置
        BookAdapter adapter=new BookAdapter(bookList);
        recyclerView.setAdapter(adapter);
    }

    private void initBooks(){
        for (int i=1;i<11;i++){
            Book book=new Book(getStringName("春起之苗")+i,R.drawable.icon_book);
            bookList.add(book);
        }
    }

    private String getStringName(String name){
        Random random=new Random();
        int length=random.nextInt(20)+1;
        StringBuilder builder=new StringBuilder();
        for(int i=0;i<length;i++) {
            builder.append(name);
        }
        return builder.toString();
    }
}

 

此时运行结果就是瀑布流布局，接下来实现单击事件：

修改bookAdapter文件:

（1、在ViewHoder中添加bookView来保存子项最外层布局的实例。然后在onCreateViewHolder（）方法中注册点击事件）

package com.example.dell.practice_recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

/**
 * Created by dell on 2018/6/3.
 * Created by qiyueqing on 2018/6/3.
 */

public class BookAdapter extends RecyclerView.Adapter<BookAdapter.ViewHolder>{

    private List<Book> mBookList;
    static class ViewHolder extends RecyclerView.ViewHolder{
        View bookView;
        ImageView bookImage;
        TextView bookName;
        public ViewHolder(View view){
            super(view);
            bookView=view;
            bookImage=view.findViewById(R.id.id_book_image);
            bookName=view.findViewById(R.id.id_book_name);
        }
    }

    public BookAdapter(List<Book> bookList){
        mBookList=bookList;
    }
    @Override
    public BookAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book_item,parent,false);

        final ViewHolder holder = new ViewHolder(view);
        holder.bookView.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Book book = mBookList.get(position);
                Toast.makeText(v.getContext(), "you clicked" + book.getName(), Toast.LENGTH_SHORT).show();
            }
        });
        holder.bookImage.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Book book = mBookList.get(position);
                Toast.makeText(v.getContext(), "you clicked image" + book.getName(), Toast.LENGTH_SHORT).show();
            }
        });

        //RecyclerView.ViewHolder holder=new ViewHolder(view);
        return (ViewHolder) holder;
    }

    @Override
    public void onBindViewHolder(BookAdapter.ViewHolder holder, int position) {
        Book book=mBookList.get(position);
        holder.bookImage.setImageResource(book.getImageId());
        holder.bookName.setText(book.getName());
    }

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

**************我是分割线**************
还是把这篇博文完整一下吧，这样的话大家就不用翻到上一篇文章看代码了，，这里把代码放全，如果需要看编写的过程的话，就看上一篇咯

整个项目的目录：

book实体类的代码：

package com.example.dell.practice_recyclerview;

/**
 * Created by dell on 2018/6/3.
 * Created by qiyueqing on 2018/6/3.
 */

public class Book {
    private String name;
    private int imageId;

    public Book(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

activity_main.xml文件的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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.example.dell.practice_recyclerview.MainActivity">
<android.support.v7.widget.RecyclerView
    android:id="@+id/id_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

</LinearLayout>

在build.gradle里配置的代码：

在dependenciesl里添加一句代码

    compile 'com.android.support:recyclerview-v7:24.2.1'