先上图吧，哈哈：
shot-img.jpg
实现思路：
RecyclerView 中提供的 StaggeredGridLayoutManager 交叉网格的布局管理来实现网格的效果，然后通过随机的控制其中item的高度来设置。
主要代码:
/**
* Created by Administrator on 2016/5/31 0031.
*
* 瀑布流的展示
*
* 接口来自抓包的网易客户端接口
*/
public class WaterFallFragment extends BaseFragment{
@Bind(R.id.recycler_view)
RecyclerView mRecyclerView;
private WaterFallAdapter mAdapter;
@Override
protected int getLayoutId() {
return R.layout.fragment_image_main;
}
@Override
protected void initView(View view, Bundle savedInstanceState) {
ButterKnife.bind(this, view);
}
@Override
protected void initData() {
mRecyclerView.setLayoutManager(new
StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
mAdapter = new WaterFallAdapter(mActivity);
mRecyclerView.setAdapter(mAdapter);
getJsonData();
}
private void getJsonData(){
//网易的接口(可以浏览器直接访问)
String url = "http://c.3g.163.com/recommend/getChanListNews?" +
"channel=T1456112189138&size=20&passport=&devId=1uuFYbybIU2oqSRGyFrjCw%3D%3D" +
"&lat=%2F%2FOm%2B%2F8ScD%2B9fX1D8bxYWg%3D%3D&lon=LY2l8sFCNzaGzqWEPPgmUw%3D%3D" +
"&version=9.0&net=wifi&ts=1464769308" +
"&sign=bOVsnQQ6gJamli6%2BfINh6fC%2Fi9ydsM5XXPKOGRto5G948ErR02zJ6%2FKXOnxX046I" +
"&encryption=1&canal=meizu_store2014_news" +
"&mac=sSduRYcChdp%2BBL1a9Xa%2F9TC0ruPUyXM4Jwce4E9oM30%3D";
//volley
RequestQueue requestQueue = Volley.newRequestQueue(mActivity);
StringRequest request = new StringRequest(url, new Response.Listener<String>() {
@Override
public void onResponse(String s) {
try{
List<ImageBean> list = new ArrayList<>();
JSONObject jsonObject = new JSONObject(s);
JSONArray array = jsonObject.optJSONArray("美女");
for(int i=0; i < array.length();i++){
JSONObject item = array.optJSONObject(i);
String imgsrc = item.optString("imgsrc");
String title = item.optString("title");
ImageBean bean = new ImageBean();
bean.setImgsrc(imgsrc);
bean.setTitle(title);
list.add(bean);
Log.d("img","imgsrc="+imgsrc);
}
mAdapter.getList().addAll(list);
mAdapter.getRandomHeight(list);
mAdapter.notifyDataSetChanged();
}catch (Exception e){
e.printStackTrace();
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError volleyError) {
}
});
requestQueue.add(request);
}
}
RecyclerView adapter
public class WaterFallAdapter extends RecyclerView.Adapter<WaterFallAdapter.ViewHolder> {
private Context mContext;
private List<ImageBean> mList = new ArrayList<>();
private List<Integer> mHeights;
public WaterFallAdapter(Context context){
this.mContext = context;
}
public void getRandomHeight(List<ImageBean> mList){
mHeights = new ArrayList<>();
for(int i=0; i < mList.size();i++){
//随机的获取一个范围为200-600直接的高度
mHeights.add((int)(300+Math.random()*400));
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext)
.inflate(R.layout.item_image_text, parent, false);
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
ViewGroup.LayoutParams layoutParams = holder.itemView.getLayoutParams();
layoutParams.height = mHeights.get(position);
holder.itemView.setLayoutParams(layoutParams);
ImageBean bean = mList.get(position);
ImageLoader.getInstance().displayImage(bean.getImgsrc(),
holder.mImageView, NORMAL_OPTION);
}
@Override
public int getItemCount() {
return mList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder{
@Bind(R.id.imageview)
ImageView mImageView;
public ViewHolder(View view){
//需要设置super
super(view);
ButterKnife.bind(this, view);
}
}
public List<ImageBean> getList() {
return mList;
}
public static DisplayImageOptions NORMAL_OPTION = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.showImageOnLoading(R.mipmap.ic_launcher)
.showImageForEmptyUri(R.mipmap.ic_launcher)
.showImageOnFail(R.mipmap.ic_launcher)
.cacheOnDisc(true)
.build();
}
布局
主要使用：CardView + ImageView来布局的（Cardview实现圆角）
使用CradView，需要在gradle中添加
compile 'com.android.support:cardview-v7:23.0.1'
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="8dp"
app:cardCornerRadius="4dp"
>
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
/>
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
tools:text="this is a simple"
android:visibility="gone"
/>
</android.support.v7.widget.CardView>
项目地址github：https://github.com/George-Soros/RecyclerViewTest
有不明白的，有建议的，需要你的留言哦，
