玩Android项目开发8------项目界面（RecyclerView实现瀑布流 + Glide裁剪图片）

在之前的界面中，我有使用FlexBoxLayout实现瀑布流的效果，其实在项目中引进RecyclerView的时候，我说过之后会引进瀑布流效果，那么现在就有一个功能使用了瀑布流。

1、RecyclerView实现瀑布流。

在项目页面的第二个Tab中，我就使用到了瀑布流，其实没有什么特别难的，就是一个布局管理器StaggeredGridLayoutManager，通过它就可以实现瀑布流。

if(holder instanceof ProjectViewHolder){
             //设置适配器
            proAdapter = new ProjectAdapter(context,projectList);
            //设置瀑布流管理器
            StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3,
                    StaggeredGridLayoutManager.VERTICAL);
            ((ProjectViewHolder) holder).rv_project.setLayoutManager(manager);
            ((ProjectViewHolder) holder).rv_project.setAdapter(proAdapter);

            ((ProjectViewHolder) holder).rv_project.addItemDecoration(new RvItemDistance(RvItemDistance.px2dp(8)));
//
        }

可以按照自己的意愿，来设置列数，这里设置的是3列，然后RecyclerView设置适配器，就完成了。

2、点击进入项目详情页面。

当点击项目页面的每个Item时，会跳转到对应的Item界面，需要将数据传递过去，List数据的传递，记得要将Bean类实现Serializable接口。

pjAdapter.setOnItemClickListener1(new ProjectViewPagerAdapter.onItemClickListener() {
            @Override
            public void onClick(int id) {
                //获取id,根据id获取数据
                fPresenter.getProjectById(1,id);
                Intent intent = new Intent();
                intent.putExtra("data", (Serializable) datas);
                intent.setClass(getContext(),ProjectInfoActivity.class);
                startActivity(intent);
            }
        });

在Activity界面接收数据：

List<ProjectItemBean.DataBean.DatasBean> datas =
                (List<ProjectItemBean.DataBean.DatasBean>) getIntent().
                        getSerializableExtra("data");

然后使用RecyclerView实现数据的匹配绑定。

public class ProjectInfoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final Context context;
    private final List<ProjectItemBean.DataBean.DatasBean> datas;

    public ProjectInfoAdapter(Context context, List<ProjectItemBean.DataBean.DatasBean> datas){
        this.context = context;
        this.datas = datas;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_project_info,parent,false);
        return new ProjectViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if(holder instanceof ProjectViewHolder){
            ((ProjectViewHolder) holder).tv_project_author.setText(datas.get(position).getAuthor());
            ((ProjectViewHolder) holder).tv_project_title.setText(datas.get(position).getTitle());
            ((ProjectViewHolder) holder).tv_project_date.setText(datas.get(position).getNiceDate());
            Glide.with(context).load(datas.get(position).getEnvelopePic()).centerCrop()
                    .into(((ProjectViewHolder) holder).iv_project);
            Typeface typeface = Typeface.createFromAsset(context.getAssets(),"黑体.otf");
            ((ProjectViewHolder) holder).tv_project_title.setTypeface(typeface);
        }
    }

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

    class ProjectViewHolder extends RecyclerView.ViewHolder{
        private ImageView iv_project,iv_project_collection;
        private TextView tv_project_title,tv_project_desc,tv_project_date,tv_project_chapter,tv_project_author;
        public ProjectViewHolder(@NonNull View itemView) {
            super(itemView);
            iv_project = itemView.findViewById(R.id.iv_project);
            tv_project_title = itemView.findViewById(R.id.tv_project_title);
            tv_project_date = itemView.findViewById(R.id.tv_project_date);
            iv_project_collection = itemView.findViewById(R.id.iv_project_collection);
            tv_project_author = itemView.findViewById(R.id.tv_project_author);
        }
    }
}

这个地方没什么好说的，之前的小节中，都说了很多了，就有一个问题，Glide裁剪图片。

Glide加载图片的时候，其实会根据ImagView的大小来裁剪图片，但是在加载到ImageView的时候，有时候尺寸并不符合，所以我们也可以自己去裁剪。

（1）居中裁剪 centerCrop

Glide.with(context).load(datas.get(position).getEnvelopePic()).centerCrop()
                    .into(((ProjectViewHolder) 

（2）圆角 RoundedCorners（int）

 Glide.with(context).load(datas.get(position).getEnvelopePic()).transform(new RoundedCorners(20))
                    .into(((ProjectViewHolder) holder).iv_project);

（3）居中 + 圆角

这种方式存在一个顺序问题，如果先圆角，再裁剪，那么圆角会被裁剪；因此需要先裁剪，再圆角。

Glide.with(context).load(datas.get(position).getEnvelopePic()).transform(new CenterCrop(),new RoundedCorners(20))
                    .into(((ProjectViewHolder) holder).iv_project);

（4）圆形裁剪 CircleCrop

Glide.with(context).load(datas.get(position).getEnvelopePic()).transform(new CircleCrop())
                    .into(((ProjectViewHolder) holder).iv_project);

3、单击Item进入项目详情页面

做接口回调。

holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.onClick(datas.get(position).getLink());
            }
        });