首先建立布局。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.devin.recylerviewstaggereddemo.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_container"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</RelativeLayout>
列表项的布局:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/img_container"
android:layout_width="wrap_content"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
</LinearLayout>
可以加边框,Android5.0以上可以用CardView.这里只是简单实现。
下来是ViewHolder.java
public class ImageViewHolder extends RecyclerView.ViewHolder {
private Context context;
private ImageView imgContainer;
private int item;
private int scnWidth;//屏幕的宽
public ImageViewHolder(Context context, View itemView) {
super(itemView);
this.context = context;
imgContainer = (ImageView) itemView.findViewById(R.id.img_container);
//获取屏幕宽度
WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(metrics);
scnWidth = metrics.widthPixels;
//设置参数
ViewGroup.LayoutParams params = imgContainer.getLayoutParams();
params.width = scnWidth / 3;//设置三列显示
params.height = 240 + new Random().nextInt(360);//高度随机,240到600之间
imgContainer.setLayoutParams(params);
imgContainer.setPadding(3, 3, 3, 3);//设置图片边距
}
/**
* 设置数据项
*
* @param item
*/
public void setItem(int item) {
this.item = item;
}
/**
* 设置数据
*/
public void refreshView() {
Glide.with(context).load(item).crossFade().into(imgContainer);
}
}
Adapter.java
public class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder> {
private Context context;
private int[] imagePaths;
public ImageAdapter(int[] imagePaths) {
this.imagePaths = imagePaths;
}
@Override
public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
context=parent.getContext();
View view = LayoutInflater.from(context).inflate(R.layout.item_image_1, null);
return new ImageViewHolder(context,view);
}
@Override
public void onBindViewHolder(ImageViewHolder holder, int position) {
holder.setItem(imagePaths[position]);
holder.refreshView();
}
@Override
public int getItemCount() {
return imagePaths.length;
}
}
最后是Activity.java
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
//图片数据源资源ID,glide框架可以直接加载
private int[] RES_IMAGES_ID = {R.drawable.img_builder_001,
R.drawable.img_builder_002,
R.drawable.img_builder_003,
R.drawable.img_builder_004,
R.drawable.img_builder_005,
R.drawable.img_builder_006,
R.drawable.img_builder_007,
R.drawable.img_builder_008,
R.drawable.img_builder_009,
R.drawable.img_builder_010,
R.drawable.img_builder_011,
R.drawable.img_builder_012,
R.drawable.img_builder_013,
R.drawable.img_builder_014,
R.drawable.img_builder_015,
R.drawable.img_builder_016,
R.drawable.img_builder_017,
R.drawable.img_builder_018,
R.drawable.img_builder_019,
R.drawable.img_builder_020};
private ImageAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/**
* 初始化
*/
private void initView() {
recyclerView = (RecyclerView) findViewById(R.id.rv_container);
//设置瀑布流布局管理器,
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
recyclerView.setPadding(1,1,1,1);//设置边距,这是整个控件的边距
recyclerView.setHasFixedSize(true);//保持固定大小
adapter=new ImageAdapter(RES_IMAGES_ID);//创建适配器
recyclerView.setAdapter(adapter);//设置适配器
}
}
运行效果: