RecyclerView 练习（三）

三、实现瀑布流布局

首先修改一下 fruit_item.xml 中的代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_margin="5dp">    <ImageView        android:id="@+id/fruit_image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        />    <TextView        android:id="@+id/fruit_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="10dp"/></LinearLayout>

接着修改 MainActivity.java 中的代码：

public class MainActivity extends AppCompatActivity {    private List<Fruit> fruitList = new ArrayList<>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initFruits();        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,                StaggeredGridLayoutManager.VERTICAL);        recyclerView.setLayoutManager(layoutManager);        FruitAdapter adapter = new FruitAdapter(fruitList);        recyclerView.setAdapter(adapter);    }}

在上述代码中我们创建了一个 StaggeredGridLayoutManager 的实例。StaggeredGridLayoutManager 的构造函数接收 2 个参数。第一个用于指定布局的列数，第二个用于指定布局的排列方向。传入 StaggeredGridLayoutManager.VERTICAL 表示会让布局纵向排列，最后把创建好的实例设置到 RecyclerView 当中。

四、设置点击事件

RecyclerView 不同于 ListView 的是，RecyclerView 并没有提供类似于 setOnItemClickListener() 这样的注册监听器方法，而是需要我们自己给子项具体的 view 去注册点击事件， 相比于 ListView 来说，实现起来要复杂一点。
下面修改 FruitAdapter.java 中的代码：

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {    private List<Fruit> mFruitList;    static class ViewHolder extends RecyclerView.ViewHolder {        View fruitView;        ImageView fruitImage;        TextView fruitName;        public ViewHolder(View view) {            super(view);            //保存子项最外层布局的实例            fruitView = view;            fruitImage = (ImageView) view.findViewById(R.id.fruit_image);            fruitName = (TextView) view.findViewById(R.id.fruit_name);        }}        public FruitAdapter(List<Fruit> fruitList){            mFruitList = fruitList;        }        @Override        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,                    parent, false);            final ViewHolder holder = new ViewHolder(view);            holder.fruitView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    int position = holder.getAdapterPosition();                    Fruit fruit = mFruitList.get(position);                    Toast.makeText(v.getContext(), "u clicked view " + fruit.getName(),                            Toast.LENGTH_SHORT).show();                }            });            holder.fruitImage.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    int position = holder.getAdapterPosition();                    Fruit fruit = mFruitList.get(position);                    Toast.makeText(v.getContext(), "u clicked image " + fruit.getName(),                            Toast.LENGTH_SHORT).show();                }            });            return holder;        }        @Override        public void onBindViewHolder(ViewHolder holder, int position) {            Fruit fruit = mFruitList.get(position);            holder.fruitImage.setImageResource(fruit.getImageId());            holder.fruitName.setText(fruit.getName());        }        @Override        public int getItemCount() {            return mFruitList.size();        }}

在上述代码中，先是修改了 ViewHolder，在 ViewHolder 中添加了 fruitView 变量来保存子项（item）最外层布局的实例。然后在 onCreateViewHolder() 方法中注册点击事件就可以了。这里分别为最外层布局和 ImageView 都注册了点击事件。

---

运行一下代码：