RecyclerView 实现瀑布流效果

上次用RecyclerView实现了ListView的效果，这次用RecyclerView实现一个瀑布流的效果~

先上效果图：



是不是感觉不错啊~ 其实很简单~ 只要换一个布局管理器就行了

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

第一个参数：是几列 ~我这里写的是３就是图上的效果～　第二个参数就是水平垂直了～不

下面直接上代码吧:

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>