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);
    }
}