RecyclerView 瀑布流的配置以及它的 StaggeredGridLayoutManager 布局管理器的使用

RecyclerView 瀑布流的配置以及它的 StaggeredGridLayoutManager 布局管理器的使用

1、先在build.gradle中进行配置，在最后加上

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
compile 'com.android.support:recyclerview-v7:23.4.0'

2、使用recyclerView 瀑布流

在activity_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xykj.recyclerviewdemo.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/m_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

在layout中新建item_layout.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:background="#5500ff00"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView
        android:id="@+id/item_ico"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/item_name"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="ABC"
        android:textSize="20sp" />
</LinearLayout>

java中新建model包class类

package com.xykj.recyclerviewdemo;

public class User {
    private int icon;
    private String name;

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public User(int icon, String name) {
        this.icon = icon;
        this.name = name;
    }
}

模拟一个图片高度不一样的类

package com.xykj.recyclerviewdemo;

import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class SpaceItemDecration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        //获取当前item的下标
        int pos = parent.getChildLayoutPosition(view);
        if (pos < 3) {
            outRect.top = 0;
        } else {
            outRect.top = 10;
        }
        outRect.left = 5;
        outRect.right = 5;
    }
}

创建一个适配器Adapter

package com.xykj.recyclerviewdemo;

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.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

public class UserAdapter extends RecyclerView.Adapter<UserAdapter.UserView> {
    private List<User> list;
    private LayoutInflater mInflater;

    public UserAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public UserView onCreateViewHolder(ViewGroup parent, int viewType) {
        View layout = mInflater.inflate(R.layout.item_layout, null);
//        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
//                ViewGroup.LayoutParams.WRAP_CONTENT);
//        layout.setLayoutParams(lp);
        return new UserView(layout);
    }

    // 绑定数据
    @Override
    public void onBindViewHolder(UserView holder, int position) {
        User u = list.get(position);
        holder.ivIcon.setImageResource(u.getIcon());
        holder.tvName.setText(u.getName());
        if (position % 3 == 0) {
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams
                    (ViewGroup.LayoutParams.WRAP_CONTENT, 240);
            holder.ivIcon.setLayoutParams(lp);
        } else {
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams
                    (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            holder.ivIcon.setLayoutParams(lp);
        }
    }

    @Override
    public int getItemCount() {
        return null == list ? 0 : list.size();
    }

    //数据的显示视图类
    class UserView extends RecyclerView.ViewHolder implements View.OnClickListener{
        ImageView ivIcon;
        TextView tvName;

        public UserView(View itemView) {
            super(itemView);
            ivIcon = (ImageView) itemView.findViewById(R.id.item_ico);
            tvName = (TextView) itemView.findViewById(R.id.item_name);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            //获取当前这个item的位置
            int position = getLayoutPosition();
            list.remove(position);
//            notifyDataSetChanged();
            notifyItemRemoved(position);
        }
    }

    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }

    public List<User> getList() {
        return list;
    }

    public void setList(List<User> list) {
        this.list = list;
    }
}

编写MainActivity

package com.xykj.recyclerviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
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;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecycler = (RecyclerView) findViewById(R.id.m_recycler);
        //配置显示方式
        //以列表形式显示
        //mRecycler.setLayoutManager(new LinearLayoutManager(this));

        //网格显示
        //mRecycler.setLayoutManager(new GridLayoutManager(this,3));

        //瀑布流
        mRecycler.setLayoutManager(new StaggeredGridLayoutManager
                (2,StaggeredGridLayoutManager.VERTICAL));

        //添加Item之间的间距
        mRecycler.addItemDecoration(new SpaceItemDecration());
        init();

    }

    private RecyclerView mRecycler;

    private void init() {
        List<User> list = new ArrayList<User>(11);
        for (int i = 0; i < 11; i++) {
            int id = getResources().getIdentifier("pic" + i, "drawable", getApplication().getPackageName());
            list.add(new User(id, "用户" + i));
        }
        UserAdapter adapter = new UserAdapter(this);
        adapter.setList(list);
        mRecycler.setAdapter(adapter);
    }
}

还有就是RecyclerView分割线的使用下次在发布一下！！