上次用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>