1. 程式人生 > >RecyclerView 實現瀑布流效果

RecyclerView 實現瀑布流效果

上次用RecyclerView實現了ListView的效果,這次用RecyclerView實現一個瀑布流的效果~

先上效果圖:


是不是感覺不錯啊~ 其實很簡單~ 只要換一個佈局管理器就行了

 mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));

第一個引數:是幾列 ~我這裡寫的是3就是圖上的效果~ 第二個引數就是水平垂直了~不

下面直接上程式碼吧:

Activity:

public class RecyclerViewActivity extends BaseActivity {

    private RecyclerView mRecyclerView;
    private List<FunctionEntity> mEntities = new ArrayList<FunctionEntity>();
    private MyAdapter myAdapter;
    private int[] colors = new int[]{Color.RED, Color.BLUE, Color.GREEN, Color.GRAY};

    private SwipeRefreshLayout mSwipeRefreshLayout;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recyclerview_layout);
        initview();
        getData();
        setAdapter();
    }

    public void setAdapter() {
        //流式佈局
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
        myAdapter = new MyAdapter(this, mEntities);
        mRecyclerView.setAdapter(myAdapter);
    }

    @Override
    public void getData() {
        for (int i = 0; i <= 100; i++) {
            FunctionEntity FunctionEntity = new FunctionEntity();
            int itemHeight = 200 + (int) (Math.random() * 300);//隨機高度
            FunctionEntity.setItemHeight(itemHeight);
            FunctionEntity.setName("" + i);
            switch (i % 4) {//隨機顏色
                case 0:
                    FunctionEntity.setColor(colors[0]);
                    break;
                case 1:
                    FunctionEntity.setColor(colors[1]);
                    break;
                case 2:
                    FunctionEntity.setColor(colors[2]);
                    break;
                case 3:
                    FunctionEntity.setColor(colors[3]);
                    break;
            }
            mEntities.add(FunctionEntity);
        }
    }

    public void initview() {
        mRecyclerView = (RecyclerView) findViewById(R.id.recy_view);
        //下拉重新整理控制元件
        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefresh_view);
        mSwipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);
        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                mSwipeRefreshLayout.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mEntities.clear();
                        getData();
                        myAdapter.notifyDataSetChanged();
                        Toast.makeText(RecyclerViewActivity.this, "refresh successful", Toast.LENGTH_SHORT).show();
                        mSwipeRefreshLayout.setRefreshing(false);
                    }
                }, 2000);
            }
        });
    }
}

我這裡加了一個下拉重新整理控制元件SwipeRefreshLayout, 這個可以很好的支援 RecyclerView ,  我在for迴圈裡面加了一個隨機高度的,就為了達到高度不一致的效果

下面上Adapter程式碼:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Context mContext;
    private List<FunctionEntity> mList;

    public MyAdapter(Context mContext, List<FunctionEntity> mList) {
        super();
        this.mContext = mContext;
        this.mList = mList;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        MyViewHolder MyViewHolder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.recyclerview_item, viewGroup, false));
        return MyViewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
        FunctionEntity FunctionEntity = mList.get(i);
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) myViewHolder.itemView.getLayoutParams();
        layoutParams.height = FunctionEntity.getItemHeight();
        myViewHolder.itemView.setLayoutParams(layoutParams);
        myViewHolder.itemView.setBackgroundColor(FunctionEntity.getColor());
        myViewHolder.mTv_Text.setText(FunctionEntity.getName());
    }

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

    public class MyViewHolder extends RecyclerView.ViewHolder {

        private TextView mTv_Text;

        public MyViewHolder(View itemView) {
            super(itemView);
            mTv_Text = (TextView) itemView.findViewById(R.id.tv_name);
        }
    }
}

就幾個方法~ 這種方式我們不再關心View的複用之類的了~ 只需要處理我們自己的Viwholder

佈局:

Acitivty:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swiperefresh_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recy_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</android.support.v4.widget.SwipeRefreshLayout>

Adapter item佈局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="1dp">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="21sp" />
</RelativeLayout>