RecycleView实现瀑布流的效果

RecycleView实现瀑布流的效果图：

1.因为RecycleView是android5.0后出来的，需要添加recycleview依赖库。快捷键Ctrl+Shift+Alt+S弹出项目结构界面。

2.在弹出的对话框中选择recycleview-v7的依赖库，点击确定

3.在activity_main布局文件中创建RecycleView控件

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhiyuan3g.myrecycleviewstagger.MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/Recycle_View"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>

4.在MainActivity.java文件中实例化控件，创建图片数组。

public class MainActivity extends AppCompatActivity {
    private RecyclerView recycleview;
    private int image[] = {R.drawable.pre12,  R.drawable.pre15,R.drawable.pre19,
            R.drawable.pre13,R.drawable.pre14, R.drawable.pre15, R.drawable.pre21,
            R.drawable.pre16, R.drawable.pre17, R.drawable.pre19,
            R.drawable.pre21,  R.drawable.pre15, R.drawable.pre22};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recycleview = (RecyclerView) findViewById(R.id.Recycle_View);
    }
}

5.创建DataBean类，存放Recycle的数据

//创建DataBean类，存放数据
public class DataBean {
    public int Icon;
    public String name;
}

6.我们要RecycleView实现瀑布流，需要创建MyRecycleStaggeredGridAdapter（名字自己定）适配器

//RecycleView的适配器，要注意指定的泛型，一般我们就是类名的ViewHolder继承ViewHolder（内部已经实现了复用优化机制）
public class MyRecycleStaggerAdapter extends RecyclerView.Adapter<MyRecycleStaggerAdapter.StaggerViewHolder>{
    private Context mContext;
    //泛型是RecycleView所需的bean类
    private List<DataBean>mList;
    //创建构造方法；一个需要接受两个参数，上下文，集合对象（包含了我们所需要的数据）
    public MyRecycleStaggerAdapter(Context context, List<DataBean> list) {
        mContext = context;
        mList = list;
    }

    @Override
    //创建staggerViewHolder，并把ViewHolder返回出去
    public MyRecycleStaggerAdapter.StaggerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //转换一个View布局，决定了item的样子， 参数:1.上下文 2.Xml布局资源 3.为null
        View view = View.inflate(mContext, R.layout.item_stagger, null);
        //创建一个staggerViewHolder对象
        StaggerViewHolder staggerViewHolder = new StaggerViewHolder(view);
        //把staggerViewHolder对象传出去
        return staggerViewHolder;
    }

    @Override
    //当VIewHolder和数据绑定时回调
    public void onBindViewHolder(MyRecycleStaggerAdapter.StaggerViewHolder holder, int position) {
        //从集合里拿对应item数据对象
        DataBean dataBean = mList.get(position);
        //给Holder里面的控件对象设置数据
        holder.setData(dataBean);
    }

    @Override
    public int getItemCount() {
        //决定RecycleView有多少条item
        if(mList!=null&&mList.size()>0){
            return mList.size();
        }
        return 0;
    }

    public class StaggerViewHolder extends RecyclerView.ViewHolder {
        private final ImageView mIcon;
        private final TextView mTextView;
        public StaggerViewHolder(View itemView) {
            super(itemView);
            mIcon = (ImageView)itemView.findViewById(R.id.item_stagger_iv_icon);
            mTextView = (TextView) itemView.findViewById(R.id.item_stagger_tv_name);
        }

        public void setData(DataBean data) {
            //给ImageView设置图片数据
            mIcon.setImageResource(data.Icon);
            //给TextView设置文本数据
            mTextView.setText(data.name);
        }
    }
}

7.在创建适配器时，需要创建一个item_stagger布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:id="@+id/item_stagger_iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:id="@+id/item_stagger_tv_name"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

8.创建实现瀑布流的方法StaggerLoadData(Boolean inversion,Boolean orientation);需要判断瀑布流的方向；

private void StaggerLoadData(Boolean inversion,Boolean orientation) {
        //集合对象
        ArrayList<DataBean> list = new ArrayList<>();
        //给DataBean类放数据，最后把装好数据的DataBean类放到集合里
        for(int i=0;i<image.length;i++){
            //创建DataBean类对象，
            DataBean dataBean=new DataBean();
            dataBean.Icon = image[i];
            dataBean.name ="美女"+i;
            //把DataBean类放入集合里
            list.add(dataBean);
        }
        //创建适配器Adapter对象  参数：1.上下文2.数据加载集合
        MyRecycleStaggerAdapter adapter = new MyRecycleStaggerAdapter(this,list);
        //设置适配器
        recycleview.setAdapter(adapter);
        //new Stagger布局管理器,布局管理器所需参数:1.规定显示几列 2.item排列方向
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, orientation ? StaggeredGridLayoutManager.VERTICAL : StaggeredGridLayoutManager.HORIZONTAL);
        //通过布局管理器控制条目排列的顺序  true:反向显示 false:正向显示
        staggeredGridLayoutManager.setReverseLayout(inversion);
        //设置布局管理器，参数StaggeredGridLayoutManager，可以是RecyclerView实现和StaggeredGridView一样的效果
        recycleview.setLayoutManager(staggeredGridLayoutManager);
    }

9.创建Menu菜单，来实现RecycleView瀑布流的各种样式，用onCreateOptionsMenu加载一个菜单的布局

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //加载布局使用菜单特有方法getMenuInflater。或Inflate对象，参数：1.菜单显示的不就 2.固定menu
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

10.在res下创建menu文件夹，在menu文件夹中创建menu_item布局；

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_stagger"
          android:orderInCategory="100"
          android:title="stagger显示"
          app:showAsAction="never"
        >
        <menu>
            <item
                android:id="@+id/action_stagger_normal"
                android:orderInCategory="100"
                android:title="标准"
                app:showAsAction="never"
                />
            <item
                android:id="@+id/action_stagger_reverse"
                android:orderInCategory="100"
                android:title="垂直反向"
                app:showAsAction="never"
                />
            <item
                android:id="@+id/action_stagger_horizontal"
                android:orderInCategory="100"
                android:title="水平"
                app:showAsAction="never"
                />
            <item
                android:id="@+id/action_stagger_horizontal_reverse"
                android:orderInCategory="100"
                android:title="水平反向"
                app:showAsAction="never"
                />
        </menu>
    </item>
</menu>

11.用onOptionsItemSelected给menu菜单添加点击事件

//菜单按钮点击事件的处理
    public boolean onOptionsItemSelected(MenuItem item) {
        //获取item的id
        int itemId = item.getItemId();
        //stagger标准显示
        if (itemId == R.id.action_stagger_normal) {
            StaggerLoadData(false, true);
            return true;
        }//stagger垂直显示
        else if (itemId == R.id.action_stagger_reverse) {
            StaggerLoadData(true, true);
        }//stagger水平显示
        else if (itemId == R.id.action_stagger_horizontal) {
            StaggerLoadData(false, false);
        }//stagger水平反向显示
        else if (itemId == R.id.action_stagger_horizontal_reverse) {
            StaggerLoadData(true, false);
        }
        return super.onOptionsItemSelected(item);
    }

MainActivity.java的代码：

public class MainActivity extends AppCompatActivity {
    private RecyclerView recycleview;
    private int image[] = {R.drawable.pre12,  R.drawable.pre15,R.drawable.pre19,
            R.drawable.pre13,R.drawable.pre14, R.drawable.pre15, R.drawable.pre21,
            R.drawable.pre16, R.drawable.pre17, R.drawable.pre19,
            R.drawable.pre21,  R.drawable.pre15, R.drawable.pre22};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recycleview = (RecyclerView) findViewById(R.id.Recycle_View);
    }

    private void StaggerLoadData(Boolean inversion,Boolean orientation) {
        //集合对象
        ArrayList<DataBean> list = new ArrayList<>();
        //给DataBean类放数据，最后把装好数据的DataBean类放到集合里
        for(int i=0;i<image.length;i++){
            //创建DataBean类对象，
            DataBean dataBean=new DataBean();
            dataBean.Icon = image[i];
            dataBean.name ="美女"+i;
            //把DataBean类放入集合里
            list.add(dataBean);
        }
        //创建适配器Adapter对象  参数：1.上下文2.数据加载集合
        MyRecycleStaggerAdapter adapter = new MyRecycleStaggerAdapter(this,list);
        //设置适配器
        recycleview.setAdapter(adapter);
        //new Stagger布局管理器,布局管理器所需参数:1.规定显示几列 2.item排列方向
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, orientation ? StaggeredGridLayoutManager.VERTICAL : StaggeredGridLayoutManager.HORIZONTAL);
        //通过布局管理器控制条目排列的顺序  true:反向显示 false:正向显示
        staggeredGridLayoutManager.setReverseLayout(inversion);
        //设置布局管理器，参数StaggeredGridLayoutManager，可以是RecyclerView实现和StaggeredGridView一样的效果
        recycleview.setLayoutManager(staggeredGridLayoutManager);
    }
    //菜单，RecycleView各种效果的展示
    //加载一个菜单的布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //加载布局使用菜单特有方法getMenuInflater。或Inflate对象，参数：1.菜单显示的不就 2.固定menu
        getMenuInflater().inflate(R.menu.menu_item, menu);
        return true;
    }

    @Override
    //菜单按钮点击事件的处理
    public boolean onOptionsItemSelected(MenuItem item) {
        //获取item的id
        int itemId = item.getItemId();
        //stagger标准显示
        if (itemId == R.id.action_stagger_normal) {
            StaggerLoadData(false, true);
            return true;
        }//stagger垂直显示
        else if (itemId == R.id.action_stagger_reverse) {
            StaggerLoadData(true, true);
        }//stagger水平显示
        else if (itemId == R.id.action_stagger_horizontal) {
            StaggerLoadData(false, false);
        }//stagger水平反向显示
        else if (itemId == R.id.action_stagger_horizontal_reverse) {
            StaggerLoadData(true, false);
        }
        return super.onOptionsItemSelected(item);
    }
}